Silbentrennung mit CSS

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, be­son­ders bei sehr schmalen Spalten.

Mozilla bezeichnet hyphens derzeit noch als experimentelles Feature. Ausprobieren werde ich es bei ge­eig­ne­ten Projekten trotzdem. Paralell zu hyphens kann (und sollte) natürlich die HTML-entity &shy; benutzt werden, die einen Trennvorschlag darstellt.