Eine klassische Typografietechnik für Zeilenumbrüche für ausgewogene Textblöcke ist jetzt in CSS verfügbar.
Der Wert balance für text-wrap ist Teil von CSS-Textebene 4. Sehen Sie sich die Beispiele in diesem Beitrag an, um zu erfahren, wie Sie Ihre Textlayouts mit einer einzigen CSS-Zeile erheblich verbessern können.
Ohne text-wrap: balance haben Designer, Content-Editoren und Publisher wenige Tools, mit denen sie die Verteilung von Linien ändern können. Die besten verfügbaren Optionen sind <wbr> oder ­, um Textlayouts dabei zu unterstützen, intelligentere Entscheidungen darüber zu treffen, wo Linien und Wörter zu trennen sind.
Als Entwickler kennen Sie die endgültige Größe, Schriftgröße oder Sprache einer Überschrift oder eines Absatzes nicht. Alle Variablen, die für eine effektive und ästhetische Behandlung des Textumbruchs erforderlich sind, befinden sich im Browser. Deshalb sehen wir den Anzeigentitel-Wrapping wie in der folgenden Abbildung:
.unbalanced {
max-inline-size: 50ch;
}
Mit text-wrap: balance von CSS Text 4 können Sie den Browser anfordern, um die beste Lösung für den Zeilenumbruch für den Text zu ermitteln. Der Browser kennt alle Faktoren wie Schriftgröße, Sprache und zugewiesener Fläche.
Die Ergebnisse der ausgewogenen Browserumbrüche im Browser sehen heute so aus:
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
Es ist hilfreich, sie nebeneinander, ruhig und ohne Overlays mit Debug-Informationen anzuzeigen.
Ihr Auge sollte mit dem ausgewogenen Textblock viel zufriedener sein. Sie weckt die Aufmerksamkeit besser und ist insgesamt leichter zu lesen.
Das richtige Gleichgewicht finden
Sie ist das Erste, was die Leser sehen. Sie sollten optisch ansprechend und einfach zu lesen sein. Dies erregt die Aufmerksamkeit der Nutzenden und vermittelt ein Gefühl von Qualität und Sicherheit. Eine gute Typografie gibt den Lesenden Selbstvertrauen und ermutigt sie, weiterzulesen.
Traditionell wurde diese Aufgabe handschriftlich oder optisch erledigt, da die Designschaffenden den Text dem Auge und nicht den mathematischen Anforderungen gerecht werden sollen. Dieses Thema wird oft als metrische oder optische Ausrichtung bezeichnet. Bei großen Publikationen wie der New York Times ist die Ausbalancierung von Überschriften ein sehr wichtiges Detail der Nutzerfreundlichkeit.
Die Balance von Text in der Typografie gibt es schon in den frühen Zeiten des Drucks, als die Drucker noch Buchstaben von Hand platzierten. Mit der Weiterentwicklung von Tools und Techniken haben sich auch die Ergebnisse weiterentwickelt. Heutzutage verwenden Designer Farbe, Gewicht, Größe und mehr, um Text in ihren Designs ausbalancieren zu können.
Im Web sind jedoch weniger Steuerelemente verfügbar, da die Größe und Farbe des Dokuments je nach Nutzer angepasst werden. text-wrap: balance bringt die Kunst, Text auf automatisierte Weise im Web auszubalancieren, und baut auf der Arbeit und den Traditionen von Designern der Druckbranche auf.
Anzeigentitel ausgleichen
Dies ist und sollte der primäre Anwendungsfall für text-wrap: balance sein. Zeichnen Sie das Auge mit der Größe und sorgen Sie dafür, dass es symmetrisch und lesbar für das Auge lesbar ist. Verwenden Sie folgenden CSS-Code, um für alle Anzeigentitel einen ausgeglichenen Textumbruch festzulegen:
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}
Wenn Sie diesen Stil nur anwenden, erhalten Sie möglicherweise nicht die erwarteten Ergebnisse, da der Text umgebrochen werden muss und daher von einem beliebigen Ort aus eine maximale Zeilenlänge angewendet werden muss. In den Beispielen in diesem Beitrag siehst du ein max-inline-size-Element. Dieser Stil ähnelt max-width, kann aber einmal für jede Sprache festgelegt werden.
Beschränkungen
Die Aufgabe, Text ins Gleichgewicht zu bringen, ist nicht kostenlos. Der Browser muss Iterationen durchlaufen, um die am besten ausgewogene Wrapping-Lösung zu ermitteln. Diese Leistungskosten werden durch eine Regel gemindert. Sie funktioniert nur für sechs Zeilen und weniger.
Hinweise zur Leistung
Es ist keine gute Idee, den Textumbruch auf das gesamte Design anzuwenden. Aufgrund der maximal zulässigen sechs Zeilen ist die Anfrage verschwendet und kann die Renderinggeschwindigkeit der Seite beeinträchtigen.
* {
text-wrap: balance;
}
h1, h2, h3, h4, h5, h6, blockquote {
text-wrap: balance;
}
Ein großer Vorteil dieser Funktion ist, dass der Textumbruch durch das Laden von Schriftarten nicht länger abgewartet werden muss, wie es aktuell bei JavaScript der Fall wäre. Der Browser kümmert sich darum.
Interaktionen mit der Property „white-space“
Der Balancing-Text konkurriert mit dem Attribut white-space, da der eine den Zeilenumbruch nicht und der andere ein ausgewogenes Wrapping anfordert. Sie können dies umgehen, indem Sie die Freiraumeigenschaft aufheben. Anschließend kann wieder das ausgeglichene Wrapping angewendet werden.
.balanced {
white-space: unset;
text-wrap: balance;
}
Beim Ausgleich wird die Inline-Größe des Elements nicht geändert
Einige der JavaScript-Lösungen für den ausgeglichenen Textumbruch bieten einen Vorteil, da sie den max-width des beinhaltenden Elements selbst ändern. Ein zusätzlicher Vorteil besteht darin, dass es auf den ausbalancierten Block „schrumpft“ umschlossen ist. text-wrap:
balance hat diesen Effekt nicht und ist in diesem Beispiel zu sehen:
Siehst du, dass die in den Entwicklertools gezeigte Breite am Ende eine Menge zusätzlichen Platz hat?
Das liegt daran, dass es sich nur um einen Umbruchstil handelt, nicht um einen Stil, der die Größe ändert. Deshalb gibt es einige Szenarien, in denen text-wrap: balance meiner Meinung nach nicht besonders gut ist. Das können beispielsweise Überschriften innerhalb einer Karte oder eines Containers mit Rahmen oder Schatten sein.
Durch den ausgeglichenen Textumbruch entsteht ironisch ein Ungleichgewicht zum enthaltenen Element.
Kurze Erklärung der vom Browser verwendeten Technik
Der Browser führt praktisch eine binäre Suche für die kleinste Breite durch, die keine zusätzlichen Zeilen verursacht und bei einem CSS-Pixel (nicht bei einem Anzeigepixel) stoppt. Um die Schritte bei der binären Suche weiter zu minimieren, beginnt der Browser mit 80% der durchschnittlichen Linienbreite.