
Grafik von Mst/Wikimedia
Jahrelang konnte kein ernstzunehmendes Design im Web den Blocksatz benutzen. Kein Browser unterstützte die Silbentrennung und daher sah der Blocksatz einfach nur grässlich aus. Worte wurden ewig auseinander gezogen, es sah nicht schön aus. Als einzige Lösung praxistaugliche Lösung gab es ein Javascript-Tool namens Hyphenator, welches die Silbentrennung nachrüstete. Doch nun endlich seit Firefox 8 schon gibt es endlich auch für die deutsche Sprache Silbentrennung im Browser.
Bei der Einführung dieser Eigenschaft für die englische Sprache im Firefox 6, war das Ganze für den einen oder anderen noch eine Nachricht wert. Und obwohl nun die Silbentrennung endlich auch in deutsch funktioniert, wurde diese Eigenschaft mehr oder weniger unbeachtet von Mozilla nachgerüstet.
Die Details für den Firefox-Browser finden sich natürlich auf den Mozilla-Seiten. Die Spracheinstellung übernimmt Firefox aus dem lang
-Attribut. Ist weder für das Dokument noch für den Absatz eine Sprache definiert, so trennt Firefox gar nicht.
-moz-hyphens: auto; hyphens: auto;
Der Präfix -moz
ist noch notwendig, da diese Eigenschaft noch experimentell ist und die Entwicklung in den Browsern noch am Anfang steht. Der Internet Explorer unterstützt die Silbentrennung mit dem Präfix -ms
ab der kommen Version 10, Chrome und Opera unterstützen die Eigenschaft noch gar nicht und Safari (ab 5.1) unterstützt die Silbentrennung, benutzt aber eine völlig andere Syntax als Firefox. Im Gegensatz zum Firefox und dem IE 10 basiert die Trennung im Safari auch nicht auf den im Browser integrierten Trennungsdatenbanken, sondern auf den Datenbanken, die das Betriebssystem integriert hat (ähnlich wie bei der Rechtschreibprüfung unter Mac OS X). Unter Snow Leopard wird daher nur in Englisch getrennt. Erst ab Lion werden auch andere Sprachen (unter anderem Deutsch) unterstützt.
Die Informationen finden sich unter Lion in /System/Library/LinguisticData/
und bei Snow Leopard in /System/Library/Frameworks/AppKit.framework/Resources/English-Hyphenation.txt
. Es wäre spannend auszuprobieren, ob sich die Informationen übertragen lassen. Hat das schon mal jemand getestet?
Die Syntax unter Safari sieht dann im Beispiel so aus:
p { -webkit-hyphens: auto; -webkit-hyphenate-character: '~'; } p[lang='en'] { -webkit-locale: 'en'; } p[lang='es'] { -webkit-locale: 'es'; }
Mit webkit-hyphens
definieren wir die Silbentrennung (manual, auto, none). -webkit-hyphenate-character
wird leider nur von Webkit unterstützt. Damit wird das Zeichen definiert, welches für den Umbruch genutzt wird. Standard ist der normale Bindestrich „-„. In unserem Beispiel wird daraus die Tilde („~“). Die Sprache für die Trennung ist standardmäßig die Systemsprache, das lang
-Attribut wird leider ignoriert. Möchte man die Sprache für Safari umstellen, so muss man dies per -webkit-locale
tun.
Eine Sonderstellung hat der mobile Safari ab iOS 4.2. Dort lässt sich die Silbentrennung zwar auch mit -webkit-hyphens
aktivieren, aber es wird jede Spracheinstellung in der CSS- oder HTML-Datei ignoriert und immer die Spracheinstellung des Gerätes verwendet. Daher ist von einer Nutzung eher abzuraten.
23. Februar 2012 um 1:16
Wie kann ich das denn nun auf meiner Jimdo-Seite nutzbar machen? Habe dort sehr viele manuell bearbeitete Blocksatztexte, die ich gern mit einer automatischen Silbentrennung ausstatten würde, weil jetzt die Trennstriche auf jedem Bowser und Bilschirm anders kommen.
Wolf
24. Februar 2012 um 8:45
Du kannst doch auch auf Jimdo eigene CSS-Dateien benutzen. Dort einfach den oben genannten Code für die entsprechenden Elemente hinterlegen. Viel Erfolg!
27. Februar 2012 um 14:26
Vielen Dank, lieber Torsten! Ich werde das versuchen … Wolf
27. Februar 2012 um 17:40
Leider bin ich überhaupt nicht HTML-kundig. Handelt es sich um den folgenden Code?
-moz-hyphens: auto;
hyphens: auto;
Und wo genau muß ich den einbetten?
27. Februar 2012 um 18:00
Genau genommen ist es kein HTML-Code, sondern CSS-Code. Insofern muss er in die CSS-Datei. Wie im Artikel steht, ist der zitierte Code nur für Firefox. Webkit-Browser nutzen eine eigene Syntax. Die weiterführenden Links sind sehr zu empfehlen!
15. Mai 2012 um 13:25
Hallo, wie hast Du das auf Deiner Seite realisiert mit dem Code oder mit dem WordPress Plugin?
15. Mai 2012 um 16:08
Was für ein WordPress-Plugin? Das Ganze ist nur CSS …
5. April 2013 um 17:09
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