CSS-Text-Wrap: balance

Eine klassische Typografietechnik, bei der Zeilenumbrüche für ausgewogene Textblöcke manuell erstellt werden, ist jetzt in CSS verfügbar.

Adam Argyle

Der balance-Wert für text-wrap ist Teil von CSS Text Level 4. In den Beispielen in diesem Beitrag erfahren Sie, wie Sie mit dieser einen Zeile CSS Ihre Textlayouts erheblich verbessern können.

Ohne text-wrap: balance haben Designer, Content-Editoren und Publisher nur wenige Tools, um die Art und Weise zu ändern, wie Zeilen ausgeglichen werden. Die besten verfügbaren Optionen sind <wbr> oder ­, um Textlayouts zu unterstützen und fundiertere Entscheidungen darüber zu treffen, wo Zeilen und Wörter umgebrochen werden sollen.

Als Entwickler kennen Sie die endgültige Größe, Schriftgröße oder sogar Sprache einer Überschrift oder eines Absatzes nicht. Alle Variablen, die für eine effektive und ästhetische Behandlung des Zeilenumbruchs erforderlich sind, sind im Browser verfügbar. Daher wird der Titel wie im folgenden Bild umgebrochen:

.unbalanced {
  max-inline-size: 50ch;
}

Mit text-wrap: balance aus CSS Text 4 können Sie den Browser auffordern, die beste Lösung für den Zeilenumbruch für den Text zu finden. Der Browser kennt alle Faktoren wie Schriftgröße, Sprache und zugewiesener Bereich. So sieht der browserausgeglichene Zeilenumbruch heute aus:

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

Es ist hilfreich, sie nebeneinander, statisch und ohne Debugging-Informationen zu sehen.

Der ausgeglichene Textblock ist viel angenehmer für das Auge, zieht die Aufmerksamkeit besser auf sich und ist insgesamt leichter zu lesen.

Auf der Suche nach dem perfekten Gleichgewicht

Überschriften sind das Erste, was Leser sehen. Sie sollten visuell ansprechend und leicht lesbar sein. So wird die Aufmerksamkeit der Nutzer geweckt und ein Gefühl von Qualität und Sicherheit vermittelt. Eine gute Typografie schafft Vertrauen bei den Lesern und regt sie zum Weiterlesen an.

Normalerweise wurde diese Aufgabe manuell oder optisch erledigt, da der Designer, der den Text ausgleicht, das Auge und nicht die Mathematik ansprechen möchte. Dieses Thema wird oft als „Abstimmung von Messwerten und Optik“ bezeichnet. Bei großen Publikationen wie der New York Times ist die Ausgewogenheit der Überschriften ein sehr wichtiges Detail für die Nutzerfreundlichkeit.

Das Ausgleichen von Text in der Typografie geht auf die Anfänge des Drucks zurück, als Drucker Buchstaben von Hand platzierten. Mit der Weiterentwicklung von Tools und Techniken haben sich auch die Ergebnisse verbessert. Heutzutage haben Designer viele Möglichkeiten, Text in ihren Designs zu gestalten, z. B. durch Farbe, Schriftstärke und Größe.

Im Web haben Sie jedoch weniger Kontrolle, da sich die Größe und die Farben des Dokuments je nach Nutzer ändern. text-wrap: balance bringt die Kunst des Ausgleichs von Text auf das Web und baut auf der Arbeit und den Traditionen von Designern aus der Druckbranche auf.

Anzeigentitel ausgleichen

Das ist und sollte der primäre Anwendungsfall für text-wrap: balance sein. Stellen Sie das Auge in der richtigen Größe dar und sorgen Sie für Symmetrie und Lesbarkeit. Legen Sie für alle Überschriften mit dem folgenden CSS einen ausgeglichenen Zeilenumbruch fest:

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

Wenn Sie diesen Stil einfach anwenden, erhalten Sie möglicherweise nicht die erwarteten Ergebnisse, da der Text umgebrochen werden muss und daher eine maximale Zeilenlänge festgelegt werden muss. In den Beispielen in diesem Beitrag sehen Sie die Einstellung max-inline-size. Dieser Stil ähnelt max-width, kann aber einmal für jede Sprache festgelegt werden.

Beschränkungen

Die Aufgabe, Text auszugleichen, ist nicht kostenlos. Der Browser muss mehrere Iterationen durchlaufen, um die beste Lösung für den Zeilenumbruch zu finden. Diese Leistungseinbußen werden durch eine Regel gemindert, die nur für maximal sechs umgebrochene Zeilen funktioniert.

Hinweise zur Leistung

Es ist nicht ratsam, den Ausgleich von Textumbrüchen auf das gesamte Design anzuwenden. Es handelt sich um eine verschwendete Anfrage aufgrund der Beschränkung auf sechs Zeilen. Dies kann sich auf die Rendering-Geschwindigkeit der Seite auswirken.

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

Ein großer Vorteil dieser Funktion ist, dass Sie nicht warten und den Textumbruch mit dem Laden von Schriftarten abstimmen müssen, wie es heute mit JavaScript der Fall ist. Der Browser kümmert sich darum.

Interaktionen mit dem Attribut white-space

Der Ausgleichstext steht im Konflikt mit der Eigenschaft white-space, da in einem Fall kein Umbruch und im anderen ein ausgeglichener Umbruch angefordert wird. Sie können dieses Problem beheben, indem Sie die Eigenschaft für den Leerraum aufheben. Dann kann der ausgeglichene Zeilenumbruch wieder angewendet werden.

.balanced {
  white-space: unset;
  text-wrap: balance;
}

Durch den Ausgleich ändert sich die Inline-Größe des Elements nicht.

Einige JavaScript-Lösungen für den ausgewogenen Zeilenumbruch von Text haben den Vorteil, dass sie die max-width des enthaltenden Elements selbst ändern. Das hat den zusätzlichen Vorteil, dass es an den ausgewogenen Block angepasst wird. text-wrap: balance hat diesen Effekt nicht, wie in diesem Beispiel zu sehen ist:

Sehen Sie, wie die in den Entwicklertools angezeigte Breite am Ende viel zusätzlichen Platz hat? Das liegt daran, dass es sich nur um einen Umbruchstil und nicht um einen Stil handelt, mit dem die Größe geändert wird. Aus diesem Grund gibt es einige Szenarien, in denen text-wrap: balance meiner Meinung nach nicht so gut ist. Beispiele sind Überschriften in einer Karte (oder einem Container mit Rahmen oder Schatten).

Ironischerweise führt der ausgeglichene Zeilenumbruch zu einem Ungleichgewicht des enthaltenen Elements.

Eine kurze Erklärung der vom Browser verwendeten Technik

Der Browser führt effektiv eine binäre Suche nach der kleinsten Breite durch, die keine zusätzlichen Zeilen verursacht, und stoppt bei einem CSS-Pixel (nicht bei einem Displaypixel). Um die Anzahl der Schritte bei der binären Suche weiter zu minimieren, beginnt der Browser mit 80% der durchschnittlichen Linienbreite.