CSS hyphens – Silbentrennung – Strichlein Strichlein ganz an Rand

CSS Silbentrennung in HTML-Seiten

Mit CSS3 hyphens ist die Silbentrennung in HTML-Seiten auf leisen Sohlen eingeschlichen: Endlich trennen Firefox und Safari, Chrome (nur unter Mac OS), IE11 und Edge Silben schmerzlos. Silbentrennung ist die Grundlage für einen ausgeglichenen Blocksatz und Spaltensatz.

Eine anständige Silbentrennung war wohl so ziemlich das Letzte, um das sich die Browser kümmerten. Im Englischen gibt es nun einmal nicht so viele lange Wörter wie im Deutschen.

p { hyphens: auto; }

Obendrein genügt es auch nicht, einfach ein paar Bindestriche ins In-ter-net zu setzen. Man muss sich nur mal ansehen, welchen Aufstand die Satzprogramme wie InDesign und XPress rund um die Trennungen treiben.

Silbentrennung und Blocksatz Print vs. WebseiteAutomatische SilbentrennungKleinstes WortMinimum vorMinimum nachAuch bei GroßschreibungTrennungen in FolgeSilbentrennzone623Unbegrenzt15 mmBlocksatzmethodeAbstandZeichen85%110%200%Bündigkeitszone3 mmErzwungener Blocksatz0%0%0%Silbentrennung und BlocksatzStandardName

Ohne hyphens

Sehen wir uns nur einmal die Einstellungsoptionen in prominenten hyperprofessionellen Satzprogrammen an, um eine oberflächliche Idee zu bekommen, was die Silbentrennung alles so mit sich bringt.

Wir werden vor Fragen wie »Silbentrennung auch bei Großschreibung« gestellt und müssen entscheiden, ob Ei-er außerhalb der Küche getrennt werden dürfen und wieviele aufeinander folgende Trennzeichen erträglich wirken.

Mit hyphens

Sehen wir uns nur einmal die Einstellungsoptionen in prominenten hyperprofessionellen Satzprogrammen an, um eine oberflächliche Idee zu bekommen, was die Silbentrennung alles so mit sich bringt.

Wir werden vor Fragen wie »Silbentrennung auch bei Großschreibung« gestellt und müssen entscheiden, ob Ei-er außerhalb der Küche getrennt werden dürfen und wieviele aufeinander folgende Trennzeichen erträglich wirken.

Damit die Silbentrennung auch tatsächlich funktioniert, muss natürlich die Sprache der Seite gesetzt sein:

<html lang="de">

Firefox und Safari trennen schon seit 2011 Küchenschürzen, Sahnetörtchen und Orangenlimonade. Chrome hinkt ja immer ein wenig hinterher (oder soll ich sagen: Die Entwickler verweigern gerne alles, was ihnen nicht geheuer ist?) und auch Opera will »Einstellungsoptionen« nur am Stück herausgeben und trennt genauso wie Chrome unter Windows auch sechs Jahre nach der Erstveröffentlichung dieses Beitrags nicht freiwillig.

Unter Mac OS funktioniert die Silbentrennung auch in Chrome –

Silbentrennungen in Folge

Nach einer längeren Anlaufphase kommen jetzt auch die Feinheiten wie die Zahl von Silbentrennungen in Folge (hyphenate-limit-lines: 2) und die Zahl der Buchstaben im Wort, bei der getrennt werden darf (hyphenate-limit-chars: auto 5).

p {
hyphenate-limit-chars: auto 5;
hyphenate-limit-lines: 2;
}

Browser-Support für hyphens

Seit Version 10 macht auch Internet Explorer den Strich am Rand mit und unterstützt die Silbentrennung mit CSS hyphens. Allerdings brauchen Webkit und IE11 immer noch den Browser-Präfix.

-webkit-hyphens: auto;
-webkit-hyphenate-limit-chars: auto 3;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: auto 3;
-ms-hyphenate-limit-lines: 4;

wbr word break – Silbentrennung ohne Trennstrich

HTML5 trägt ebenfalls zur Silbentrennung bei – und zwar mit dem wbr-Tag. Ein wbr ist ein Vorschlag, wo der Browser ein langes Wort trennen soll. Im Gegensatz zum altgedienten &shy; (hat das überhaupt schon mal jemand benutzt?) trennt das <wbr> ohne den Trennstrich.

Wozu ein <wbr>-Tag gut ist? Damit kann der Browser lange Zeichenketten trennen, ohne zweideutige Bindestriche einzusetzen – etwa bei Adressen von Webseiten.

Ohne wbr, ohne hypens

Pseudo-Elemente auf https://www.mediaevent.de/javascript-pseudo-element/
CSS background-size: https://www.mediaevent.de/css/background-size.html
SVG mit SMIL: https://www.mediaevent.de/svg-smil-animationen/

Mit wbr, ohne hypens

Pseudo-Elemente auf https://www.mediaevent.de/javascript-pseudo-element/
CSS background-size: https://www.mediaevent.de/css/background-size.html
SVG mit SMIL: https://www.mediaevent.de/svg-smil-animationen/

Firefox, Safari und sogar Chrome (unter OS X) spielen bei CSS wbr mit, IE10 und IE11 beherrschen zwar die Silbentrennung, aber bocken beim wbr-Tag.

Und warum sollte man ab und zu ein &shy; setzen?

Ohne Silbentrennung
Wem schiebt man bei sollten Unglücksfällen die Schuld in die Schuh? Dem Webdesigner, dem Autor oder dem Auftraggeber?

Beim Satz von Zeitungen und Büchern prüft der Setzer alle Beiträge, ob die automatischen Trennungen aus Quark oder InDesign gut lesbar sind. Wenn nicht, dann wird händisch nachgearbeitet – eine Sorgfalt, die wir für Webseiten selten aufbringen. Die responsiven Seiten sind sowieso nicht auf den rechten Rand fixiert wie das Papier.