Textlayout und Lesbarkeit verbessern

Das Layout von Text, insbesondere am Ende von Zeilen und Absätzen, kann die Lesbarkeit und Ästhetik einer Seite beeinflussen. CSS bietet mehrere Optionen für den Textumbruch, die für bestimmte Anwendungsfälle nützlich sein können.

Verwenden Sie für kurze Textblöcke wie Überschriften text-wrap: balance. Diese Property weist den Browser an, Text so gleichmäßig wie möglich auf die Zeilen zu verteilen, um ein symmetrischeres Erscheinungsbild zu erzielen.

Mit der CSS-Eigenschaft text-wrap: pretty können Sie die typografische Qualität von Fließtext verbessern, indem Sie einen komplexeren Umbruchalgorithmus aktivieren. Sie wurde speziell entwickelt, um „Hurenkinder“ (einzelne Wörter in der letzten Zeile eines Absatzes) zu vermeiden und bei langen Textblöcken einen ansprechenderen Flattersatz zu erzeugen.

Implementierung

1. Textelemente identifizieren:

Wählen Sie für text-wrap: balance kurze Textblöcke wie Überschriften und Tabellenüberschriften aus. Vermeiden Sie Elemente mit sichtbaren Feldern wie Rahmen oder Hintergründen, da dies zu unerwarteten, visuell leeren Bereichen im Layout führen kann.

Wählen Sie für text-wrap: pretty Elemente aus, die möglicherweise lange Textabschnitte enthalten, in denen verwaiste Wörter (Runts) oder schlechte Zeilenumbrüche am auffälligsten sind. Dazu gehören die folgenden Elemente:

• <p>
• <blockquote>
• <li>
• Alle anderen Elemente, die potenziell lange Textabschnitte enthalten.

Die richtige Wrapping-Methode auswählen

2. Gewähltes Wrapping anwenden:

Wenden Sie text-wrap: balance speziell auf kurze, mehrzeilige Elemente wie Überschriften (h1–h6), Unterüberschriften oder Zitate an.

/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
  /* Enables balanced line-breaking logic */
  text-wrap: balance;
}

Verwenden Sie text-wrap: pretty, um einen optimierten Algorithmus zu aktivieren, der die letzten Zeilen eines Absatzes auswertet, um die besten Umbruchpunkte zu finden.

/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
  /* Enables pretty line-breaking logic for body copy */
  text-wrap: pretty;
}

Kritische Einschränkungen und Leistung

text-wrap: balance

• Zeilenlimit: Browser legen ein Limit für die Anzahl der Zeilen fest, die sie ausgleichen, um die Leistung aufrechtzuerhalten (normalerweise 6 Zeilen in Chromium und 10 Zeilen in Firefox). Wenn der Text dieses Limit überschreitet, wird im Browser das Standardverhalten für wrap verwendet. Vermeiden Sie die Verwendung von text-wrap: balance für Textblöcke, die diese Limits wahrscheinlich überschreiten.
• Gezielte Anwendung: Wenden Sie text-wrap: balance NICHT global an (z.B. * { text-wrap: balance; }). Der von Browsern verwendete iterative Algorithmus für die „binäre Suche“ ist rechenintensiv. Beschränken Sie die Verwendung auf bestimmte, kurze Textelemente.
• Interaktion mit der Breite: text-wrap: balance ändert nicht die Breite des Containers (inline-size). Es wirkt sich nur darauf aus, wie Text innerhalb dieser Breite umbrochen wird. Dadurch kann am Ende des Containers leerer Platz entstehen, was sich auf Layouts auswirken kann, die auf Textblöcken in voller Breite basieren.

text-wrap: pretty

• Leistung im Vergleich zur Qualität: OBLIGATORISCH: text-wrap: pretty ist rechenintensiver als der Standardalgorithmus wrap (Greedy), da mehrere Zeilen (in der Regel die letzten vier) ausgewertet werden, um die Umbruchpunkte zu optimieren. Vermeiden Sie es, das Attribut global auf jedes Element anzuwenden, wenn Ihre Seite sehr viel Text enthält.
• Am besten für mehrzeiligen Text geeignet: Die Vorteile von pretty sind am deutlichsten in Absätzen mit drei oder mehr Zeilen zu sehen. Bei kurzen, einzeiligen Texten hat sie kaum oder gar keine Auswirkungen.
• Browserspezifisches Verhalten: Beachten Sie, dass die Implementierungsdetails variieren. Chromium-basierte Browser konzentrieren sich in der Regel auf die letzten vier Zeilen, während andere Engines möglicherweise den gesamten Absatz auswerten.

Fallback-Strategien

In Browsern, die text-wrap: balance oder text-wrap: pretty nicht unterstützen, wird die Property ignoriert und der Text wird gemäß dem Standardverhalten von wrap umgebrochen. Dies ist eine progressive Verbesserung, die sich bei Bedarf auf die Standardtypografie zurückstuft. So bleiben Ihre Inhalte in allen Browsern gut lesbar und bieten gleichzeitig eine bessere Nutzererfahrung in Browsern, die die Funktion unterstützen.

Verwenden Sie für kritische Layouts, bei denen ein optimiertes Textlayout erforderlich ist, eine JavaScript-Bibliothek. Beachten Sie jedoch, dass dies langsam sein und Leistungsprobleme verursachen kann.