CSS text-wrap: Balance

Eine klassische Typografietechnik, bei der Zeilenumbrüche für ausgewogene Textblöcke manuell erstellt werden, wird in CSS übernommen.

Adam Argyle

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

Ohne text-wrap: balance haben Designer, Content-Bearbeiter und Publisher nur wenige Tools, um die Balance von Linien zu ändern. Die besten Optionen sind <wbr> oder ­, um fundiertere Entscheidungen darüber zu treffen, wo Zeilen und Wörter getrennt 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 Textumbruch-Behandlung erforderlich sind, befinden sich im Browser. Deshalb sehen wir die Überschrift wie in der folgenden Abbildung:

.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 zugewiesener Bereich. Das Ergebnis des browserbasierten Textumbruchs sieht heute so aus:

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

Es ist hilfreich, sie nebeneinander, ruhig und ohne eingeblendete Debug-Informationen zu sehen.

Der ausgeglichene Textblock sollte jetzt viel ansprechender sein. Sie 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 gut lesbar sein. Das erregt die Aufmerksamkeit der Nutzer und vermittelt ein Gefühl 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 geht auf die Anfänge des Druckens zurück, als Drucker Buchstaben von Hand platzierten. 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 sind jedoch weniger Einstellungen verfügbar, da die Größe und die Farben des Dokuments je nach Nutzer variieren. 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 und sollte der primäre Anwendungsfall für text-wrap: balance sein. Zeichnen Sie das Auge in der richtigen Größe und machen Sie es symmetrisch und gut lesbar. Legen Sie mit dem folgenden CSS für alle Überschriften einen ausgewogenen Textumbruch fest:

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

Wenn Sie nur diesen Stil anwenden, erzielen Sie möglicherweise nicht die gewünschten Ergebnisse, da der Text umgebrochen werden muss und daher eine maximale Zeilenlänge festgelegt werden muss. 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 auszubalancieren, 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 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 und den Textumbruch mit dem Laden der Schriftart abstimmen müssen, wie Sie es derzeit mit JavaScript tun. Die Der Browser kümmert sich darum!

Interaktionen mit der Property white-space

Der ausgewogene Text konkurriert white-space da die eine keine Wrapping-Funktion anfordert und die andere ausgewogenen Wrapping. Um dieses Problem zu beheben, können Sie die Property „Weißraum“ deaktivieren.

.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 ändern. Ein weiterer Vorteil ist, dass die Daten so um den ausgewogenen Block herum „verpackt“ werden. 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ätzlichen 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 schafft ironischerweise ein Ungleichgewicht im enthaltenen Element.

Eine kurze Erläuterung der vom Browser verwendeten Technik

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