Für CSS ist eine klassische Typografietechnik zur manuellen Erstellung von Zeilenumbrüchen für ausgewogene Textblöcke verfügbar.
Der Wert balance für text-wrap ist Teil von CSS-Textebene 4. In den Beispielen in diesem Beitrag erfahren Sie, wie Sie
mit dieser CSS-Zeile Ihre Textlayouts erheblich verbessern können.
Ohne text-wrap: balance stehen Designer, Content-Editoren und Publisher wenige Tools zur Verfügung, um die Ausgewogenheit der Linien zu ändern. Die besten verfügbaren Optionen sind die Verwendung von <wbr> oder ­, um Textlayouts fundiertere Entscheidungen darüber zu treffen, wo Zeilen und Wörter am besten platziert werden sollen.
Als Entwickler kennen Sie die endgültige Größe, die Schriftgröße oder die Sprache einer Überschrift oder eines Absatzes nicht. Alle Variablen, die für einen effektiven und ästhetischen Textumbruch benötigt werden, befinden sich im Browser. Deshalb wird der Anzeigentitel wie in der folgenden Abbildung umgebrochen:
.unbalanced {
max-inline-size: 50ch;
}
Mit text-wrap: balance aus CSS-Text 4 können Sie den Browser anfordern, um die beste abgestimmte Lösung für Zeilenumbruch für den Text zu finden. Der Browser kennt alle Faktoren wie Schriftgröße, Sprache und zugewiesene Fläche.
Die Ergebnisse des im Browser ausgeglichenen Textumbruchs sehen heute so aus:
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
Es ist hilfreich, sie nebeneinander, ruhig und ohne überlagerte Debug-Informationen anzuzeigen.
Ihr Auge sollte mit dem ausgewogenen Textblock zufriedener sein. Sie erregt die Aufmerksamkeit und ist insgesamt leichter zu lesen.
Auf der Suche nach dem perfekten Gleichgewicht
Überschriften sind das Erste, was die Leser sehen. Sie sollten visuell ansprechend und leicht zu lesen sein. Dies weckt die Aufmerksamkeit der Nutzer und schafft ein Gefühl von Qualität und Sicherheit. Eine gute Typografie gibt den Lesern Selbstvertrauen und ermutigt sie, weiterzulesen.
Traditionell wurde diese Aufgabe manuell oder optisch erledigt, da die Designschaffenden, die den Text balancieren, dem Auge nicht gerecht werden wollen, nicht der Mathematik. Dieses Thema wird oft als metrische und optische Ausrichtung bezeichnet. Für große Publikationen wie die New York Times ist die Abwägung der Schlagzeilen ein sehr wichtiges Detail für die Nutzererfahrung.
Das Ausbalancieren von Text in der Typografie geht auf die frühen Tage des Drucks zurück, als Drucker Briefe von Hand platzierten. Mit der Weiterentwicklung der Tools und Techniken haben sich auch die Ergebnisse weiterentwickelt. Heutzutage nutzen Designschaffende Farbe, Gewicht, Größe usw., um Text in ihren Designs auszubalancieren.
Im Web haben Sie jedoch weniger Kontrolle, da Größen und Farben des Dokuments je nach Nutzer geändert werden. text-wrap: balance ermöglicht das automatisierte Ausgleichen von Text im Web und baut dabei auf der Arbeit und den Traditionen von Designern aus der Printbranche auf.
Anzeigentitel ausgleichen
Dies ist der primäre Anwendungsfall für text-wrap: balance. Zeichnen Sie das Auge mit der richtigen Größe und achten Sie darauf, dass es symmetrisch und lesbar ist, damit es vom Auge gelesen werden kann. Legen Sie mit folgendem CSS für alle Anzeigentitel einen ausgeglichenen Textumbruch fest:
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}
Wenn Sie diesen Stil lediglich anwenden, erhalten Sie möglicherweise nicht die erwarteten Ergebnisse, da der Text umgebrochen werden muss und daher an beliebiger Stelle eine maximale Zeilenlänge festgelegt werden muss. Für die Beispiele in diesem Beitrag wird ein max-inline-size angezeigt. 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 Iterationen durchlaufen, um die beste ausgewogene Wrapping-Lösung zu ermitteln. Diese Leistungskosten werden durch eine Regel gemindert. Sie funktioniert nur für sechs umschlossene Zeilen und weniger.
Hinweise zur Leistung
Es ist keine gute Idee, den Ausgleich zwischen Textumbruch auf das gesamte Design anzuwenden. Aufgrund des Limits von sechs Zeilen ist die Anfrage eine überflüssige Anfrage, die sich auf die Renderinggeschwindigkeit der Seite auswirken kann.
* {
text-wrap: balance;
}
h1, h2, h3, h4, h5, h6, blockquote {
text-wrap: balance;
}
Ein großer Vorteil dieser Funktion ist, dass Sie beim Laden von Textumbrüchen keine Zeit warten müssen, wie es bei JavaScript üblich ist. Der Browser kümmert sich darum!
Interaktionen mit der Eigenschaft white-space
Der Balancing-Text konkurriert mit dem Attribut white-space, da bei dem einen kein Zeilenumbruch und im anderen ein ausgewogenes Wrapping angefordert wird. Sie können dies umgehen, indem Sie das Leerraumattribut aufheben. Anschließend kann die ausgewogene Zusammenfassung wieder angewendet werden.
.balanced {
white-space: unset;
text-wrap: balance;
}
Durch den Ausgleich wird die Inline-Größe des Elements nicht geändert.
Einige JavaScript-Lösungen für den ausgewogenen Textumbruch bieten einen Vorteil, da sie den max-width des enthaltenden Elements selbst ändern. Dies hat den zusätzlichen Vorteil, dass sie für den ausgeglichenen Block "verschrumpft" wird. text-wrap:
balance hat diesen Effekt nicht und ist in diesem Beispiel zu sehen:
Sehen Sie, wie die Breite, die in den Entwicklertools angezeigt wird, einen Haufen zusätzlicher Platz am Ende hat?
Das liegt daran, dass es sich nur um einen Umbruchstil und keinen um einen Größenänderungsstil handelt. Aus diesem Grund gibt es einige Szenarien, in denen text-wrap: balance meiner Meinung nach nicht so gut ist. Zum Beispiel Überschriften innerhalb einer Karte (oder eines Containers mit Rahmen oder Schatten).
Ein ausgewogener Textumbruch führt ironischerweise zu Ungleichgewichten zum enthaltenen Element.
Eine kurze Erklärung der Browsermethode
Der Browser führt effektiv eine binäre Suche für die kleinste Breite durch, bei der keine zusätzlichen Zeilen entstehen, und stoppt bei einem CSS-Pixel (kein Anzeigepixel). Um die Schritte bei der binären Suche weiter zu minimieren, beginnt der Browser mit 80% der durchschnittlichen Linienbreite.