HH maczarr.de

CSS: automatische Silbentrennung

Bisher war Silbentrennung im Web kaum vorhanden. Es gab zwar Ansätze, aber so richtig brauchbar waren diese nicht. Doch das ändert sich nun endlich.

Das Entity shy war eine Hilfestellung, man konnte es mitten in Worte einbauen und der Browser wusste somit, dass dies eine Stelle war, an der man ruhig umbrechen darf, wenn das Wort zu lang für die Zeile wurde.
Nachteil an dieser Methode ist natürlich, dass alle diese Entities für jedes Wort von Hand gesetzt werden mussten. Dann gab es Skripte, die das clientseitig per JavaScript gemacht oder auch serverseitig, doch meist verzögerten diese Methoden die Auslieferung der Seiten merklich bzw. beim JavaScript "ruckelte" der Text nochmal, nachdem die Seite eigentlich schon fertig aufgebaut war, weil eben danach erst die shy-Entities eingefügt wurden.
Dazu kommt noch, dass die Browser leider nicht einheitlich Bindestriche bei der Silbentrennung gesetzt haben, sondern dies von Browser zu Browser unterschiedlich war.

Seit dem Firefox 6 und dem Safari 5.3 wird nun die CSS-Eigenschaft hyphens unterstützt. Der Browser übernimmt die Aufgabe der Zeilenumbrüche nun also schon beim Rendern der Seite. Als Eigenschaften gibt es:
- auto
- manual
- none

auto schaltet die Silbentrennung ein, manual schaltet die automatische Silbentrennung ab, lässt aber noch Silbentrennung mit dem Entity shy zu und none ist denke ich eindeutig: Silbentrennung ist deaktiviert.

Wer das ganze im Firefox testen will braucht derzeit noch einen Text mit englischen Worten und die Seite sollte mit dem Wert "en" für das lang-Attribut ausgeliefert werden. Eine unter anderem deutsche Unterstützung soll mit dem Firefox 8 kommen, der bei den aktuellen Versionsschritten ja vermutlich gar nicht mehr so lange auf sich warten lassen wird.