Silbentrennung und Bindestriche (Hyphens)

Wozu Silbentrennung?

Absatzerscheinungsbild verbessern

Die deutsche Sprache verfügt über eine Vielzahl von langen Wörtern. Ohne Silbentrennung wirkt ein schmaler Absatz daher auf der rechten Seite häufig ausgefranst.

Im folgenden Beispiel wird das Wort „Textabschnitten“ in die nächste Zeile umgebrochen, wodurch die vorherige Zeile am rechten Rand einen größeren Leerraum erhält.

Eine Darstellung im Blocksatz stellt keine ausreichende Alternative dar, weil erhöhte Wortabstände den Lesefluss erschweren:

Das Erscheinungsbild eines Absatzes kann jedoch durch Silbentrennung homogenisiert werden:

Auch bei einem Blocksatz können störende Wortabstände durch eine Silbentrennung vermieden werden:

Vergrößertes Erscheinungsbild verbessern

Wenn Nutzer*innen eine erhöhte Schriftgröße wählen, kann es bei einer fix festgelegten Breite für Elemente zu Darstellungsproblemen kommen. Der folgende Schalter könnte beispielsweise in einer App ein Formular für einen Urlaubsantrag öffnen:

Wurde jedoch in den Darstellungsoptionen die Schriftgröße verdoppelt, kommt es zu fehlerhaften Zeilenumbrüchen innerhalb der Beschriftung:

Durch eine Silbentrennung wird das Wort auch bei einer vergrößerten Darstellung leserlich umgebrochen:

Typen von Bindestrichen

Minus-Zeichen

Das Minus-Zeichen wird durch Drücken der Taste - eingefügt. Es ist immer sichtbar und bewirkt einen Zeilenumbruch, wenn das Wort nach dem Bindestrich nicht mehr in die Zeile passt.

Bindestrich

Der typografisch korrekte Bindestrich ist kürzer als das Minus-Zeichen. Da es für dieses Zeichen keine Belegung auf der Tastatur gibt, wird jedoch meist das Minus-Zeichen als Bindestrich verwendet. Auch der eigentliche Bindestrich ist immer sichtbar und bewirkt einen Zeilenumbruch, wenn das folgende Wort nicht mehr in die Zeile passt.

Bedingter Trennstrich

Ein bedingter Trennstrich kennzeichnet in einem Wort eine zulässige Umbruchstelle am Zeilenende. Er ist unsichtbar, solange das Wort nicht an der vorgesehenen Stelle getrennt und umgebrochen wird. Der erforderliche Code muss redaktionell explizit in das Wort eingefügt werden.

Befindet sich in einem Wort ein bedingter Trennstrich, wird das Wort bei einer Volltextsuche nicht gefunden.

Wer mit einer Sprachausgabe arbeitet, merkt einen leichten Unterschied, wenn ein Ausdruck einen bedingten Trennstrich enthält, unabhängig davon, ob der Trennstrich sichtbar ist oder nicht.

Geschützter Bindestrich

Ein geschützter Bindestrich hält die verbundenen Worte oder Silben am Zeilenende zusammen, sodass diese gemeinsam in die nächste Zeile umgebrochen werden. Er ist immer sichtbar und wird meistens von einer Sprachausgabe auch als "Bindestrich" vorgelesen. In neueren Versionen von Microsoft Word steht zum Einfügen der Shortcut Alt+Shift+- zur Verfügung.

Geschützte Bindestriche werden typischerweise eingesetzt, wenn ein Teil des verbundenen Wortes sehr kurz ist. ( E‑Mail, Binnen‑I, … )

Browser Funktionalitäten

Browser verfügen über Datenbanken und Algorythmen für die Silbentrennung. Die Silbentrennung erfolgt entsprechend der Kennzeichnung der natürlichen Sprache der Wörter.

Das grundsätzliche Verhalten von Browsern zur Silbentrennung kann durch CSS-Anweisungen festgelegt werden. Darüber hinaus kann das Browserverhalten durch explizite HTML-Codes manipuliert werden.

Der Text muss über eine korrekte Kennzeichnung der natürlichen Sprache verfügen, damit Programme auf die angemessenen Algorythmen für eine Silbentrennung zugreigen.

