Gedanken zur Silbentrennung 
veröffentlicht in 2012
zuletzt bearbeitet in
Sollte eine Silbentrennung im Web eingesetzt werden? Lange Zeit stellte sich diese Frage nicht, weil nicht alle Browser den bedingten Trennstrich (­) unterstützten. Aber gehört eine solche Worttrennung überhaupt ins HTML? Die Frage schließt sich insbesondere im Hinblick auf barrierefreies Webdesign an.
Der geschlossene Zeilenfall
Silbentrennung wird oft mit einem geschlossenen Zeilenfall (Blocksatz) eingesetzt. Generell gilt für das Lesen am Bildschirm, dass ein offener Zeilenfall – auch Flattersatz genannt – zusammen mit anderen typografischen Eigenschaften wie angemessener Zeilenabstand oder optimaler Zeilenlänge zu einer besseren Leserlichkeit führen als ein geschlossener Zeilenfall:
- Vorteil des offenen Zeilenfalls sind die gleichbleibenden Abstände zwischen Wörtern. Der Lesefluss vor allem in längeren Texten wird dadurch verbessert.
- Vorteil des geschlossenen Zeilenfalls liegt vor allem bei kurzen Zeilenlängen: Ein gleichmäßiges Lesen wird ermöglicht. Gleichzeitig besteht ein erhöhter Bedarf an Silbentrennung.
Im Hinblick auf Barrierefreiheit erschwert Blocksatz die Leserlichkeit von Texten für verschiedene Nutzergruppen. Einzelne Aspekte werden in den erläuternden Dokumenten zu Erfolgskriterium 1.
Mit der CSS-Eigenschaft text-align kann die Darstellung eines Textblocks als ein offener Zeilenfall (links-, rechts- oder zentriert ausgerichteter Text) und ein geschlossener Zeilenfall (links- und rechtsausgerichteter Text) bestimmt werden. Für die deutsche Sprache ist bei den offenen Zeilenfällen der links ausgerichteter Text vorzuziehen, damit der Zeilenanfang vom Auge gut gefunden werden kann. Zentriert oder rechts ausgerichteter Text wird vor allem dann unleserlich, wenn der Text länger wird.
Sollte ein geschlossener Zeilenfall als Stilmittel für eine Webseite eingesetzt werden, dann soll nach den WCAG 2.2 ein Mechanismus eingesetzt werden, der einen offenen Zeilenfall ermöglicht. Der Mechanismus kann eine Umschaltfläche auf der Webseite, eine Funktion des Browsers oder auch der Verzicht auf Blocksatz sein. Ob Browser die Funktionalität eines Tages bieten, ist nicht abzusehen, aber um der Anforderung zu genügen, müssten alle gängigen Browser eine solche Funktion bieten. Solche Mechanismen gibt es beispielsweise als Plugin für Firefox. Weil solche Mechanismen standardmäßig nicht im Browser verfügbar sind, sollten Sie den Mechanismus auf der Webseite bereitstellen.
Bei dieser Anforderung geht es um die Leserlichkeit, die bei Blocksatz durch die größeren Wortabstände beeinträchtigt wird. Deshalb ist ebenso zur Erfüllung der Anforderung aus der WCAG 2.2 denkbar, dass die Silbentrennung Abhilfe schaffen kann. Nur: häufige Worttrennungen können sowohl den Lesefluss als auch die Verständlichkeit beeinträchtigen.
Bedingte Trennstriche auf Webseiten
Wenn Blocksatz als Stilmittel eingesetzt wird, dann ist der Einsatz einer Silbentrennung auch im Web sinnvoll. Die Silbentrennung kommt aber auch in anderen Situationen in Frage:
- Gestaltung der Druckversion einer Webseite im Blocksatz.
- In sehr schmalen Spalten ist eine Silbentrennung unabhängig vom Zeilenfall sinnvoll.
- Bei Schriftvergrößerung auf mobilen Geräten und kleinen Displays wird eine Silbentrennung ebenfalls in Frage kommen.

Ein flüssiges Layout macht eine Silbentrennung sinnvoll
Silbentrennung in HTML
Bereits HTML 4.01 hat bedingte Trennstriche vorgesehen, die Entity ­. Alle gängigen Browser unterstützen bedingte Trennstriche seit vielen Jahren.
Ein wesentlicher Nachteil dieser bedingten Trennstriche ist, dass sie im HTML-Code stehen müssen. Ein manuelles Einfügen der Sonderzeichen im Text ist in Einzelfällen denkbar, aber eine Automatisierung mit PHP oder einer JavaScript-Bibliothek ist – auf den ersten Blick – sinnvoller.
Die Silbentrennung mit ­ ist in konkreten Situationen am Bildschirm oder beim Drucken interessant, aber nicht zum Beispiel, wenn Webseiten mit einer Sprachausgabe gelesen werden. Einige Screenreader ersetzen den bedingten Trennstrich durch ein Leerzeichen, d.h. in Sprachausgaben werden alle Silben einzeln ausgesprochen. Es gibt auch Situationen, in denen Screenreader den bedingten Trennstrich mit einem Wort "Silbentrennzeichen" ersetzen.

­ eingesetzt wird, dann sollte das nur in "Notfällen" seinDer bedingte Trennstrich ist ein Aspekt der visuellen Präsentation und hat deswegen nichts im Text verloren, sondern die Silbentrennung gehört ins CSS. Browser unterstützen die automatische Silbentrennung mit der Eigenschaft hyphens in vielen Sprachen. Eine Übersicht der unterstützten Sprachen finden Sie auf dem Mozilla Developer Network.
Browser übernehmen die Verantwortung
Browser besitzen eingebaute Wörterbücher mit Daten zur Silbenaufteilung. Somit können sie Worttrennungen genauso wie eine Textverarbeitung vornehmen, vorausgesetzt der Browser kann die Sprache der Inhalte mit den sprachspezifischen Wörterbüchern korrelieren. Notwendig für die automatische Silbentrennung sind:
- Die Silbentrennung ist davon abhängig, welche Sprache einem übergeordneten Element auf der Webseite mit dem
lang-Attribut zugewiesen wird. Für XHTML-Seiten ist stattdessen einxml:lang-Attribut erforderlich. Für die automatische Silbentrennung muss der Wert von
hyphensauf "auto" gesetzt werden:.schmaleSpalte {
hyphens: auto;
}
CSS bietet weitere Eigenschaften zur Optimierung der automatischen Silbentrennung.
Da Screenreader CSS-Eigenschaften meist ignorieren, was auch für die Eigenschaft hyphens gilt, werden sich Worttrennungen per CSS nicht störend auf den Lesefluss im Screenreader auswirken.
Schlussfolgerungen
Wenn eine Silbentrennung eingesetzt wird, dann sollte die automatische Silbentrennung mit CSS bevorzugt werden. Das Zerteilen von Texten mit der HTML-Entity ­ führt in Screenreadern zu unleserlichen Texten.
Für beide Ansätze – ob mit ­ oder mit der automatischen Silbentrennung des Browsers – gilt:
- Da eine Silbentrennung vom Nutzer möglicherweise nicht gewünscht wird – etwa weil subjektiv die Leserlichkeit erschwert wird – sollte der Nutzer die Silbentrennung über einen Mechanismus auf der Webseite abschalten können. Der Mechanismus soll darüber hinaus einen Mengentext mit offenem Zeilenfall anzeigen, wenn der Text sonst im Blocksatz dargestellt wird.
- Die Silbentrennung eignet sich im Web vor allem für schmale Spalten oder auf Bildschirmen mit schmalen Displays.
Die folgenden Begriffe dieser Seite werden auch im Glossar definiert:
Blättern zur nächsten oder vorherigen Seite
- können optische Gestaltung und Sehbehinderung in Einklang gebracht werden? Anforderungen gibt es wie Sand am Meer. Screendesign: Sehbehinderungen wie Sand am Meer
- In einigen Browsern kann die minimale Schriftgröße für Webseiten voreingestellt werden. Mindestschriftgröße und Browser