Silbentrennung im Browser: CSS-Eigenschaft “hyphens”

css-silbentrennung

Wer im Internet typografisch ansprechende Texte gestalten möchte, hatte es lange Zeit nicht leicht. Mit dem Einzug der Webfonts stehen Webdesignern mittlerweile viele gelungene Schriftarten zur Verfügung und es gibt sogar experimentelle Möglichkeiten Ligaturen und Kerning im Browser zu aktivieren. Was noch fehlt ist die klassische Silbentrennung, die bisher ebenfalls nur über externe Scripte und Workarounds umständlich zu realisieren war. Mit der CSS-Eigenschaft hyphens wird vieles einfacher.

Modernes Webdesign

Neue Workflows, Techniken und Designideen – inkl. Rapid Prototyping, Responsive Design und Sass.

In unserem Shop kaufen
Signierte DVD, keine Versandkosten

Bei Amazon bestellen
Standard-Version

Silbentrennung per CSS

Der CSS-Code für die Silbentrennung sieht so aus:

body {
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;
}

Wie ihr seht, existieren Vendor-Prefixes für Webkit, Microsoft und Mozilla. Ohne Prefix kann kein aktueller Browser die Eigenschaft korrekt interpretieren.
Nichts desto trotz, kann hyphens: auto; bereits heute in allen Projekten eingesetzt werden, da im schlimmsten Fall Wörter in einem speziellen Browser nicht getrennt werden. Das ist zu verkraften.
Damit die Silbentrennung auch wie gewünscht umgesetzt wird, muss zwingend der HTML-Language Code (w3schools.com/tags/ref_language_codes.asp) korrekt angegeben sein. Ansonsten wird nach einer falschen Sprache getrennt, was u.U. schlimmer ist als gar keine Trennung.

Beispiel anschauen

Weitere Informationen zum Browser-Support findet ihr auf HTML5Please und auf Can I Use.