Bessere Typografie mit `text-wrap: pretty`

• Ein Blick auf text-wrap: pretty, das Webtypografie schöner macht
• Eine neu in Safari Technology Preview 216 eingeführte Funktion, die Webtypografie präziser und leichter lesbar verbessert
• Bisher wurde Webtext Zeile für Zeile verarbeitet, doch pretty berücksichtigt den gesamten Absatz und passt die Umbruchstellen entsprechend an
• Diese Funktion verbessert Lesbarkeit und Barrierefreiheit und ist von traditionellen Satzmethoden inspiriert

Gute Zeilenumbrüche aus der traditionellen Typografie lernen

• Kurze letzte Zeile vermeiden: Wenn in der letzten Zeile nur ein einziges Wort übrig bleibt, wirkt das ästhetisch ungünstig
• Unruhige Absatzenden verbessern: Wenn Zeilenenden stark ausfransen, leidet die Lesbarkeit, daher sollten sie möglichst ausgewogen angepasst werden
• Schlechte Bindestrichnutzung vermeiden: Wenn Bindestriche in zwei aufeinanderfolgenden Zeilen erscheinen oder Wörter zu stark getrennt werden, wird das Lesen erschwert
• Typografische Flüsse („Rivers“) vermeiden: Wenn sich Zwischenräume zwischen Wörtern vertikal fortsetzen und den Blick ablenken, sollte das vermieden werden

Die Geschichte des Zeilenumbruchs im Web

• Das Web verwendet seit 1991 einen Ansatz, der „von der ersten Zeile an Zeile für Zeile verarbeitet“
• Dabei wird die Textlänge jeder Zeile einzeln berechnet, ohne die Harmonie zwischen den Zeilen zu berücksichtigen
• Werkzeuge wie InDesign oder LaTeX richten Zeilen anhand des gesamten Absatzes aus, im Web war das bis vor Kurzem nicht möglich
• In Safari Technology Preview 216 wurde erstmals ein Zeilenumbruch eingeführt, der den gesamten Absatz berücksichtigt

Welche Probleme text-wrap: pretty löst

• Der gesamte Absatz wird bewertet, um die optimalen Umbruchstellen festzulegen
• Kurze letzte Zeilen werden verhindert, die Form des Zeilenendes (rag) verbessert und unnötige Trennstriche reduziert
• Chromium-basierte Browser verbessern nur die letzten vier Zeilen eines Absatzes, WebKit wendet dies auf den gesamten Absatz an
• Das River-Problem wird noch nicht verbessert, soll aber künftig eingeführt werden

Unterschiede in der Implementierung der Browser

• pretty kann gemäß der Definition der CSS Working Group je nach Browser unterschiedlich funktionieren
• WebKit wendet es auf den gesamten Absatz an, Chromium nur auf die letzten vier Zeilen
• Entwickler sollten es daher nicht nur zur Verbesserung der letzten Zeile verwenden, sondern zur Aufwertung der gesamten Typografie

Demo ansehen

• Im CodePen-Demo lassen sich Kombinationen aus pretty, balance, Trennstrichen, Ausrichtung usw. ausprobieren
• Mit „show guides“ und „show ghosts“ lassen sich Vorher-Nachher-Vergleiche anzeigen
• Die Wirkung kann in verschiedenen Sprachen überprüft werden (Englisch, Arabisch, Deutsch, Chinesisch, Japanisch)

Bedenken zur Performance ausräumen

• Bei Inhalten mit sehr vielen Zeilen kann es Auswirkungen auf die Performance geben, bei gewöhnlichen Absätzen gibt es jedoch keine Performanceprobleme
• Solange es sich nicht um Absätze mit Hunderten oder Tausenden Zeilen handelt, kann es bedenkenlos verwendet werden
• Bei Bedarf wird WebKit lange Absätze in Teilstücke aufteilen, um die Performance sicherzustellen

Der Unterschied zwischen pretty und balance

• pretty sorgt für natürlichere Zeilenumbrüche, während der Text die Breite des Containers weiterhin gut ausfüllt
• balance legt den Schwerpunkt darauf, alle Zeilen ähnlich lang zu machen, wodurch der Container weniger stark gefüllt wird
• Im Allgemeinen eignet sich pretty für Fließtext, balance eher für Überschriften, Bildunterschriften und Teasertexte
• Beide können bei kurzen Texten verwendet werden, bei langem Fließtext sollte balance jedoch vermieden werden

Erklärung weiterer Werte der text-wrap-Eigenschaft

text-wrap: avoid-short-last-lines

• Ein neu hinzugefügter Wert, der sich ausschließlich darauf konzentriert, kurze letzte Zeilen zu vermeiden
• Noch in keinem Browser implementiert

text-wrap: auto

• Der Standardwert, der den seit 1991 verwendeten zeilenbasierten „greedy line breaking“-Algorithmus nutzt
• Künftig könnte auch der Standardwert selbst in Browsern verbessert werden

text-wrap: stable

• Verhält sich derzeit wie auto, bietet aber stabile Zeilenumbrüche, die sich für editierbaren Text eignen
• Stellt sicher, dass sich Zeilenumbrüche auch während Animationen oder Texteingaben nicht verändern

Details zu text-wrap

• text-wrap ist eigentlich die Kurzschreibweise für die zwei Eigenschaften text-wrap-mode und text-wrap-style

• text-wrap-mode: legt fest, ob Zeilenumbrüche erlaubt sind (wrap / nowrap)

• text-wrap-style: wählt den Zeilenumbruch-Algorithmus (auto, stable, balance, pretty, avoid-short-last-lines)

  text-wrap-style: pretty;  
  text-wrap-mode: wrap;  
  

• Bei gemeinsamer Verwendung mit der white-space-Eigenschaft sollte auch die Behandlung von Leerraum geprüft werden

Zusammenfassung

• text-wrap: pretty ermöglicht deutlich ausgefeiltere Zeilenumbrüche für Webtext als bisher
• In Safari Technology Preview 216 wurde es mit einer Auswertung des gesamten Absatzes implementiert
• Selbst bei langen Fließtexten gibt es kaum Performanceprobleme, während Lesbarkeit und Ästhetik deutlich verbessert werden
• Es ist wichtig, den Unterschied zu balance zu verstehen und je nach Inhaltstyp passend zu wählen

[GN⁺]

Hacker-News-Kommentare

• Ich muss lachen bei der Behauptung, viele Entwickler würden sich Sorgen um die Performance von "text-wrap: pretty" machen. Es ist schwer zu glauben, dass es so viele Entwickler gibt, die sich Gedanken über die Performance von Textumbruch machen
• Der Inhalt der Demo ist auf Englisch. Es ist merkwürdiges Englisch. Das hat nichts mit dem Thema zu tun und ist nur relevant, wenn man Zeilenumbrüche verbessern will, indem man Wörter neu anordnet
• Ich freue mich darauf, dass diese Funktion zu E-Readern hinzugefügt wird. E-Reader haben keine guten Layout-Engines
• Es wurde viel zu wenig Mühe und Aufmerksamkeit darauf verwendet, Online-Texte schön zu gestalten. Das Web hat Text um Jahrhunderte zurückgeworfen. Diese Funktion ist willkommen
• In Safari Technology Preview wurde Unterstützung für "text-wrap: pretty" hinzugefügt und bringt ein nie dagewesenes Maß an Raffinesse in die Webtypografie. Laut caniuse.com unterstützt Chrome diese Funktion bereits seit September 2023. Es ist schwer zu verstehen, was hier „nie dagewesen“ sein soll
• Weiß jemand, was der Unterschied zwischen "text-align: justify" und "text-wrap: pretty" ist? In Chrome wirkt "text-wrap: pretty" deutlich weicher. Ich habe geprüft, ob es sinnvoll wäre, beides im Fließtext eines durchschnittlichen Blogs zu verwenden, und es scheint jeweils eigene Veränderungen zu bewirken
• Diese Funktion ist großartig. Es ist nicht überraschend, dass sie sich auf kurze letzte Zeilen und ungleichmäßige Kanten konzentriert. Allerdings nimmt sie noch keine Anpassungen vor, um Flüsse zu verhindern. Es ist schwer vorstellbar, wie man eine Metrik definieren sollte, die einen Fluss beschreibt. Ich frage mich, ob jemand eine clevere Metrik erfunden hat, die tatsächlich funktioniert
• Ein Absatz, der eigentlich verwaiste Wörter vermeiden soll, lässt das Wort large allein stehen. Mit "text-wrap: pretty" wird das behoben
• Der Zweck von "pretty", wie ihn die CSS Working Group entworfen hat, besteht darin, dass jeder Browser das tut, was er zur Verbesserung des Textumbruchs tun kann. Es zwingt nicht alle Browser dazu, dieselben Entscheidungen zu treffen. Wegen der Art, wie Chrome es implementiert hat, erwarten viele Webentwickler, dass dieser Wert dazu dient, kurze letzte Zeilen zu vermeiden. Das ist jedoch nicht die Absicht
• Ich verwende "text-wrap: balance" bereits für Überschriften. Ich habe versucht, bestimmte Wörter zusammenzuhalten, um schlechten Umbruch zu vermeiden. "text-wrap: pretty" wird ähnliche Probleme im Fließtext lösen