Informationen
shy

Bedingte Silbentrennung (Soft Hyphens)

Bedeutung der Silbentrennung

Ein Zeilenumbruch erfolgt automatisch am Ende eines Absatzes, einer Überschrift oder eines Listenelements. Wird die verfügbare Breite eines Abschnitts durch ein längeres Wort überschritten, erfolgt ein Zeilenumbruch darüber hinaus bei Leerzeichen am Zeilenende.

Dieses Verhalten erwarten wir am Bildschirm im Browser, der Textverarbeitung oder in PowerPoint. Anders als früher auf Schreibmaschinen muss dieses Ereignis nicht mehr durch eine Eingabe ausgelöst werden.

Zur visuellen Trennung von längeren Wörtern am Zeilenende wird die Silbentrennung eingesetzt. Sie kann automatisch im Browser und der Textverarbeitung erfolgen oder explizit vorgesehen werden. Der Fachausdruck dafür lautet Hyphenation bzw. Hyphenisation.

Mir sind keine Untersuchungen bekannt, die der Silbentrennung eine bessere Lesbarkeit zuschreiben. Das vertikale Scrollen wird durch den Einsatz von Silbentrennung auch bei Smart Phones mit deren schmalen Display nur marginal weniger benötigt.

Die Silbentrennung ermöglicht jedoch einen geschlosseneren Eindruck auf der rechten Seite eines Textbereichs. Einzelne Zeilen wirken weniger ausgefranst. Es stehen also beim Einsatz der Silbentrennung ästhetische Kriterien im Vordergrund.

Automatische Silbentrennung durch Browser

Maßgebliche Browser verfügen bereits über Bibliotheken bzw. Mechanismen, die auf Grund von linguistischen Regeln automatisch eine Silbentrennung vornehmen können. Dies sollte bedacht werden, bevor Tools zur automatischen Silbentrennung angekauft werden. Und niemand sollte sich die Mühe machen, selbst manuell bedingte Trennstriche generell einzubauen.

Verfügbarkeit in Browsern

Für die deutsche Sprache nach der Rechtschreibreform von 1996 kann von folgenden Browsern eine automatische Silbentrennung erwartet werden (früheste Version in Klammern):

Quelle: MDN | hyphens > Browser Kompatibilität (abgerufen 06.01.2021)

Für wen eine automatische Silbentrennung lästig ist, wird sich mit Stand 2020 in Chrome wohlfühlen.

Voraussetzungen für automatische Silbentrennung

Testverfahren zum Verhalten im Browser

Sie können das Verhalten ihrer technischen Darstellung relativ einfach auf folgende Weisen überprüfen:

Wird die Schrift vergrößert oder der Bereich verengt, sind häufiger Zeilenumbrüche erforderlich. Das Verhalten eines Textes im jeweiligen Browser kann auf diese Weise überprüft werden.

Um das Verhalten einer Sprachausgabe zu testen, kann der jeweilige Screen Reader im Betriebssystem aktiviert werden (Narrator in Windows, Voice Over in iOS, …). Für eingehende Tests empfiehlt sich in Windows auch mit NVDA und JAWS zu testen. Für JAWS steht eine kostenlose Demoversion zur Verfügung.

Explizite Einbindung von bedingten Trennstrichen in HTML mittels ­

HTML

Zum Einfügen eines bedingten Trennstrichs steht in HTML der Code ­ (soft hyphen) zur Verfügung. Stattdessen kann auch der Unicode-Wert U+00AD mittels ­ oder ­ verwendet werden.

Donau­dampfschiffahrts­gesellschafts­kapitän

Wird das Zeilenende oder wie im folgenden Beispiel die maximale Breite des Abschnittes erreicht, erfolgt an den durch ­ oder dessen Äquivalente vorgesehenen Sollbruchstellen ein Zeilenumbruch und ein Trennstrich wird angezeigt:

Donau­dampfschiffahrts­gesellschafts­kapitän

Der eingefügte Code stellt also einen unsichtbaren Marker für diejenigen Stellen dar, an denen ein Zeilenumbruch innerhalb eines Wortes erlaubt ist, wenn die verfügbare Breite durch das gesamte Wort überschritten würde.

CSS Gestaltungsmöglichkeiten mittels hyphens

Bedeutung der CSS Gestaltungsmöglichkeiten

In CSS3 wurde ein Mechanismus zum Steuern der bedingten Silbentrennung etabliert. Dass dies erst so spät geschah, wird teilweise der Tatsache zugeschrieben, dass es schlicht im Englischen weniger lange Wörter gibt.

