Automatische Silbentrennung mit CSS wird von Firefox, Safari, Chrome und Internet Explorer 10 unterstützt. Die Browser verwenden integrierte Wörterbücher mit den Trennregeln. Damit das funktioniert, muss natürlich die Sprache festgelegt sein. Das geschieht wohl am einfachsten mittels Verwendung von <html lang="de"> am Anfang des Dokuments. Aktivieren lässt sich die automatische Silbentrennung sehr einfach durch
.hyphenate {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
}
Es ist natürlich nicht Sinn der Sache, die Silbentrennung auf der gesamten Seite und für alle Bereiche zu aktivieren. Deswegen erstellt man in TYPO3 am besten einen Frame, mit dem man dann für einzelne Inhaltselemente die Silbentrennung einschalten kann, indem man dem Inhaltselement diesen Frame zuweist.
Es können drei Werte verwendet werden: hyphens: none | manual | auto Leider fehlt die Möglichkeit, die Anzahl der maximal aufeinander folgenden Trennungen zu begrenzen, was im Deutschen mit seinen häufig auftretenden Bandwurmworten ganz bestimmt zu Unschönheiten führt, besonders bei sehr schmalen Spalten.
Mozilla bezeichnet hyphens derzeit noch als experimentelles Feature. Ausprobieren werde ich es bei geeigneten Projekten trotzdem. Paralell zu hyphens kann (und sollte) natürlich die HTML-entity ­ benutzt werden, die einen Trennvorschlag darstellt.
Ich benutzte die automatische Silbentrennung schon 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.
Sieht schlecht aus für Chrome:
http://caniuse.com/css-hyphens