Der Duden hat eine Grafik, mit der die Anzahl und Länge von Worten dargestellt wird. Was darin auffällt: Es gibt recht viele Worte, die mehr als sieben Zeichen haben.
Neue Erkenntnisse: Ein etwas umfassenderes Herangehen verbessert das Ergebnis signifikant.Wenn davon mehrere in einer schmalen Spalte stehen, z.B. auf dem Mobiltelefon, entstehen lange Texte mit wenigen Worten pro Zeile. Denn der Browser bricht normalerweise nur wortweise um. Eine Textverarbeitung hat eine Silbentrennung, mit der speziell bei Blocksatz ein homogenes Schriftbild erzeugt werden kann. Blocksatz ist für Webseiten eher ungeeignet. Gut lesbar ist linksbündiger Text, der keine großen Wortaubstände aufweist.
Mit HTML5 und CSS3 ist ein Hauch Textverarbeitung verfübar: Moderne Browser können Silbentrennung. Zumindest ein bisschen. Was bei der vom Duden ermittelten Wortlängen-Verteilung in einem deutschsprachigen Text durchaus nützlich sein kann. Der Text bleibt kompakter.
Die Basisfunktionalität word-wrap: break-word ziemlich brachial, denn sie geht von Englisch als Sprache aus. Da es dort tendenziell kürzere Worte gibt, wird bei einem deutschen Text nahezu alles umgebrochen, was sich in den Weg stellt. Wenn jede Zeile mit einem - endet, macht das Lesen noch weniger Spaß. Es gibt ein bisher schlecht dokumentierte — Funktion hyphenate-limit-chars, mit der das Umbruch-Verhalten beeinflusst werden kann. Mit der nachfolgenden Einstellung für Absätze wird deutschsprachiger Text einigermaßen vernünftig umgebrochen.
Grundsätzlich reicht es schon, den Absätzen <P>…</P> mit ein paar Trennregeln zu versehen:
p{ overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-chars: 6 2 2; -ms-hyphenate-limit-chars: 6 2 2; hyphenate-limit-chars: 6 2 2; -webkit-hyphenate-limit-lines: 2; -ms-hyphenate-limit-lines: 2; hyphenate-limit-lines: 2; lang="de"; }
Wichtig ist die Sprachkennung lang, damit die entsprechende Silbentrennung zugrunde liegt. Mit den hyphenate-limit-chars wird bestimmt, dass Worte mit einer Mindestlänge von sechs Zeichen getrennt werden dürfen, wobei die erste und letzte Silbe jeweils mindestens zwei Zeichen haben muss. hyphenate-limit-lines verhindert mehr als zwei Zeilen mit Trennstellen nacheinander.
An einigen Stellen, an denen eine Trennung möglich wäre, wird es unterlassen, während an anderen, wo es unnötig erscheint, eine Trennung erfolgt. Warum das so ist, hat sich bei den Tests nicht erschlossen.
Neue Erkenntnisse
Im Zusammenhang mit anderen Arbeiten bin ich über den Artikel »All you need to know about hyphenation in CSS« gestolpert. Daraus hat sich eine Erkenntnis entwickelt:
<html lang="de-DE"> <div class="trennbereich"> … </div> </html>
Die Trennung ist erheblich besser,…
- …, wenn das ganze Dokument eine Sprachinformation besitzt.
- …, wenn die zu trennenden Elemente innerhalb eines Containers liegen.
Passend zur vorangegangenen Struktur führt die im zitierten Artile lediglich für <P>…</P>vorgeschlagene Einstellung auf den umfassenden Container angewandt, zu überraschend guten Ergebnissen:
.trennbereich { -webkit-hyphens: auto; -webkit-hyphenate-limit-before: 2; -webkit-hyphenate-limit-after: 2; -webkit-hyphenate-limit-chars: 6 2 2; -webkit-hyphenate-limit-lines: 2; -webkit-hyphenate-limit-last: always; -webkit-hyphenate-limit-zone: 8%; -moz-hyphens: auto; -moz-hyphenate-limit-chars: 6 2 2; -moz-hyphenate-limit-lines: 2; -moz-hyphenate-limit-last: always; -moz-hyphenate-limit-zone: 8%; -ms-hyphens: auto; -ms-hyphenate-limit-chars: 6 2 2; -ms-hyphenate-limit-lines: 2; -ms-hyphenate-limit-last: always; -ms-hyphenate-limit-zone: 8%; hyphens: auto; hyphenate-limit-chars: 6 2 2; hyphenate-limit-lines: 2; hyphenate-limit-last: always; hyphenate-limit-zone: 8%; }
Die „limit-zone“ wird aktuell nur vom Edge unterstützt, doch das ist nur eine Frage der Zeit, wann die anderen Browser folgen. Die bereits gefundene Einstellung „6 2 2“ erweist sich für Deutsch subjektiv günstiger, als die vorgeschlagenen „6 3 3“ für englischsprachige Texte. Das kommt den Ergebnissen von Word & Co. schon recht nah.
Zumindest auf Windows- und Android-Systemen sieht das Ergebnis vernünftig aus, insbesondere auf den schmalen Schirmen von Mobiltelefonen reduziert der Umbruch langer Worte das „Zerfransen“ von Texten deutlich. Bei „fluid design“-Seiten, die sich an die verfügbare Breite anpassen, wird das Erzielen eines homogenes Ergebnisses deutlich einfacher, ohne dass für alle Eventualitäten Aufwand betrieben werden muss.
Der Effekt ist ziemlich deutlich sichtbar. (1) zeigt diese Seite mit, (2) ohne Umbruch:
Bild zum Vergrößern anklicken, zum Schließen Bild anklicken.
Diese Variante hat den Charme, dass beispielsweise Tabellenspalten ebenfalls der Trennung unterliegen.