CSS Anweisungen

Silbentrennung zulassen

Ob und wie Silben am Zeilenende getrennt werden, kann durch die CSS-Anweisung hyphens festgelegt werden. Folgende Werte stehen dabei zur Verfügung:

manual (Standardwert)

Eine Silbentrennung erfolgt am Zeilenende an redaktionell explizit festgelegten Umbruchstellen. Dies ist gegeben, wenn ein Wort mit einem bedingten Bindestrich (­) versehen wurde. Auch ein gewöhnlicher Bindestrich ‐ (‐) stellt als harter Trennstrich eine zulässige Umbruchstelle dar, nicht jedoch ein geschützter Bindestrich (&wf;).

none

Wörter werden am Zeilenende nicht getrennt. Ein Zeilenumbruch erfolgt lediglich bei einem Leerzeichen.

auto

Wörter werden am Zeilenende getrennt, wenn verfügbare Silben vom Browser erkannt werden. Explizite technische Vorkehrungen für die Silbentrennung durch Autor*innen überschreiben jedoch Maßnahmen zur Silbentrennung durch Browser.

Der jeweilige Wert wird an Kindelemente vererbt. Die Silbentrennung kann daher zunächst für alle Elemente unterdrückt, für einzelne Elemente jedoch zugelassen werden:

body {
  hyphens: none;
}
button {
  hyphens: manual;
}

Trennzeichen ändern

Mit der CSS-Anweisung hyphenate-character kann die Darstellung des Trennzeichens festgelegt werden. Anstelle des im Browser vorgesehenen Trennzeichens könnte damit beispielsweise ein =-Zeichen bei der Silbentrennung erscheinen:

  hyphenate-character: '=';

Im folgenden Beispiel wird auf diese Weise jeweils das =-Zeichen als Trennzeichen verwendet:

Im Sinne der Lesbarkeit durch Lesegewohnheiten sollte das Trennzeichen jedoch nur in begründeten Ausnahmefällen modifiziert werden.

Das modifizierte Trennzeichen wird von einer Sprachausgabe gewöhnlich nicht vorgelesen. Verfügt ein Text zur Demonstration über einen modifizierten Trennstrich, muss daher auf die Modifikation redaktionell hingewiesen werden.

MDN | hyphenate-character

Sprachkennzeichnung als Voraussetzung

Damit ein Browser auf das angemessene Wörterbuch für die Silbentrennung zugreift, muss das Wort technisch mit der korrekten natürlichen Sprache gekennzeichnet sein. Dies wird in HTML durch das lang-Attribut für die gesamte Webseite oder individuell für das Wort oder den Abschnitt mit dem Wort gewährleistet.

In den folgenden beiden Grafiken wird jeweils ein Screenshot von einem Schalter zum herunterladen abgebildet. Die Schriftgröße wurde jedoch im Browser durch entsprechende Optionen erhöht, wodurch es in dem horizontal eingeschränkten Bereich innerhalb des Wortes zu einem Zeilenumbruch kommt. Der dadurch erforderliche Zeilenumbruch wurde mittels hyphens: auto an den Browser übergeben.

Im ersten Beispiel wurde die Schalterbeschriftung „Herunterladen“ korrekt als deutschsprachig gekennzeichnet. Die Silbentrennung entspricht den Anforderungen der deutschsprachigen Grammatik:

Bei einer fehlerhaften Sprachkennzeichnung erscheint jedoch ein unpassender Zeilenumbruch ohne Trennzeichen:

Verwandte Konzepte

Silbentrennungspunkte

Silbentrennungspunkte sind Indikatoren für Stellen innerhalb eines Wortes, an denen eine Silbentrennung grammatikalisch möglich oder durch redaktionelle Maßnahmen vorgesehen ist. Sie sind als Indikatoren immer sichtbar. Bedauerlicherweise wird das Zeichen von maßgeblichen Sprachausgaben nicht korrekt interpretiert.
(Stand August 2025: Eloquence, SAPI 5, Vocalizer )

