CSS text-wrap: Balance

Für CSS ist eine klassische Typografietechnik zur manuellen Erstellung von Zeilenumbrüchen für ausgewogene Textblöcke verfügbar.

Adam Argyle

Der Wert balance für text-wrap ist Teil von CSS-Textebene 4. In den Beispielen in diesem Beitrag erfahren Sie, können Sie Ihre Textlayouts erheblich verbessern.

Ohne text-wrap: balance; Designschaffende, Redakteure und Publisher wenige Tools um die Ausbalancierung der Linien zu ändern. Die besten Optionen sind die Verwendung <wbr> oder ­, um zu helfen in Textlayouts intelligentere Entscheidungen darüber 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 eines oder Absatz. Alle Variablen, die für eine effektive und ästhetische Gestaltung erforderlich sind des Textumbruchs im Browser. Daher sehen wir die Überschrift wie in der folgenden Abbildung:

</ph> <ph type="x-smartling-placeholder">

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

Mit text-wrap: balance aus CSS-Text 4 können Sie den Browser auffordern, finden Sie die beste ausgeglichene Lösung für den Zeilenumbruch. Der Browser kennt alle Faktoren, wie Schriftgröße, Sprache und zugewiesene Fläche. Die Ergebnisse des im Browser ausgeglichenen Textumbruchs sehen heute so aus:

</ph> <ph type="x-smartling-placeholder">

.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. Es schnappt und ist insgesamt leichter zu lesen.

Auf der Suche nach dem perfekten Gleichgewicht

Die Schlagzeilen sind das Erste, was die Leser sehen: sollten sie visuell ansprechend sein leicht zu lesen ist. Dies weckt die Aufmerksamkeit der Nutzenden, vermittelt einen Eindruck von Qualität und Sicherheit. Eine gute Typografie gibt den Lesern Selbstvertrauen und ermutigt sie, weiterlesen.

Traditionell wurde diese Aufgabe manuell oder optisch als Designfachkraft erledigt Der Ausgleich des Textes möchte dem Auge erfreuen und nicht der Mathematik. Dieses Thema ist oft wird als „metrisches und optische Ausrichtung“ bezeichnet. Für große Publikationen wie die New York Times Die Abwägung von Anzeigentiteln ist ein sehr wichtiges Detail der User Experience.

Das Ausbalancieren von Text in der Typografie reicht bis in die frühen Tage des Drucks zurück, als Drucker von Hand Buchstaben platziert. Mit der Weiterentwicklung der Tools und Techniken haben sich auch die Ergebnisse weiterentwickelt. Heutzutage nutzen Designschaffende Farbe, Gewicht, Größe und mehr, um Text in für ihre Designs.

Im Web gibt es allerdings weniger Kontrolle, da sich das Dokument je nach Nutzenden anpassen. text-wrap: balance vereint die Kunst von den automatischen Ausgleich von Text in das Web, baut auf der Arbeit und Traditionen von Designern aus der Printbranche.

Anzeigentitel ausgleichen

Dies ist der primäre Anwendungsfall für text-wrap: balance. Unentschieden symmetrisch an die Größe anpassen und für das Auge gut lesbar sein. Festlegen mit dem folgenden CSS-Code in einen ausgewogenen Textumbruch einfügen:

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

Das bloße Anwenden dieses Stils führt möglicherweise nicht zu den gewünschten Ergebnissen, da der Der Text muss umgebrochen werden, sodass eine maximale Zeilenlänge vom irgendwoher. Sie sehen eine max-inline-size Stil basierend auf den Beispielen in diesem Beitrag. Dieser Stil entspricht max-width, kann aber geändert werden. einmal pro Sprache.

Beschränkungen

Die Aufgabe, Text auszugleichen, ist nicht kostenlos. Der Browser muss Iterationen, um die beste ausgewogene Verpackungslösung zu ermitteln. Diese Leistung werden die Kosten durch eine Regel gemindert, sie funktioniert nur für sechs umgebrochene Zeilen und unter.

Hinweise zur Leistung

Es ist keine gute Idee, den Ausgleich zwischen Textumbruch auf das gesamte Design anzuwenden. Es ist ein aufgrund der Beschränkung von sechs Zeilen verschwendete Anfrage. Dies kann sich auf die Renderinggeschwindigkeit 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 müssen, mit dem Laden von Schriftarten, wie Sie es heute mit JavaScript tun. Die Der Browser kümmert sich darum!

Interaktionen mit der Eigenschaft white-space

Der ausgewogene Text konkurriert white-space da die eine keine Wrapping-Funktion anfordert und die andere ausgewogenen Wrapping. Sie können dies umgehen, indem Sie die Leerraumeigenschaft aufheben. des ausgewogenen Wrappings noch einmal 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 bieten einen Vorteil für ausgewogenen Text. Wrapping, da sie den max-width des beinhaltenden Elements selbst ändern. Dieses hat den zusätzlichen Vorteil, dass sie verpackt sind. zum ausgewogenen Block. 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 gibt es einige Szenarien, in denen text-wrap: balance nicht so toll ist, aus meiner Sicht am wenigsten. 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, keine zusätzlichen Zeilen, sondern nur ein Pixel). Um die Schritte der binären Suche weiter zu minimieren, beginnt der Browser. 80% der durchschnittlichen Linienbreite.