Automatische Silbentrennung war nie einfacher - und mit Mozilla Firefox ist diese sogar grammatikalisch korrekt!
Linksbünding mit ausgefranzten enden, Blocksatz mit wörterlangen Leerzeichen oder Zentriert und unbequem zu lesen. Vorallem auf Smartphones sieht das teilweise ziemlich hässlich aus, denn viele Webseiten haben noch nicht das ultimative Pflichtfeature aus CSS3 implementiert: Die automatische Silbentrennung!
Wie funktionierts? Ganz einfach, mit zwei Wörtern:
hyphens: auto;
Nun werden Wörter automatisch getrennt, wenn es nötig ist. Für die grammatikalisch korrekte Silbentrennung muss jeweils die Sprache mit dem HTML Attribut lang="" definiert werden, auf dieser Seite ist das global im <html> Tag festgelegt. Das tolle an hyphens ist, dass die Eigenschaft vererbbar ist und somit für alle Child-Elemente gilt. Ich habe also mit <html lang="de-ch"> und body {hyphens: auto} eine perfekte Silbentrennung auf der gesamten Seite.
Soweit die W3C Spezifikation.
In der Praxis ist das zugegeben noch ein bisschen komplizierter, aber der Aufwand hält sich in Grenzen und ist wirklich lohnenswert. Was fehlt sind die Präfixe für die einzelnen Browser.
Das ganze funktioniert nun wie folgt:
-moz-hyphens: auto; /* Firefox 6+ */ -webkit-hyphens: auto; /* Google Chrome 13+, Safar 5.1+ */ -ms-hyphens: auto; /* IE 10+ */ hyphens: auto; /* W3C */
Einen Haken hat das ganze noch: Die Browserunterstützung lässt noch etwas zu wünschen übrig. Das wird sich aber schon bald ändern und bis dahin kommen wenigstens die Nutzer, die einen Browser benutzen, der das ganze schon unterstützt, in den Genuss der Silbentrennung. Nachteile bringt das ganze eigentlich keine. Im Beispiel oben habe ich das ganze auf den <body> Tag angewandt, genausogut kann man das natürlcih auch nur mit einem bestimmten Element, z. B. <article> machen. Falls dies immer noch irgendwo zu unerwünschten Silbentrennungen führt, kann man auch eine Ausnahme definieren:
a {
-moz-hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
Mit diesem Beispiel wird das Trennen von Links verhindert.
Es ist nur ein kleiner Aufwand für einen Webmaster, aber eine grosse Erleichterung für den Besucher!