Silbentrennung im Web: Der Stand der Dinge

Für Menschen mit einem gewissen typografischen Anspruch war das World Wide Web lange Zeit ein düsterer Ort. Die Schriftenauswahl beschränkte sich auf Times New Roman, Arial bzw. Helvetica und Verdana. Die Texte wurden im Flattersatz mit oft unsäglichen Zeilenlängen angezeigt. Und von Feinheiten wie manuellem Kerning oder Ligaturen konnte man nur träumen.

Inzwischen macht auch die Typografie im Web Fortschritte. Der augenscheinlichste Fortschritt sind Webfonts, welche es erlauben, jede beliebige Schrift (auch wenn diese nicht auf dem Rechner des Website-Besuchers installiert ist) zu nutzen. Ich möchte hier aber nicht von Webfonts, sondern vom Zeilenumbruch sprechen, genauer von der Silbentrennung, welche Voraussetzung ist für einen optimalen Zeilenumbruch.

Nehmen wir den folgenden Text als Beispiel. Ohne Silbentrennung kann man hier nur zwischen zwei Übeln wählen: Entweder setzt man den Text im Flattersatz (und bekommt einen höchst unruhigen rechten Rand), oder man wählt Blocksatz (und nimmt sehr ungleiche Wortabstände in Kauf). Das kleinere Übel ist in aller Regel der Flattersatz, und so trifft man auf Websites nur selten Blocksatz an.

Textbeispiel mit Flattersatz: Ohne Silbentrennung wirkt der rechte Rand oft sehr unruhig.

Textbeispiel mit Blocksatz: Ohne Silbentrennung können sehr ungleiche Wortabstände entstehen.

Das Problem verschärft sich auf kleinen Bildschirmen: Je schmaler die Spalten, desto eher passt ein längeres Wort nicht mehr auf die Zeile und hinterlässt dort einen unschönen Weissraum. Im Extremfall kann es zudem passieren, dass ein langes Wort gar nicht mehr in die Spalte passt und dann das Layout zerreisst.

Manuelle Silbentrennung

Wie wir von gedruckten Texten wissen löst die Silbentrennung die oben beschriebenen Probleme. Die Schwierigkeit bei der Silbentrennung im Web besteht allerdings darin, dass der Zeilenumbruch keineswegs bei jedem Leser an der gleichen Stelle erfolgt: Abhängig von Bildschirm- und Fenstergrösse, Browser und Betriebssystem, Schriftgrösseneinstellung im Browser und weiteren Faktoren wird ein Website-Text immer wieder anders umbrochen. Das manuelle Setzen von Trennzeichen durch den Webpublisher ist somit keine Lösung und unbedingt zu vermeiden.

Eine schon lange existierende Möglichkeit ist das Setzen von bedingten Trennzeichen (auch weiche Trennzeichen genannt). Damit teilt man dem Browser mit, an welcher Stelle ein Wort bei Bedarf getrennt werden kann. Nutzt der Browser diese Trennstelle, so erscheint dort ein Trennzeichen; nutzt er sie hingegen nicht, so ist für den Leser kein Unterschied zu sehen. Im HTML-Code der Webpage sieht dies dann folgendermassen aus:

Dampf­­schiff­­fahrts­­ka­­pi­­tän

Es liegt auf der Hand, dass das Einfügen von solchen bedingten Trennzeichen (die Abkürzung shy steht übrigens für Soft Hyphen) einen grossen Aufwand mit sich bringt. Sie sind zudem ein potentieller Stolperstein für Software, welche den Quellcode einer Webpage nutzt (z.B. Volltextsuchen, Screenreader): Falls diese Software die bedingten Trennzeichen nicht korrekt herausfiltert, werden getrennte Wörter nicht als solche erkannt.

Automatische Silbentrennung

Die naheliegendste Lösung besteht deshalb darin, dass der Browser eine automatische Silbentrennung durchführt, wie man dies von Textverarbeitungsprogrammen schon lange kennt. Damit dies funktioniert, müssen allerdings mehrere Bedingungen erfüllt sein:

1. Der Browser muss eine automatische Silbentrennung bieten.
2. Im Quellcode einer Webpage muss angegeben werden, in welcher Sprache ein Text geschrieben ist (HTML-Attribut: lang). Einschübe von fremdsprachigen Texten müssen ebenfalls gekennzeichnet werden.
3. Im Browser muss ein Wörterbuch der jeweiligen Sprache installiert sein, in welchem der Browser die Trennung einzelner Wörter nachschlagen kann.
4. Im Stylesheet muss definiert werden, dass ein Text vom Browser getrennt werden soll (CSS-Eigenschaft: hyphens)

Sind diese vier Voraussetzungen erfüllt, dann werden Website-Texte dynamisch getrennt und ergeben sowohl im Flattersatz als auch im Blocksatz ein visuell attraktives und gut lesbares Schriftbild:

Textbeispiel mit Blocksatz und Silbentrennung

Textbeispiel mit Flattersatz und Silbentrennung

Die Silbentrennung kann zudem über zwei weitere CSS-Eigenschaften noch detaillierter gesteuert werden:

• hyphenate-limit-chars legt die minimale Wortlänge in Zeichen fest, aber der ein Wort überhaupt getrennt werden darf
• hyphenate-limit-lines definiert die maximale Anzeilen von Zeilen mit einem Trennzeichen in Folge

Fazit

Die automatische Silbentrennung im Web wäre also grundsätzlich möglich. Leider erfüllen aber noch nicht alle Browser die notwendigen Voraussetzungen. Firefox, Safari, Edge und sogar der Internet Explorer unterstützen die Silbentrennung, während Chrome die CSS-Eigenschaft hyphens leider immer noch ignoriert (Übersicht zur Browser-Kompatibilität). Zudem müssen die Website-Besucher nicht nur eine aktuelle Browser-Version, sondern auch das passende Wörterbuch installiert haben. Wer die Silbentrennung auf seiner Website nutzt, muss also davon ausgehen, dass ein Teil seiner Leser weiterhin ungetrennte Texte sehen.

Foto: Patrick Tomasso