Nachdem ich gestern schon die mehrspaltige Ansicht von Absätzen mittels CSS vorgestellt habe, möchte ich euch heute einen weiteren nützlichen CSS-Befehl näher bringen. Es handelt sich um die Eigenschaft hyphens.
Bevor wir aber zum CSS-Teil kommen, muss der Browser irgendwie mitgeteilt bekommen, um welche Sprache es sich auf der zu anzeigenden Seite handelt. Dies funktioniert über das öffnende „html“-Element ganz am Anfang des Quellcodes. Das sollte so oder so ähnlich aussehen. Mit dem Attribut „lang“ kann dem Browser die Sprache der Seite definiert werden. Anzeige
<html lang="de-DE">
Alles klar bis jetzt? Dann öffnen wir doch mal unsere CSS-Datei. Das Ganze ist eigentlich recht einfach. Da die Browser die „hyphens“-Eigenschaft allerdings erst experimentell implementiert haben, müssen Browser-Präfixe verwendet werden.
.textklasse {
-moz-hyphens: auto; // für Firefox ab Version 6
-webkit-hyphens: auto; // für aktuelle Chrome- bzw. Safari-Versionen
-ms-hyphens: auto; // erst ab Internet Explorer 11
hyphens: auto; // W3C-Standard
}Was ihr vielleicht wissen solltet: Zu 100% klappt die Silbentrennung noch nicht fehlerfrei. Ich habe schon das ein oder andere seltsam getrennte Wort entdeckt. In den meisten Fällen klappt es aber. Unterstützt ein Browser die Silbentrennung nicht, dann passiert überhaupt nichts, die CSS-Eigenschaft wird einfach ignoriert.
Komischerweise ignoriert bei mir der Chromium-Browser (Version 16) den Befehl. Eigentlich sollte die Unterstützung für Silbentrennung seit Version 12 implementiert sein. Möglicherweise fehlt derzeit ja noch die Unterstützung für die deutsche Sprache.
Anzeige
Interessantes Feature, kannte ich noch gar nicht. In der Tat sah ich Worttrennung im Zuge der Webifizierung der Informationen dieser Welt schon vom Aussterben bedroht. Zumal es in meinen Augen auf dem Bildschirm auch nicht sonderlich wichtig ist.
Zumal die technische Umsetzung immer ein Problem ist. Auch Latex schafft es nicht einmal halbwegs, Wörter vernünftig zu zerlegen. Sowas lässt sich nicht in zehn Regeln passen. Ob die Browserhersteller soviel Energie in so eine doch eher unkritische CSS-Eigenschaft stecken? Ich weiß es nicht. Aber halbgare Lösungen halte ich für ganz schlecht. Ein Ausgabemedium darf den Inhalt des Autors nicht ändern und schon gar nicht Fehler einbauen (vgl. http://sgaul.de/2011/11/13/wordpress-richtig-schreiben-auch-in-wordpress/). Ich plädiere daher für gar nicht statt fehlerhaft.
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.
Hier gibt es eine Übersicht, welche Features von welchem Web-browser unterstützt werden:
http://www.normansblog.de/demos/browser-support-checklist-css3/
Ah Danke für den Artikel und besonders auch an @Tobias. Ich bin seit ewigen am rätseln warum das bei mir auf dem Android und Chrome mit der Worttrennung nicht funktioniert.