HTML-Seiten Silbentrennung durch CSS-Code

CSS-Code Silbentrennung

Silbentrennung durch CSS-Code ist nicht vergleichbar mit Blocksatz. Das Trennen von Silben innerhalb einer HTML-Seite kann durch CSS-Code automatisiert werden.

Der Wortumbruch in HTML-Seiten ist so eine Sache für sich. Den einen stört es, wenn längere Wörter am Ende der Zeile nicht getrennt werden, dem anderen ist dies egal. Ich war einfach zu faul den CSS-Code in meine WordPress styles.css zu übernehmen. Den Code selber setze ich auf diversen Firmenseiten und privaten Websites ein. Wenn Sie nicht gerade mit einem sehr alten Browser unterwegs sind, versteht Ihr Browser die Anweisungen und zeigt den Text entsprechend an.

Grundvoraussetzung

Ihre Sprache muss im öffnenden <html>-Tag angegeben sein. Sonst weiß der Browser nicht für welche Sprache er die Silbentrennung anwenden soll. Innerhalb des öffnenden <html>-Tag muss lang="de-DE" stehen. In dem folgenden Beispielbild sehen Sie den Anfang des HTML-Source einer meiner Webseiten. Nach dem doctype-Tag in der ersten Zeile, wird das öffnende <html>-Tag mit der Sprache lang="de-DE" angezeigt.

html-tag language

Die Sprache wird im HTML-Tag durch das Property lang=”de-DE” definiert.

Wie können Sie den HTML-Code im Browser anzeigen?

Sie rufen Ihre Website auf. Auf einer freien Stelle, das heißt – nicht auf einem Link, aber innerhalb der angezeigten Webseite drücken Sie die rechte Maustaste. In dem dann öffnenden Kontextmenü wählen Sie im

  • Firefox Browser
    die Auswahl „Element untersuchen“ aus.
  • Google Chrome Browser
    die Auswahl „Untersuchen“ aus.
  • Safari Browser
    die Auswahl „Element-Informationen“ aus.

Wenn dort, innerhalb des HTML-Tags, eine Language = lang angegeben ist, wird der CSS-Code für die Silbentrennung funktionieren.

Der CSS-Code für die Silbentrennung

Es ist egal an welcher Stelle Sie den CSS-Code in Ihrer styles.css einfügen – natürlich nicht innerhalb einer geklammerten Anweisung. Ich strukturiere meine CSS-Code immer so, dass ich am Anfang einen allgemein gültigen Abschnitt für alle Seiten habe. Dort habe ich den CSS-Code hinzugefügt.

/* Silbentrennung */
h1, h2, h3, h4, h5, h6, p, ul li {
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-chars: auto 3;
  -webkit-hyphenate-limit-lines: 4;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-chars: auto 3;
  -ms-hyphenate-limit-lines: 4;
  hyphens: auto;
}

Wie Sie dem CSS-Code entnehmen können, wird die Silbentrennung für die Überschriften, Absätze und Listeneinträge verwendet. Wenn Sie andere HTML-Tags einbeziehen möchten, erweitern Sie den Code in Zeile 2 einfach. Also ein Komma plus das zusätzliche HTML-Tag.

Browserspezifische CSS-Anweisungen

Leider ist es auch noch heute so (Mai 2019), dass die Browserhersteller teilweise ihr eigenes Süppchen kochen und sogenannte Browser-Präfixe einsetzen. Die Standards werden in Teilen nicht umgesetzt. Deshalb gibt es CSS-Anweisungen mit dem Präfix -ms- von Microsoft oder -webkit- von Apple. Trotzdem werden in manchen Browserversionen dieser Hersteller, die CSS-Anweisungen nicht beachtet. Bei einem aktuellen Safari wird die -webkit-hyphenate-limit-chars CSS-Anweisung nicht berücksichtigt.

Safari CSS-Code

Safari Version 12.1

..-hyphenate-limit-chars: auto 3;.

Wenn das Wort nicht die erforderliche Mindestanzahl von Zeichen im Wort, vor dem Bindestrich oder nach dem Bindestrich erfüllt, wird das Wort nicht automatisch getrennt.

..-hyphenate-limit-lines: 4;

Die CSS-Eigenschaft -ms-hyphenate-limit-lines und -webkit-hyphenate-limit-lines gibt die maximale Anzahl aufeinanderfolgender Zeilen in einem Element an, die mit einem Wort mit Bindestrich abgeschlossen werden können.
Mit anderen Worten, wenn in Zeile 1 bis 5 jeweils ein Wort am Ende der Zeile getrennt werden könnte, wird nur in Zeile 1 bis 4 am Ende ein Wort getrennt. Die Zeile 5 wird dann nicht getrennt. Ab Zeile 6 geht die Trennung weiter.

Fazit

In einigermaßen aktuellen Internet Browsern funktioniert die Silbentrennung. Sollte dies bei irgendwelchen Browsern nicht klappen, ist dies auch kein Beinbruch. Dann wird das Wort halt nicht getrennt. Immer noch besser als eine manuelle Trennung durch das Einfügen von &shy; zu erzwingen. Da heutzutage unendlich viele unterschiedliche Displaygrößen – Smartphone, Tablet, Desktop, TV – Ihre Webseiten aufrufen können, sind manuelle Trenntechniken wie &shy; nur noch in Ausnahmefällen sinnvoll.

Kontrolle des SEO Fokus-Keyword: Silbentrennung durch CSS-Code

Das Fokus-Keyword dieser Seite ist Silbentrennung durch CSS-Code, daraus wird folgende SEO-Kontroll-Suche:

Google Kontrollsuche

In dem Beitrag WordPress Plugin – Yoast SEO beschreibe ich die Kontroll- und Op­ti­mie­rungs­mög­lich­kei­ten von dem auch für diesen Beitrag benutzten SEO Plugin. Dieser Beitrag wird vom Yoast Seo Plugin mit Lesbarkeit: Verbesserung nötig und SEO: Gut, bewertet.

Wie bewerten Sie diesen Beitrag?

Eine schnelle Klick-Bewertung - möglichst mit 5 Sternen - wäre nett. Ein Kommentar mit Ihren Erfahrungen zu diesem Thema würde mich noch mehr freuen. Beides zusammen ...

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (Bis jetzt keine Bewertung)
Loading...

Ihr Kommentar fehlt hier

Ihre E-Mailadresse wird nicht öffentlich angezeigt. Erforderliche Felder sind mit * markiert.

Wenn im Kommentar ein Link vorhanden ist, muss der Kommentar von mir freigeschaltet werden. Dies kann manchmal etwas dauern. Sie erhalten eine E-Mail wenn der Kommentar freigeschaltet wurde.

Ihre E-Mailadresse wird wegen der Avatar-Integration mit gravatar.com abgeglichen. Nähere Informationen entnehmen Sie bitte meiner Datenschutzerklärung.

Durch die wei­te­re Nut­zung der Web­site stim­men Sie der Ver­wen­dung von Cookies zu. Wei­te­re In­for­ma­tio­nen er­hal­ten Sie unter Cookies und in mei­ner Da­ten­schutz­er­klä­rung.

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen