CSS text-wrap: schöne

Opt-in für den optimierten Textumbruch für mehr Schönheit statt Schnelligkeit

Adam Argyle

Ab Chrome 117 können Sie eine neue Funktion für den Textumbruch verwenden – text-wrap: pretty ab CSS-Textebene 4.

p {
  text-wrap: pretty;
}

https://codepen.io/web-dot-dev/pen/yLGmzLJ

Typografische Witwen und Waisenkinder sind einzelne Wörter, die am Ende eines Absatzes oder Textblocks stehen. Witwen sind Wörter, die ganz oben in einem Textblock stehen, und Waisen am Ende eines Textblocks. Sie stören uns beim Überfliegen des Textes, sodass der Inhalt schwerer zu lesen ist. Einige Designer vermeiden dies um jeden Preis und unternehmen große Anstrengungen, um dies zu verhindern.

Bild aus Google Fonts – Witwen & Waisenkinder

Ab Chrome 117 können Waisenkinder mit einer CSS-Zeile vermieden werden: text-wrap: pretty.

Hinweis:text-wrap: pretty unterscheidet sich von der CSS-Eigenschaft orphans, die bei Verwendung eines mehrspaltigen CSS-Layouts relevant ist. Außerdem sind in pretty nur Waisen und nicht Witwen zu sehen.

Die Funktion sorgt nicht nur dafür, dass Absätze nicht mit einem einzelnen Wort enden, sondern passt auch die Verwendung von Bindestrichen an, wenn aufeinanderfolgende Zeilen mit Bindestrich am Ende eines Absatzes stehen, oder vorherige Zeilen werden angepasst, um Platz zu schaffen. Außerdem wird die Textausrichtung entsprechend angepasst. text-wrap: pretty dient allgemein dazu, den Zeilenumbruch und die Textumbrüche zu verbessern. Der Schwerpunkt liegt derzeit auf Waisen. In Zukunft bietet text-wrap: pretty möglicherweise weitere Verbesserungen.

Bild aus Warum Sie Waisen aus Ihrem Text entfernen sollten.

Die Funktion text-wrap: balance verhindert keine Verwaisung, sorgt aber dafür, dass der Text so umbrochen wird, dass ein harmonischer Textblock entsteht. Ich persönlich verwende balance für Überschriften und pretty für Absätze.

Wenn Sie sich für die Details des Algorithmus, der zur Bestimmung der optimalen Anzahl von Zeilen verwendet wird, oder für Leistungsaspekte interessieren, finden Sie hier einen Link zum Designdokument, das vom Entwickler des Features erstellt wurde, hinter der Funktion Koji Ishii.

Wenn du weitere Verbesserungen oder Vorschläge zur Verbesserung deiner Richtlinien hast, freuen wir uns, sie zu hören. Melden Sie ein Problem mit den Details und Beispielen für zulässige und fehlerhafte Zeilenumbrüche im Chromium-Tracker für Programmfehler. Wir melden uns dann bei Ihnen.