Silbentrennung im Browser mit HTML oder CSS

Es gibt verschiedene Möglichkeiten wie du die Silbentrennung von Wörtern auf deiner Website nutzen kannst. Alle Methoden haben gewisse Vor- und Nachteile.

Drei Methoden zur Silbentrennung

Die drei am häufigst eingesetzten Methoden zur Silbentrennung sind via HTML, CSS oder JavaScript:

1. HTML: Es gibt HTML-Befehle für verschiedene Umbrüche, die allerdings manuell vom Content Manager eingefügt werden müssen. Dafür funktionieren die Befehle auch dann, wenn der Content in einer anderen Quelle angezeigt wird.
2. CSS: CSS hat den Vorteil das der Befehl einmal hinterlegt werden muss und der Content Manager muss beim einpflegen der Inhalte nicht manuell die Trenner hinterlegen. Hier sollte jedoch beachtet werden, dass der Support einiger Browser sehr eingeschränkt ist – besonders bei älteren Browsern wird der Befehl falsch oder gar nicht umgesetzt. 
3. JavaScript: Meistens funktionieren die Skripte so, dass per JavaScript automatisch die o.g. HTML-Umbrüche an der richtigen Stelle eingefügt werden. Ihr solltet beachten, dass viele Skripte Probleme mit Webfonts haben, und eure Ladezeit erheblich beeinträchtigen können. Daher wird in dem Beitrag nicht weiter darauf eingegangen.

Silbentrennung in HTML

HTML selbst verfügt über keine automatische Silbentrennung. Lange Wörter werden somit nicht von selbst getrennt und laufen daher oft über den Bildschirmrand hinaus. Das führt, besonders auf Mobilgeräten, oft zu Problemen. Der Content Manager muss daher eine manuelle Silbentrennung einfügen. Dazu existieren folgende HTML-Befehle:

Trennung ohne Trennstrich <wbr> = Word Break

Mit dem wbr – Word Break Tag wird das Wort an der vordefinierten Stelle umgebrochen, wenn nicht ausreichend Platz zur Verfügung steht. Die Trennung erfolgt ohne Trennstrich.

Betriebsräte­<wbr>modernisierungs­gesetz

Trennung mit Trennstrich &shy; = Soft Hyphen

Das Soft-Hyphen &shy; oder &#173; wird das Wort an der vordefinierten Stelle umgebrochen. Die Trennung erfolgt mit Trennstrich. 

Da die Trennung wie beim Word Break tag manuell erfolgt wird sie oft nur beim Haupt- oder Zwischenüberschriften eingesetzt. Für den Lauftext ist der Aufwand meistens zu groß.

Betriebsräte­modernisierungsgesetzl

Keine Trennung &nbsp; = Non Breaking Space

Wenn der Umbruch zwischen zwei Wörtern verhindert werden soll, muss ein geschütztes Leerzeichen eingefügt werden.

Das geschützte Leerzeichen verhindert, dass an dieser Stelle der Text einer neuen Zeile anfängt. Dadurch wird ein automatischer Zeilenumbruch verhindert.

Wort1 Wort2

Silbentrennung per CSS

hyphens bewirkt entweder eine automatische Worttrennung oder unterdrückt weiche Trennzeichen (bedingter Trennstrich), falls diese im HTML hinterlegt sind. Dabei stehen folgende Werte zur Verfügung:

• none: unterdrückt weiche Trennzeichen, wenn per HTML-Entity &shy; oder HTML-Entity-Nummer &#173; ein bedingter Trennstrich definiert ist.
• manual: bewirkt, dass weiche Trennzeichen zu einer Worttrennung führen. manual ist der Standardwert für hyphens.
• auto: „aktiviert“ die automatische Worttrennung nach Regeln der über das HTML-Attribut lang definierten Sprache.

Um die Silbentrennung per CSS zu aktivieren, musst du die Eigenschaft hyphens wie folgt verwenden:

p {
 hyphens: auto;
}

Damit die Silbentrennung wie von dir gewünscht umgesetzt wird, sollte der HTML-Language Code im Header korrekt angegeben sein. Wie du den HTML Language Code korrekt hinterlegst erfährst du bei W3Scools: HTML Language Code Reference (w3schools.com/tags/ref_language_codes.asp).

Ist der HTML Language Code nicht oder falsch hinterlegt wird nach einer falschen Sprache getrennt, was zu einer unschönen Silbentrennung führen kann.