Voraussetzung: Damit das Verhalten in Bezug auf die bedingte Silbentrennung durch CSS sinnvoll gesteuert werden kann, muss der jeweilige Textabschnitt in HTML korrekt über eine Kennzeichnung der natürlichen Sprache verfügen. Dies kann durch die Festlegung der Sprache für die ganze Webseite im HTML-Head oder durch die Sprachkennzeichnung eines Abschnitts erfolgen.

Technische Realisierung des Verhaltens mittels CSS

So könnte eine schlichte Anweisung für die Silbentrennung mit der CSS-Eigenschaft in Absätzen aussehen:

p { hyphens: auto; }

Werte für CSS hyphens

manual (Standardwert)
Beispiel:

Donau­dampfschiffahrts­gesellschafts­kapitän

Erläuterungen:
  • Keine automatische Silbentrennung durch Browser.
  • Explizit vorgesehene bedingte Trennstriche werden beachtet.
none
Beispiel:

Donau­dampfschiffahrts­gesellschafts­kapitän

Erläuterungen:
  • Keine automatische Silbentrennung durch Browser.
  • Explizit vorgesehene bedingte Trennstriche werden ignoriert.
  • Umbrüche entstehen mitten in einem Wort und nach Leerzeichen.
auto
Beispiel:

Donau­dampfschiffahrts­gesellschafts­kapitän

Erläuterungen:
  • Automatische Silbentrennung erfolgt durch Browser.
  • Explizit vorgesehene bedingte Trennstriche werden bevorzugt dargestellt.

Anmerkung: Der Wert der CSS-Eigenschaft hyphens wird an die Kindelemente vererbt.

Unterstützung der CSS-Eigenschaft hyphens

Die CSS-Eigenschaft hyphens wird in Browsern überwiegend schon länger unterstützt. Die folgende Tabelle basiert auf Angaben auf Can I Use.com (Stand Dezember 2020):

Browser Support für CSS 'hyphens'
Browser Version
Internet Explorer ≥ 10
Mozilla Firefox ≥ 6
Google Chrome ≥ 55
iOS Safari ≥ 42
Android ≥ 81

Probleme scheint es jedoch ausgerechnet noch bei weiteren Apps für Smart Phones zu geben.

CSS Text Module Level 3 > 5.4. Hyphenation: the ‘hyphens’ property
Entwurf zu einer Spezifikation des W3C zur Textmanipulation mittels CSS (Zeilenumbruch, Ausrichtung, Abstand, …) vom 22. Dezember 2020
Can I Use | CSS Hyphenation
Dokumentation der Browserunterstützung für 'hyphens'.
Leider nicht barrierefrei!

Silbentrennung und Barrierefreiheit

A11Y

Bedeutungstragende Silbentrennung

Wenn eine Zeichenfolge je nach Silbentrennung unterschiedliche Bedeutungen aufweist, sollte ein weicher Trennstrich eingesetzt werden.

Beispiel Brautraum

Im folgenden Beispiel kann durch gezielte Silbentrennung etwa zwischen einem Begriff der Hochzeitsvorbereitung und Phantasien eines Biertrinkers unterschieden werden:

  1. Braut­raum
  2. Brau­traum

Die bedingte Silbentrennung wurde zwar zur visuellen Darstellung eingeführt. Sie kann jedoch auch die Aussprache durch einen Screen Reader steuern.

Hier das Hörbeispiel zum Brautraum:

Falls Sie keinen Unterschied gehört haben: Bei einiger Erfahrung mit einer Sprachausgabe werden Sie den feinen Unterschied bemerken. Und falls Sie schon einmal Gelegenheit hatten, blinde Menschen bei der Verwendung einer Sprachausgabe zu beobachten, wissen Sie, dass eine Sprachausgabe selbst bei rasantem Tempo noch verstanden werden kann.

Vorteile bedeutungstragender Silbentrennung

Die gezielte Silbentrennung bringt folgende Vorteile:

  1. Die Zeichenfolge wird an der korrekten Stelle am Zeilenende gegebenenfalls umgebrochen.
  2. Beim Gebrauch einer Sprachausgabe lässt sich ein feiner Unterschied hören, der die Wortbedeutung verständlicher macht, selbst wenn sich das Wort nicht am Zeilenende befindet.

Natürlich sollte auch überlegt werden, zur Kennzeichnung der jeweiligen Aussprache von Vornherein ein - (Hyphen Minus) einzusetzen.

Probleme durch Silbentrennung

