Silbentrennung in HTML und CSS – sind hyphens und shy barrierefrei?

Am Ende einer Zei-
le, da wird es ganz gemei-
ne: Was liest wohl der Screenread-
er? Passiert denn das schon wie-
der?!

Ok, ich hör‘ auf. Im Druck ist das ein vertrautes Bild. Wenn Wörter nicht mehr in die Zeile passen, hilft oft ein kleiner Strich am Rand. Silbentrennung sorgt dafür, dass Texte gleichmäßiger wirken und keine großen Lücken entstehen.

Im Web ist die Sache allerdings etwas komplizierter. Layouts verändern sich ständig, Textbreiten sind flexibel und Nutzer können Schriftgrößen anpassen. Silbentrennung kann hier helfen. Sie kann aber auch neue Probleme schaffen. Denn neben der typografischen Wirkung spielt noch etwas anderes eine Rolle: Barrierefreiheit. Nicht nur die sichtbare Silbentrennung hat ihre Vor- und Nachteile. Manche Formen der Trennung können sogar für Screenreader zum Problem werden.

Schauen wir uns also einmal an, wie Silbentrennung im Web funktioniert, welche Vorteile sie bringt – und wo ihre Grenzen liegen.

Warum Silbentrennung im Web überhaupt ein Thema ist

Wer längere Texte gestaltet, kennt das Problem schnell. Wörter passen nicht mehr vollständig in die Zeile. Der Browser schiebt sie in die nächste Zeile – und zurück bleibt eine deutlich sichtbare Lücke. Besonders im Deutschen fällt das schnell auf. Zusammengesetzte Wörter wie „Barrierefreiheitsstärkungsgesetz“ oder „Bildschirmlesesoftware“ bringen selbst großzügige Textspalten gelegentlich an ihre Grenzen.

In der klassischen Typografie ist das ein bekanntes Problem. Drucklayouts arbeiten deshalb seit jeher mit Silbentrennung. Wörter dürfen am Zeilenende getrennt werden, sodass der übrige Platz besser genutzt wird. Der Text wirkt gleichmäßiger gesetzt und größere Wortlücken lassen sich vermeiden.

Im Web funktioniert Textlayout allerdings etwas anders. Zeilenbreiten sind nicht fest definiert. Sie verändern sich je nach Bildschirmgröße, Fensterbreite oder Zoomstufe. Ein Absatz, der auf einem großen Monitor ruhig und ausgewogen wirkt, kann auf einem Smartphone plötzlich deutlich unruhiger erscheinen. Wörter rutschen häufiger in neue Zeilen, Lücken entstehen schneller und der Textfluss verändert sich.

Genau hier taucht die Frage nach Silbentrennung auch im Web auf. Sie kann helfen, den verfügbaren Platz besser zu nutzen und ein gleichmäßigeres Schriftbild zu erzeugen. Gleichzeitig bringt sie aber auch neue Fragen mit sich – etwa zur technischen Umsetzung oder zu möglichen Auswirkungen auf Barrierefreiheit.

Die Grenzen von Blocksatz im Web

Bevor wir uns die Silbentrennung genauer anschauen, lohnt sich ein kurzer Blick auf ein Layoutprinzip, bei dem sie traditionell eine besonders große Rolle spielt: den Blocksatz. Dabei werden alle Zeilen eines Absatzes so ausgerichtet, dass sie sowohl links als auch rechts bündig abschließen. Der Text bildet also eine saubere Kante auf beiden Seiten.

Wir kennen das aus Zeitschriften und Büchern. Die Layoutprogramme der Verlage verfügen über ausgefeilte Algorithmen, die Wortabstände, Silbentrennungen und sogar Zeichenabstände gleichzeitig optimieren. So entsteht ein gleichmäßiges Schriftbild mit möglichst wenigen auffälligen Lücken. Würde man hier keine Silbentrennung nutzen, würden große Lücken zwischen einzelnen Wörtern entstehen.

