Endlich deutsche Silbentrennung im Browser

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.

Quellen:

• http://code.google.com/p/hyphenator/wiki/en_CSS3Hyphenation
• https://developer.mozilla.org/en/CSS/hyphens