Netztaucher

Erkenntnisse eines Netzbewohners

Endlich deutsche Silbentrennung im Browser

8 Kommentare


Generated by IMG4Me

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:

Autor: Torsten

Webworker, Moderator im deutschen WordPress.com Supportforum und lebendiges Videoformate-Lexikon.

8 thoughts on “Endlich deutsche Silbentrennung im Browser

  1. 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

  2. Vielen Dank, lieber Torsten! Ich werde das versuchen … Wolf

  3. 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?

    • 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!

  4. Hallo, wie hast Du das auf Deiner Seite realisiert mit dem Code oder mit dem WordPress Plugin?

  5. 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

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s