Jahrelang wurde die Typographie im Web mit Füßen getreten. Erst Webfonts haben dafür gesorgt, dass die Webtypographie sich weiterentwickelt und uns neue Möglichkeiten an die Hand gegeben werden. So auch die Silbentrennung im Browser.
Wer in der Vergangenheit mit der Silbentrennung arbeiten wollte, kam um ein Javascript nicht herum: Hyphenator brachte dem Browser die Silbentrennung bei und ermöglichte es so, auch Texte im Blocksatz auszugeben. Doch mittlerweile beherrschen auch moderne Browser eine rudimentäre Silbentrennung, was gerade für die deutsche Sprache mit seinen zum Teil sehr langen Wörtern nützlich sein kann.
Der Code dafür ist denkbar einfach:
body {}
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-wrap: break-word; /* Fallback fuer Chrome und IE < 10 */
Browseruntersützung für Silbentrennung
Leider benötigen fast alle Browser noch ihre Vendor-Prefixes. Chrome unterstützt seltsamerweise bis heute keine Silbentrennung (danke Andreas), der aktuelle Internet Explorer 10 hingegen schon. Schaut man sich die Übersicht bei Can I Use an, so liegt der Anteil der unterstützenden Browser mittlerweile bei knapp 30%, Tendenz steigend.
Um mal ein bisschen mit der Silbentrennung rumzuspielen, habe ich sie testweise auch hier im Blog mal aktiviert und musste feststellen, dass nicht alle Wörter so umbrechen, wie ich es mir gewünscht hätte. In Layout-Programmen wie InDesign lässt sich genau festlegen, wieviele Zeichen mindestens vor bzw. nach einem Umbruch stehen sollen. Nicht so per CSS. Da bricht der Browser auch 2 Buchstaben in eine neue Zeile um, was die Lesbarkeit nicht immer fördert. Und mit Soft-Hyphens zu arbeiten, wie sie zusätzlich vom W3C vorgeschlagen werden, kann auch nur bei sehr langen Wörtern eine Lösung sein. Bleibt also am Ende doch nur der Javascript Hyphenator?
Setzt Ihr die Silbentrennung bereits aktiv in Projekten ein? Wie sind eure Erfahrungen? Oder wartet Ihr noch, bis auch Chrome Silbentrennung unterstützt?
Hast Du gute Erfahrungen gemacht mit Hyphenator (JS) gute Erfahrungen gemacht? Ich hatte das mal in einem Projekt eingebunden aber auch schnell wieder entfernt, weil ich das irgendwie auf die Performance ging, hatte ich das Gefühl.
Die gleiche Erfahrung habe ich auch gemacht. Ich habe aber gesehen, dass dieses oder ein ähnliches Script schon eine ganze Weile beim Fördeflüsterer läuft. Also vielleicht haben sich die Zeiten geändert.
Ich benutzte die automatische Silbentrennung auch shcon länger in meinem Blog. Aber schade ist das Google Chrome (vor allem die Version für Android) CSS-Hyphens immer noch nicht unterstützt. Gerade bei Websites mit Responsive Webdesign, würde die Lesefreundlichkeit auf Smartphones und Tablets deutlich steigen.