Folgende Problembereiche sind in Bezug auf Personengruppen bei der Verwendung von Trennstrichen zu berücksichtigen:

Lesen mit den Augen
Ein Zeilenwechsel innerhalb eines Wortes beeinträchtigt Lesegewohnheiten. Lesen erfolgt nicht nur durch die kognitive Verknüpfung einzelner Buchstaben, sondern durch das Erfassen von Wortbildern. Wortbilder werden durch Zeilenumbrüche durch Silbentrennung zerstört.
Ein Zeilenwechsel innerhalb eines Wortes erhöht die Anforderungen an das Leseverständnis. Die bedingte Silbentrennung ist daher bei Texten in einfacher Sprache grundsätzlich verpönt.
Hören einer Sprachausgabe

Wer gewöhnt ist, Texte mit einer Sprachausgabe zu erfassen, merkt einen deutlichen Unterschied in der akustischen Wiedergabe beim Einsatz explizit gesetzter bedingter Trennstriche.
Der akustisch wahrnehmbare Unterschied wird zu einem Problem, wenn ­ extensiv und nicht gezielt für Sonderfälle eingesetzt wird. Er ist mit einer Sprachausgabe wahrnehmbar, selbst wenn am Bildschirm keine Silbentrennung sichtbar ist.
Screen Readern und Sprachausgaben sind nicht in der Lage, extensiven von bedeutungstragendem Einsatz der bedingten manuellen Silbentrennung zu unterscheiden. Aus der Perspektive der Nutzung von Screen Readern muss sich daher der explizite Einsatz bedingter Trennstriche auf bedeutungstragende Einsatzbereiche reduzieren.

Im folgenden Beispiel können Sie den Text Bedingte Trennstriche zur Silbentrennung zunächst ohne und dann mit bedingten Trennstrichen hören, wie er von einer Sprachausgabe wiedergegeben wird.

Die Zeichenfolge che als Silbe wird etwa in diesem Beispiel völlig anders ausgesprochen, als in der Zeichenfolge ohne ­.

Ertasten auf einer Braillezeile
Für die Blindenschrift steht eine Kurzschrift zur Verfügung, die unter anderem auch besondere Schreibweisen für längere Wörter enthält. Der String "Philosoph" wird lediglich mit den Zeichen "ph" dargestellt. Werden derartige Ausdrücke explizit mit bedingten Trennstrichen versehen, können Kürzungsprogramme die Zeichenfolge als String zur Umwandlung unter Umständen nicht mehr erkennen.
Eine Lösung kann es nicht sein, dass Kürzungsprogramme generell SHY ignorieren, weil dadurch auch eine bedeutungstragende Silbentrennung nicht mehr berücksichtigt werden kann.

Anforderungen an Browser (UAAG)

Silbentrennung in den aktuellen UAAG

Was Browser zur digitalen Barrierefreiheit beitragen sollten, ist in den User Agent Accessibility Guidelines (UAAG) festgelegt. Die aktuelle Version 2.0 aus dem Jahr 2015 ist weiterhin noch keine W3C Empfehlung, ist aber zur Beurteilung schon heranzuziehen.

In der Richtlinie 1.4 der UAAG 2.0 sind Anforderungen an die Textkonfiguration aufgelistet. Für die Silbentrennung findet sich unter 1.4.6 ein Erfolgskriterium in der Konformitätsstufe AAA. Allerdings ist es gemäß Anmerkung 1 zur Richtlinie ausreichend, wenn für HTML-Dateien eigene Stylesheets verwendet werden können.

W3C | User Agent Accessibility Guidelines (UAAG) 2.0

Wünsche an die UAAG zur Silbentrennung

Es wäre fein, wenn die Richtlinien auch die Verwendung von Mechanismen zur automatischen Silbentrennung für Browser verlangen würden. Derzeit sehen sich Autor*innen von Webauftritten berechtigt, manuell Anweisungen zur bedingten Silbentrennung einzubauen, um das visuelle Erscheinungsbild für Smart Phones zu optimieren.

Eine verlässliche Einbindung automatischer Silbentrennung würde das exzessive Einfügen von bedingten Trennstrichen in den Code durch Hyphenation-Tools zurückdrängen. Denn diese Praxis führt zu einer Störung der Darstellung durch Sprachausgaben.

WCAG-Barrierefreiheit und Silbentrennung

Weder in den geltenden Richtlinien zu barrierefreiem Web Design, noch in der aktuellen Vorversion zu den WCAG 2.2 finden sich Anforderungen in Bezug auf die Silbentrennung. Diskussionsansätze etwa in der Low Vision Working Group scheinen schon einige Jahre versiegt.

Wünsche in Bezug auf bedingte Trennstriche lassen sich also nicht mit Verweis auf die WCAG und rechtliche Bestimmungen begründen. Dies bedeutet jedoch nicht, dass sie nicht gerechtfertigt sein können.

Verwende Silbentrennung lediglich bedeutungstragend!

Es ist fein, wenn bedingte Trennstriche lediglich dann eingesetzt werden, wenn die jeweilige Silbentrennung bedeutungstragend ist und Auswirkungen auf das Verständnis eines Ausdrucks hat. Und genau dann sollten Trennstriche auch explizit eingesetzt werden, entweder grundsätzlich wahrnehmbar durch einen - oder zumindest durch ein ­.

Die Verwendung bedingter Trennstriche zur Steuerung der Aussprache wird zwar in den Techniken zum Erfolgskriterium 3.1.6 Aussprache nicht erwähnt. Meine Tests haben jedoch ergeben, dass dieser Hack mit unterschiedlichen Sprachausgaben sehr effizient eingesetzt werden kann.

Biete Konfigurationsmöglichkeiten zur bedingten Silbentrennung an!

Ein Style Switcher zur Konfiguration der Silbentrennung könnte in der Regel zwischen den Werten auto und none toggeln:

Anmerkung: Darstellungsoptionen für bedingte Trennstriche könnten auf einem Webauftritt wesentlich einfacher implementiert werden als ein sauberer Switcher für den Farbkontrast. Die Kontrastswitcher sind nämlich meist unzureichend gestaltet, weil der alternative (inverse) Modus kaum oder schlecht in Darstellungsdetails für Elemente realisiert ist.

Accessibility Tools für Webseiten und Webauftritte

Verwandte Gestaltungsmöglichkeiten

HTML Konzepte

Arten von Hyphens

Neben dem Soft-Hyphen sind vor allem folgende Arten von Trennstrichen zu erwähnen:

Hyphen Minus
Dieser wird auf der Tastatur mit der Taste - eingefügt. Er ist immer sichtbar und bewirkt einen Zeilenumbruch, wenn das folgende Wort nicht mehr in die Zeile passt.
Unicode: U+002D
Unbedingter Trennstrich (‐)
Dieser kann in HTML mittels ‐ eingefügt werden. JAWS kennt interessanterweise das Zeichen nicht und liest lediglich Zeichen 8208 vor.
Unicode: U+2010
Geschützter Bindestrich (non breaking hyphen)
Die durch ‑ verbundenen Silben werden am Zeilenende nicht getrennt, sondern gemeinsam umgebrochen.
Unicode: U+2011
Punkt für eine Silbentrennung (Hyphenation Point)
Mit dem Zeichen ‧ können Punkte in einem Wort gekennzeichnet werden, an denen eine Silbentrennung möglich ist: Sil‧ben‧tren‧nung. JAWS kennt dieses Zeichen nicht und liest jeweils Zeichen 8231 vor.
Unicode: U+2027

Unicode Search | hyphen

Zeilenumbruch mittels <br />

Explizit kann in HTML durch das Element <br /> (break) innerhalb eines Absatzes ein Zeilenwechsel festgelegt werden.

Ein doppelter <br />-Tag erzeugt visuell eine Leerzeile. Dies zu verwenden, ist aus der Perspektive der Barrierefreiheit nicht zulässig, da mit diesem Code ein absatzweises Navigieren nicht möglich ist.

Geschütztes Leerzeichen mittels &nbsp;

Ein geschütztes Leerzeichen verhindert, dass die beiden benachbarten Zeichenfolgen beim Zeilenumbruch voneinander getrennt werden. (nbsp = non breaking space)

Insbesondere zwischen einer Zahl und der dazugehörigen Einheit oder Anhängen zu Namen sind Zeilenumbrüche auf Grund der Lesbarkeit unerwünscht. Der Code kann beispielsweise folgendermaßen aussehen:

Dr.&nbsp;Gruber von der Post&nbsp;AG fährt jählich 18.000&nbsp;km mit ihrem Dienstwagen.

Breitenloses Leerzeichen mittels &#8203; (Zero Width Space)

Der Name sagt es schon: Das Zeichen bewirkt visuell keinen Abstand zwischen Zeichen innerhalb einer Zeile. Allerdings erfolgt wie bei einem gewöhnlichen Leerzeichen am Ende der Zeile ein Zeilenumbruch. Natürlich wird dabei kein Trennstrich angezeigt, auch nicht am Ende der Zeile. &#8203; stellt daher keine Alternative für &shy; dar.

Sehen wir uns beispielsweise folgenden Code an:

Digitale Ba​rriere​freiheit

So sieht der Beispielcode in einem engen Bereich aus:

Digitale Ba​rriere​freiheit

Ich habe die Beobachtung gemacht, dass einige Sprachausgaben selbst die maskierte Darstellung mittels &amp; unterdrücken. Diesem Problem bin ich aber nicht weiter nachgegangen.

Überholte Elemente in HTML (deprecated)

Folgende HTML-Elemente finden sich nicht mehr in HTML5 und sollten daher nicht mehr verwendet oder durch aktuelle Konzepte ersetzt werden.

CSS Konzepte

Zeilenumbrüche im Fließtext steuern - white-space

Mit der Eigenschaft white-space lassen sich unter anderem Präzisierungen für das bewerkstelligen, was in HTML mit dem Element <pre> bewirkt werden kann. Ich habe mir lediglich einen Wert genauer angesehen, der &nbsp; aus HTML alternativ erweitern kann:

Durch white-space:nowrap werden Zeilenumbrüche im Text abgesehen von <br /> völlig unterdrückt. Hier ein Beispiel für einen Bereich mit einer eingeschränkten Breite.

Zunächst der HTML-Code, der mit diesem CSS-Wert versehen wird:

Digitale Barriere&shy;freiheit. - Jetzt!

Und hier die Umsetzung:

Digitale Barriere­freiheit. - Jetzt!

Weder Leerzeichen noch Satzzeichen noch bedingte Trennstriche führen zu einem Zeilenumbruch. Lediglich ein <br /> führt innerhalb eines Elements zu einem Zeilenumbruch. Der Einsatz dürfte wohl in der Regel lediglich in einem <span>-Bereich zweckmäßig sein.

Gnadenloser Umbruch mittels word-wrap bzw. overflow-wrap

Mit dem Wert break-word erfolgt der Umbruch mitten im Wort am Abschnittsende ohne Trennstrich. Kein Wert, der im Web Design verwendet werden sollte. Aber wenn ich persönlich als Sehbehinderter ein Word-Dokument bequem vergrößert lesen möchte, stelle ich mir eine Schriftgröße mit 88pt ein und erhalte exakt diese Darstellung. Ich habe mich jahrelang daran gewöhnt und kann so wesentlich flüssiger lesen als mit bewegten Schriften durch Funktionalitäten der Vergrößerungssoftware ZoomText.

Die Wildschweine suhlen sich im Böhmerwald.

Die Browserunterstützung bei meinen Tests war sehr uneinheitlich. Firefox scheint die Eigenschaften zu ignorieren. Chrome bricht geometrisch am Bereichsende um.

Dies könnte aber trotzdem eine hilfreiche Eigenschaft für diejenigen sein, die an einem persönlichen CSS-Layout im Browser arbeiten.

Technische Darstellung beim Überschreiten der verfügbaren Breite overflow-x

Mit der Eigenschaft overflow-x lässt sich auf eine andere Weise das Verhalten beim Erreichen der verfügbaren Breite steuern. Der Text kann über den Bereich hinausragen, abgeschnitten oder durch einen eingeblendeten Scroll-Bar horizontal bewegt werden.

Der Wert overflow-x: visible sollte vermieden werden, da Textüberlappungen mit anderen Bereichen vorprogrammiert sind.

Auch der Wert overflow-x: scroll beeinträchtigt die Nutzungsfreundlichkeit. Das horizontale Scrollen mittels einer Scroll-Bar erfordert eine präzise Feinmotorik und beeinträchtigt die Lesegewohnheiten.

Überholte Eigenschaften in CSS3

Folgende CSS-Eigenschaften finden sich nicht mehr im CSS3-Standard und sollten daher nicht mehr verwendet oder durch aktuelle Konzepte ersetzt werden.

Can I Use | Browserunterstützung für word-break

Word Kurztasten zum Zeilenumbruch

Folgende Tastaturbefehle stehen in Word zur Steuerung der Silbentrennung und von Zeilenumbrüchen zur Verfügung:

Zeichen Befehl
Bedingter Trennstrich STRG + -
Geschützter Bindestrich STRG + SHIFT + -
Geschütztes Leerzeichen STRG + SHIFT + LEERTASTE
Zeilenumbruch innerhalb eines Absatzes SHIFT + ENTER