Auch der Indikator für Silbentrennungspunkte bewirkt einen Zeilenumbruch, wenn das Wort nach dem Indikator nicht mehr in die Zeile passt. Im folgenden Screenshot sind die Stellen für die Silbentrennung im Ausdruck „Barrierefreiheit“ mit dem Indikator für Silbentrennungspunkte versehen. Die Silbe „heit“ ist nach dem Indikator für mögliche Silbentrennung in die nächste Zeile umgebrochen.

HTML-Element für Wortumbruch

Das HTML-Element <wbr> (word break) bewirkt einen Zeilenumbruch innerhalb eines Worts, wenn das Wort am Zeilenende nicht mehr gänzlich in die verfügbare Breite passt. Im Browser erscheint kein Trennstrich oder anderer visueller Indikator für das Vorhandensein des Zeilenumbruchs.

Das Vorhandensein dieses Wortumbruchs wird von einer Sprachausgabe nach meinen Recherchen ignoriert.

Der Wortumbruch kann nicht durch die CSS-Anweisung hyphens gesteuert werden.

HTML-Element für Zeilenumbruch

Das HTML-Element <br> (break) bewirkt einen Zeilenumbruch in einem Absatz, auch wenn das Zeilenende noch nicht erreicht wurde. Im Browser erscheint kein Trennstrich oder anderer visueller Indikator für das Vorhandensein des Zeilenumbruchs.

In Microsoft Word wird ein Zeilenumbruch innerhalb eines Absatzes durch Drücken von SHIFT+ENTER erzeugt. Die Darstellung am Bildschirm kann durch Konfiguration der Anzeige nicht-druckbarer Zeichen ermöglicht werden.

Geschütztes Leerzeichen

Ein geschütztes Leerzeichen verhindert, dass die beiden benachbarten Zeichen oder Silben beim Zeilenumbruch voneinander getrennt werden. Dies ist für die Lesbarkeit insbesondere bei vorhandenen Kombinationen mit kurzen Zeichenfolgen innerhalb eines Satzes zweckmäßig:

• Wert mit Einheit (80 %, 30 km, …)
• Titel vor dem Eigennamen (Dr. Gruber, GR Reburg, …)
• Ausdruck mit zusätzlicher Einstufung (Konformitätsstufe AA, COVID 19, …)

Breitenloses Leerzeichen

Ein breitenloses Leerzeichen bewirkt visuell keinen Abstand zwischen Zeichen innerhalb eines Wortes.

Ein Zeilenumbruch erfolgt,

• wenn das vorherige Wort wie bei einem gewöhnlichen Leerzeichen nicht mehr in die Zeile pass, allerdings auch innerhalb eines Wortes,
• ohne Darstellung eines Trennzeichens am Zeilenende und
• unabhängig von der CSS-Anweisung hyphens.

Du kannst das Verhalten deines Brosers und einer Sprachausgabe in der Labordatei für Silbentrennung testen.

Leider wird das breitenlose Leerzeichen von maßgeblichen Kombinationen von Screen Reader und Sprachausgabe nicht korrekt interpretiert. JAWS verwendet in der Standardkonfiguration die Sprachausgabe Eloquence. Die Eloquence kennt jedoch das breitenlose Leerzeichen nicht und gibt stattdessen „Fragezeichen“ aus. (Die SAPI Sprachausgabe ignoriert hingegen das Zeichen.)

Das breitenlose Leerzeichen sollte daher wegen potenziell rätselhafter Wiedergabe durch eine Sprachausgabe vermieden werden. (Stand August 2025) Als Alternative für einen Wortumbruch ohne Trennstrich steht das <wbr>-Element zur Verfügung.

Barrierefreiheit und Nutzungsfreundlichkeit

WCAG Kontext

Die Silbentrennung oder Trennzeichen werden in den WCAG nicht explizit behandelt. Allerdings ergeben sich aus einzelnen Erfolgskriterien Bezüge, Anforderungen und Möglichkeiten in Bezug auf den Einsatz der Silbentrennung:

Erfolgskriterium 1.3.1: Information und Beziehungen

Für die visuelle Darstellung von Inhalt und Struktur muss eine entsprechende technische Darstellung verfügbar sein. Dies ist bei der Verwendung von Trennzeichen und CSS-Anweisungen für die Silbentrennung gewährleistet.

Wenn vorhandene Bindestriche durch Konfigurationen im Screen Reader oder einer Sprachausgabe nicht angesagt werden, liegt dies nicht in der Verantwortung des Webdesigns.

Erfolgskriterium 1.4.4: Textgröße einstellen

Aus der Vergrößerung durch Browserfunktionalitäten auf 200% darf kein Verlust an Inhalt oder Funktionalität resultieren.

Die Beschriftung von Steuerelementen muss demnach auch bei einer vergrößerten Darstellung sichtbar bleiben. Dies kann bei einem horizontal eingeschränktem Bereich zu Problemen führen, die durch eine Silbentrennung behoben werden kann.

Erfolgskriterium 1.4.5: Abbildung von Text

Wo immer möglich, muss Text als solcher verfügbar sein. Eine Abbildung von Text sollte vermieden werden.

Für Text in einer Grafik lässt sich keine automatisierte Silbentrennung realisieren.

Erfolgskriterium 3.1.3 Ungewöhnliche Wörter

Konformitätsstufe AAA

Ausdrücke mit einer ungewöhnlichen Bedeutung oder streng anzuwendenden Definition sollten über einen erklärenden Mechanismus verfügen .

Ein Bindestrich kann in einem mehrdeutigen Ausdruck bereits einen hinreichenden Mechanismus zur Erklärung darstellen.

Erfolgskriterium 3.1.5 Leseniveau

Konformitätsstufe AAA

Für Menschen, die auf ein einfacheres Leseniveau angewiesen sind, sollten Texte zum leichteren Lesen bereitgestellt werden.

Zur visuellen Gruppierung von Ausdrücken in längeren Wortzusammensetzungen werden zwischen den enthaltenen Hauptwörtern Bindestriche eingefügt.

Sprachausgabe‐Verhalten

Beim Arbeiten mit einer Sprachausgabe kann die Ansage vorhandener Satzzeichen erforderlich, hilfreich oder störend sein.

Störend ist eine Ansage, wenn sie das Anhören des Textes überlagert. Ein Beispiel dafür wäre folgende Wiedergabe für die aktuelle Abschnittsüberschrift:

Mehrdeutige Zeichenfolgen

Es gibt zusammengesetzte Wörter, die je nach Aussprache unterschiedliche Bedeutungen haben. Beim Ausdruck „Brautraum“ denken manche an eine Hochzeit, manche jedoch an Bier. Um möglichen Missverständnissen vorzubeugen, kann ein Bindestrich für Klarheit sorgen.

Braut-Raum / Brau-Traum

Folgende Überlegungen dienen dabei zur Optimierung:

• Bei Hauptwörtern sollten die verbundenen Ausdrücke jeweils mit einem Großbuchstaben beginnen.
• Das Minus-Zeichen sollte dabei dem eigentlichen Bindestrich vorgezogen werden, solange das Vorhandensein eines Bindestrichs von assistierenden Technologien eher verschwiegen wird.
• Ein weicher Bindestrich reicht zur Kennzeichnung nicht aus, da dieser nicht in jedem Fall sichtbar ist und auch beim Arbeiten mit einer Sprachausgabe keinen ausreichend signifikanten Hörunterschied bewirkt.

Worttrennung für leichteres Lesen

In der deutschen Sprache gibt es besonders viele lange Wörter. Die langen Wörter bestehen häufig aus der Zusammensetzung von Ausdrücken. Für Texte, die ausdrücklich für leichtes Lesen gedacht sind, werden in langen Wörtern Bindestriche zwischen Ausdrücken empfohlen:

Für das einfache Hörverständnis beim Einsatz einer Sprachausgabe stellt die Ansage eines Bindestrichs ein Problem dar. Screen Reader bieten daher Konfigurationsmöglichkeiten für die Ansage von Satzzeichen an. Menschen, die von einfacher Sprache profitieren, kennen leider diese Konfigurationsmöglichkeiten oft nicht. Als Trennzeichen sollte daher trotz der Konfigurationsmöglichkeiten im Code nicht das Minus Zeichen, sondern ein Bindestrich verwendet werden. Der Bindestrich wird tendenziell von einer Sprachausgabe häufiger ignoriert.

  Silben‐Trennung, Gleichstellungs‐Beauftragte, …