Silbentrennung im Browser: CSS-Eigenschaft “hyphens”
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.
Responsive Webdesign!
Mein Video-Training mit über 8 Stunden Laufzeit! Programmierung, Konzeption, Gestaltung – Webdesign für alle Geräte und Auflösungen.
Jetzt bei Amazon bestellen!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.
Update: Wie mir über Google+ von Oliver völlig zu recht mitgeteilt wurde, muss der HTML-Language Code (w3schools.com/tags/ref_language_codes.asp) korrekt eingestellt sein. Ansonsten wird nach einer falschen Sprache getrennt, was u.U. schlimmer ist als gar keine Trennung.
Weitere Informationen zum Browser-Support findet ihr auf HTML5Please und auf Can I Use.