Text Wrapping
Browsers wrap text one line at a time. Each line takes as many words as fit, then breaks. That is fast, and it produces a lot of headings that read "Introducing the new dashboard for" and then "teams" on its own line.
text-wrap: balance looks at the whole block and picks breaks that make every line about the same length. Drag the width and watch the left heading strand a word while the right one stays even.
Introducing the new dashboard for teams
Introducing the new dashboard for teams
Balance is for short things: headings, card titles, toast messages, empty state copy. Chromium only balances blocks of up to six lines, and the extra layout work would not be worth it on long text anyway.
Paragraphs
For body copy you want something gentler. text-wrap: pretty keeps the lines roughly as they were and only intervenes at the end, so the last line never holds a single word.
Exports now run in the background, so you can keep working while we prepare the file. We will send you a link when it is ready.
Exports now run in the background, so you can keep working while we prepare the file. We will send you a link when it is ready.
Newer versions of Chrome also let pretty fix short last lines and rivers of whitespace in the middle of a paragraph. Firefox and Safari both support the value, so it is safe to set on every paragraph.
Together
Most small pieces of UI carry a title and a line of description. Give the title balance and the description pretty.
This one is a small change and it is worth being honest about that. Nobody will thank you for it. They will just find the toast slightly easier to read and never know why.
Usage
<h2 class="text-balance">Introducing the new dashboard for teams</h2>
<p class="text-pretty">
Exports now run in the background, so you can keep working.
</p>h1, h2, h3, blockquote {
text-wrap: balance;
}
p, li {
text-wrap: pretty;
}Both values are progressive enhancement. A browser that does not understand them falls back to normal wrapping, so there is no reason to wait. Set them once in your base styles and forget about them.