Im Web lässt sich Blocksatz einfach im CSS aktivieren:

p {
  text-align: justify;
}

Der Browser versucht dann ebenfalls, jede Zeile auf die volle Breite zu strecken. Anders als professionelle Satzprogramme hat er dafür jedoch deutlich weniger Werkzeuge zur Verfügung. In der Regel werden nur die Wortabstände vergrößert oder verkleinert.

Das führt schnell zu dem oben zu sehenden Effekt: Zwischen manchen Wörtern entstehen große Lücken, während andere sehr dicht zusammenstehen. In schmalen Textspalten oder auf kleinen Displays kann das besonders deutlich werden. Der Text wirkt unruhig, und beim Lesen entstehen regelrechte „Löcher“ im Absatz. Für viele Menschen ist das mehr als nur ein typografisches Detail. Unregelmäßige Wortabstände stören den Lesefluss erheblich, besonders bei längeren Texten. Nutzer mit Leseschwierigkeiten oder kognitiven Einschränkungen haben mit solchen Layouts häufig zusätzliche Probleme.

Deshalb empfehlen viele Accessibility-Richtlinien und Typografieempfehlungen im Web linksbündigen Text. Dabei bleiben die Wortabstände gleichmäßig, auch wenn die rechte Kante des Absatzes unregelmäßig wirkt. Gerade bei sehr langen Wörten wie unserem geliebten „Barrierefreiheitsstärkungsgesetz“ kann es aber so wirken, als wäre der Satz zuende und würde nicht auf der nächsten zeile weiter gehen.

Genau hier kommt wieder die Silbentrennung ins Spiel. Sie ist eines der Werkzeuge, mit denen sich auch der Flattersatz ein wenig ausgleichen lässt – zumindest theoretisch.

Technische Möglichkeiten für Silbentrennung im Web

Im Web gibt es grundsätzlich zwei Wege, um Silbentrennung zu steuern. Entweder entscheidet der Browser selbst, an welchen Stellen Wörter getrennt werden dürfen, oder mögliche Trennstellen werden direkt im Text markiert.

Beide Ansätze verfolgen dasselbe Ziel: Wörter dürfen am Zeilenende getrennt werden, damit der vorhandene Platz besser genutzt wird. Technisch unterscheiden sie sich jedoch deutlich. Schauen wir uns beide Möglichkeiten und deren Vor- und Nachteile einmal genauer an.

Automatische Silbentrennung mit CSS (hyphens)

Die einfachste Möglichkeit für Silbentrennung im Web ist die automatische Trennung durch den Browser. Dafür stellt CSS die Eigenschaft hyphens bereit. Wird sie aktiviert, darf der Browser Wörter am Zeilenende selbstständig trennen.

p {
  hyphens: auto;
}

Sie kann also global für die ganze Website oder auch für einzelne Elemente wie Absätze, Buttons oder Überschriften gezielt aktiviert oder wieder deaktiviert werden. Der Browser verwendet dabei sprachspezifische Regeln und Wörterbücher, um mögliche Trennstellen zu bestimmen. Damit das zuverlässig funktioniert, ist eine korrekte Sprachangabe im HTML wichtig.

<html lang="de">

Ohne diese Information weiß der Browser nicht, nach welchen Regeln ein Wort getrennt werden soll. Besonders bei deutschsprachigen Texten mit vielen zusammengesetzten Wörtern kann das schnell zu falschen oder fehlenden Trennungen führen. Aber: die Sprache sollte in barrierefreien Websites ohnehin gesetzt sein, denn die nutzen auch Screenreader für die richtige Aussprache.

Der große Vorteil dieser Methode liegt auf der Hand: Der eigentliche Text bleibt unverändert. Die Trennung passiert ausschließlich im Layout und kann sich flexibel an unterschiedliche Bildschirmgrößen, Schriftgrößen oder Textbreiten anpassen. Auf einem großen Monitor entsteht vielleicht gar keine Trennung, auf einem Smartphone dagegen mehrere.

Genau deshalb gilt die automatische Silbentrennung heute als der pragmatischste Ansatz für längere Fließtexte im Web. Entwickler aktivieren sie einmal im CSS, und der Browser übernimmt den Rest.

Manuelle Trennstellen mit ­

Neben der automatischen Trennung gibt es noch eine zweite Möglichkeit: mögliche Trennstellen können direkt im Text markiert werden. Dafür wird im HTML das sogenannte Soft Hyphen verwendet.

Barriere­freiheits­stärkungs­gesetz

Das Zeichen ­ markiert eine Stelle, an der ein Wort getrennt werden darf. Wenn ein Zeilenumbruch genau dort passiert, zeigt der Browser einen Bindestrich an. Bleibt das Wort vollständig in einer Zeile, bleibt auch das Zeichen unsichtbar.

Diese Methode bietet eine sehr präzise Kontrolle über mögliche Trennstellen. Gerade bei ungewöhnlichen Begriffen, Eigennamen oder technischen Wörtern kann das hilfreich sein, wenn automatische Wörterbücher keine passenden Trennungen kennen oder bestimmte Trennstellen hilfreich beim Lesen sind. Der „Brokkoli-stengel“ sollte nicht zum „Brokkolist-engel“ werden.

Allerdings hat dieser Ansatz auch einige Nachteile. Zum einen wird der eigentliche Text verändert. Die Trennstellen sind Teil des Inhalts und müssen gepflegt werden. Ändert sich das Layout oder wird der Text an anderer Stelle wiederverwendet, können die gesetzten Trennpunkte schnell unpassend werden. Zum anderen ist sie mit hohem redaktionellem Aufwand verbunden.

Was Screenreader bei Silbentrennung tatsächlich wahrnehmen

Aus typografischer Sicht scheint die Sache zunächst einfach zu sein. Ein Wort wird am Zeilenende getrennt, ein Bindestrich erscheint und der Text wirkt gleichmäßiger gesetzt. Für Screenreader stellt sich jedoch eine ganz andere Frage: Was davon gehört eigentlich zum Inhalt – und was ist nur Darstellung?

Bei der automatischen Silbentrennung über CSS ist die Antwort relativ unkompliziert. Die Trennung entsteht ausschließlich im Layout. Im zugrunde liegenden HTML steht weiterhin das vollständige Wort ohne zusätzliche Zeichen. Screenreader greifen in dem Fall jedoch nicht auf das visuelle Layout zu, sondern lesen den eigentlichen Textinhalt aus dem Dokument. Deshalb wird ein automatisch getrenntes Wort in der Regel ganz normal vorgelesen, als wäre keine Trennung vorhanden.

Anders sieht es bei manuell gesetzten Trennstellen aus. Das Soft Hyphen (­) ist kein reines Layoutmerkmal, sondern ein tatsächliches Zeichen im Text. Es markiert eine mögliche Trennstelle innerhalb eines Wortes. Wenn der Browser dort einen Zeilenumbruch setzt, erscheint ein Bindestrich. Bleibt das Wort in einer Zeile, bleibt das Zeichen unsichtbar.

Für Screenreader kann dieses Zeichen jedoch durchaus relevant sein. Da es Teil des Textes ist, kann es je nach Kombination aus Browser, Screenreader und Sprachausgabe unterschiedlich interpretiert werden. In manchen Fällen wird es ignoriert, in anderen kann es zu ungewöhnlichen Pausen oder Betonungen innerhalb eines Wortes führen.

Besonders problematisch wird das, wenn viele solcher Trennstellen direkt im Text eingebaut sind. Ein Wort, das visuell nur einmal getrennt erscheint, kann für Assistenztechnologien mehrere unsichtbare Zeichen enthalten. Das macht den Text nicht nur schwerer wartbar, sondern kann auch den Lesefluss bei der Sprachausgabe beeinträchtigen.

Barriere­freiheits­stärkungs­gesetz

