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:

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.4.8 der Web Content Accessibility Guidelines (WCAG) 2.2 diskutiert und referenziert. Diese betreffen Menschen mit einer kognitiven Behinderung, aber auch Menschen mit einer Sehbehinderung. Konkret verlangt die Richtlinie, entweder ein Verzicht auf einen geschlossenen Zeilenfall oder die Darstellung von links-bzw. rechtsausgerichtetem Mengentext.

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:

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.

Darstellung der Silbentrennung in einem Editor: Worte sind durch zahlreiche Trennstriche zerrupft
Wenn ­ eingesetzt wird, dann sollte das nur in "Notfällen" sein

Der 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:

  1. 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 ein xml:lang-Attribut erforderlich.
  2. Für die automatische Silbentrennung muss der Wert von hyphens auf "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: