Silbentrennung und Blocksatz
Silbentrennung ist die Grundlage für einen ausgeglichenen Blocksatz und Spaltensatz, aber 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.
Ohne hyphens
Sehen wir uns die Einstellungsoptionen in prominenten hyperprofessionellen Satzprogrammen an, um eine oberflächliche Idee zu bekommen, was die Silbentrennung alles so mit sich bringt.
Typosünde Silbentrennung in Überschriften
Wir werden vor Fragen wie »Silbentrennung auch bei Großschreibung« gestellt und müssen entscheiden, ob Ei-er außerhalb der Küchen von abendfüllenden TV-Kochshows getrennt werden dürfen. Noch eine Fragestellung: Wieviele aufeinander folgende Trennzeichen wirken erträglich?
Mit hyphens
Sehen wir uns die Einstellungsoptionen in prominenten hyperprofessionellen Satzprogrammen an, um eine oberflächliche Idee zu bekommen, was die Silbentrennung alles so mit sich bringt.
Typosünde Silbentrennung in Überschriften
Wir werden vor Fragen wie »Silbentrennung auch bei Großschreibung« gestellt und müssen entscheiden, ob Ei-er außerhalb der Küchen von abendfüllenden TV-Kochshows getrennt werden dürfen. Noch eine Fragestellung: Wieviele aufeinander folgende Trennzeichen wirken erträglich?
Silbentrennung ist Sache der Sprache
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. Aber ansonsten sind Chrome und Edge unter Windows noch silbenabstinent.
Flattersatz flattert edel
Auch wenn die Optionen für die Silbentrennung jetzt in den meisten Browser vorliegen: Internet ist kein Papier hinter Glas. Im Satz muss die Silbentrennung immer manuell kontrolliert und nachgearbeitet werden.
Bei Webseiten wissen wir nie, wo ein Text umbricht. Gerade auf den kleinen Monitoren der Handys muss die Lesbarkeit in den Vordergrund gesetzt werden. Da kann ich mit meinem Handy alles testen, aber ihr kommt mit einem größeren Handy und schon steht ihr vor einem Stolperstein im Lesefluss.
Auf größeren Monitoren entsteht bei Silbentrennung ein rechter Rand mit kleinen Treppchen, der Satz wird unruhig. Besser hyphenate-limit-chars (Zahl von Buchstaben, bevor getrennt werden soll) etwas größer halten.
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
Heute unterstützen alle immergrünen Browser hyphens ohne Browser-Präfix. Aber da Silbentrennung sprachabhängig ist: nicht jeder Browser in jeder Sprache.
hyphens: auto; hyphenate-limit-chars: auto 3; 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 ­ (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 hyphens
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 hyphens
Pseudo-Elemente auf https://www.mediaevent.de/
CSS background-size: https://www.mediaevent.de/
SVG mit SMIL: https://www.mediaevent.de/
Bei zusammen gesetzten Wörtern mit Bindestrich trennen die Browser freiwillig.
Firefox, Safari und sogar Chrome (unter OS X) spielen bei CSS wbr mit. Und warum sollte man ab und zu ein ­ setzen?
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.
Mehr zu Trennung und Blocksatz
- Trennen mit Gewalt CSS word-wrap – lange Wörter automatisch umbrechen verhindert, dass lange Wörter das Layout durchbrechen.
- Blocksatz und Silbentrennung: un-zer-trenn-lich
- CSS text columns Spaltensatz – überflüssig, weil es heute grid und flex gibt?
- Silbentrennung gut lesbar?