wird dann möglicherweise zu Barriere freiheits stärkungs gesetz.

Aus Sicht der Barrierefreiheit ist deshalb ein Grundprinzip hilfreich: Wenn Silbentrennung benötigt wird, sollte sie möglichst über CSS erfolgen. Dadurch bleibt der eigentliche Text unverändert, während die Darstellung flexibel angepasst werden kann.

Silbentrennung in Einfacher und Leichter Sprache

Bei Texten in Einfacher oder Leichter Sprache verschiebt sich der Blickwinkel etwas. Hier geht es weniger um typografische Feinheiten, sondern vor allem um Verständlichkeit.

Leichte Sprache folgt sehr klaren Regeln. Wörter sollen möglichst kurz sein, zusammengesetzte Begriffe werden häufig aufgelöst oder durch Bindestriche gegliedert. Statt „Schifffahrtsgesellschaft“ steht dann zum Beispiel eher „Firma für Schiffe“. Ziel ist es, komplexe Wörter gar nicht erst entstehen zu lassen. Silbentrennung spielt deshalb eine deutlich kleinere Rolle. Lange Wörter, die überhaupt getrennt werden müssten, werden in Leichter Sprache möglichst vermieden.

Auch in Einfacher Sprache gilt ein ähnlicher Gedanke, wenn auch weniger streng. Hier sind längere Wörter zwar erlaubt, dennoch wird häufig empfohlen, unnötig komplexe Begriffe zu vermeiden und verständliche Alternativen zu verwenden.

Aus typografischer Sicht bedeutet das: Silbentrennung ist bei solchen Texten meist nicht notwendig. Wenn doch einmal ein längerer Begriff verwendet wird, kann eine zusätzliche Trennung innerhalb des Wortes das Lesen sogar erschweren. Gerade Menschen mit Lernschwierigkeiten orientieren sich beim Lesen häufig stärker an der Form eines ganzen Wortes. Wird dieses Wort plötzlich mitten im Wort unterbrochen, kann das den Lesefluss stören. In Texten mit Leichter und Einfacher Sprache sollte auf eine Silbentrennung am Zeilenende also verzichtet werden.

Mehr über Leichte und Einfache Sprache:

• Leichte und Einfache Sprache – Was ist der Unterschied?
• Regeln für Leichte Sprache – In Leichter Sprache
• Richtlinien für Einfache Sprache – Merkmale und Beispiele
• Leichte Bilder für Leichte Sprache

Fazit – Typografie mit Augenmaß

Silbentrennung kann im Web helfen, große Lücken im Text zu vermeiden und den Lesefluss zu verbessern – besonders in schmalen Spalten oder längeren Fließtexten. Am unkompliziertesten funktioniert das über automatische Trennung mit CSS, weil der eigentliche Text dabei unverändert bleibt. Manuell gesetzte Trennstellen sollten dagegen mit Vorsicht eingesetzt werden. Da sie Teil des Inhalts sind, können sie unter Umständen auch von Screenreadern wahrgenommen werden.

Gleichzeitig zeigt das Thema, dass barrierefreie Texte von mehr Faktoren abhängen als nur von Silbentrennung. Zeilenlänge, Schriftgröße, Kontrast oder eine verständliche Sprache haben oft einen größeren Einfluss auf die Lesbarkeit. Silbentrennung ist also ein nützliches Werkzeug, aber nur eines von vielen. Entscheidend bleibt, dass Texte für möglichst viele Menschen gut lesbar bleiben.

Und falls doch einmal ein Wort am Zeilenende steht und sich nicht entscheiden kann, wohin es gehört, dann gilt vielleicht die einfachste Regel:

Lieber eine kleine Lücke im Lay-
out als ein Stolperstein beim Le-
sen.

Mehr zur Lesbarkeit von Texten gibt es übrigens hier:

• Barrierefreie Schriftarten – das sind gut lesbare Fonts
• Schriftgröße und Barrierefreiheit
• Gliederung von Texten – großer Text macht noch keine Überschrift