CSS text-wrap: balance

Chrome Canary includes a new feature—text-wrap: balance from CSS Text Level
4. To check it out, enable
chrome://flags/#enable-experimental-web-platform-features,
and then take a look at the examples in this post to learn how this one line of
CSS can massively improve your text layouts.

Without text-wrap: balance; designers, content editors and publishers have
few tools
to change the way lines are balanced.. The best options available being to use
<wbr> or
­ to help
guide text layouts into smarter decisions about where to break lines and words.

As a developer, you don’t know the final size, font size, or even language of a
headline or paragraph. All the variables needed for an effective and aesthetic
treatment of text wrapping, are in the browser. This is why we see headline
wrapping as in the following image:

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

With text-wrap: balance from CSS Text
4, you can request the browser to
figure out the best balanced line wrapping solution for the text. The browser
does know all the factors, like font size, language, and allocated area.
Results of browser balanced text wrapping looks like this today in Chrome
Canary with
chrome://flags/#enable-experimental-web-platform-features
enabled:

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

It’s helpful to see them side by side, still, and without debug information overlaid.

Your eye should be much more pleased with the balanced text block. It grabs
attention better and is overall easier to read.

# Finding the balance

Headlines are the first thing readers see; they should be visually appealing and
easy to read. This grabs user attention and provides a sense of quality and
assurance. Good typography gives confidence to readers, encouraging them to
continue reading.

Traditionally this task was done by hand, or optically, as the designer
balancing the text wants to please the eye not the math. This topic is often
referred to as metric versus optical alignment. For large publications like the
New York Times,
headline balancing is a very important user experience detail.

Balancing text in typography dates back to early days of printing, when printers
would hand place letters. As tools and techniques evolved, so did the results.
These days, designers have color, weight, size, and more, to balance text in
their designs.

On the web however, there’s less control available because the document changes
sizes and colors based on users. text-wrap: balance brings the art of
balancing text to the web in an automated way, building on the work and
traditions of designers from the print industry.

# Balancing headlines

This will, and should be, the primary use case for text-wrap: balance. Draw
the eye with size and make it symmetrical and legible for the eye to read. Set
all the headlines to balanced text wrapping with the following CSS:

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

Just applying this style may not provide you with the results you expect, as the
text needs to wrap and therefore have a maximum line length applied from
somewhere. You’ll see a
max-inline-size
set on the examples in this post, this style is like max-width but can be set
once for any language.

# Limitations

The task of balancing text is not free. The browser needs to loop over
iterations to discover the best balanced wrapping solution. This performance
cost is mitigated by a rule, it only works for 4 wrapped lines and under.

# Performance considerations

It is not a good idea to apply text-wrap balancing to your entire design. It’s a
wasted request, due to the four line limit, and may impact page render speed.

* {
text-wrap: balance;
}

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

A big win for this feature is that you don’t need to wait and time text wrap
balancing with font loading, like you may be doing with JavaScript today. The
browser takes care of it!

# Interactions with the white-space property

Balancing text competes with the
white-space
property because one is asking for no wrapping and the other is asking for
balanced wrapping. Overcome this by unsetting the white space property, then
balanced wrapping can apply again.

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

# Balancing won’t change the inline-size of the element

There’s an advantage to some of the JavaScript solutions for balanced text
wrapping, as they change the max-width of the containing element itself. This
has an added bonus of being «shrink wrapped» to the balanced block. text-wrap: balanced does not have this effect and can be seen in this example:

See how the width shown from DevTools has a bunch of extra space at the end?
That’s because it’s a wrapping style only, not a size changing style. Because of
this, there’s a few scenarios where text-wrap: balance isn’t that great, at
least in my opinion. For example, headings inside of a card (or any container
with borders or shadows).

Balanced text wrapping ironically creates imbalance to the contained element.

# A brief explanation of the technique the browser is using

The browser effectively performs a binary search for the smallest width which
doesn’t cause any additional lines, stopping at one CSS pixel (not display
pixel). To further minimize steps in the binary search the browser starts with
80% of the average line width.