Chrome for Developers: “CSS Wrapped: 2023! text-wrap: balance and pretty”

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. Since the browser does know all the factors, like font size, language, and allocated area, it makes it a great candidate for handling advanced and high quality text layout.

This is where two new text wrapping techniques come in, one called balance and the other pretty. The balance value seeks to create a harmonious block of text while pretty seeks to prevent orphans and ensure healthy hyphenation. Both of these tasks have traditionally been done by hand, and it’s amazing to give the job to the browser and have it work for any translated language.

Una Kravets & Bramus & Adam Argyle

Nice to see the web platform introducing CSS features such as text-wrap that are easy to pick up and use – as opposed to things like grid layouts and nesting – while also being extremely useful and offloading to the browser tasks that would otherwise need complex work from web developers. The balance keyword is widely supported in browsers already, while pretty is exclusive to Chromium-based browsers for now. Even so, the lack of browser support for pretty won’t affect visitors in Safari and Firefox in any meaningful way, since the text will simply wrap in the default way.

I haven’t kept up with these numerous CSS developments, nor have I found the time to refresh my blog theme lately – the recent changes to color have been amazing. Since they’re so easy to put in place, I have added these text wrapping features, though I don’t quite agree with the suggestion to use balance for headlines and pretty for paragraphs. I feel that paragraphs are mostly fine as they are, possibly because I use a smallish font and thus quite a few words per line, so whether you have one or two words on the final row makes little difference visually. And balance for headlines feels too aggressive, cutting long headlines almost perfectly in half, which looks odd next to big blocks of text.

Good example showing how the different CSS text wrapping features influence headline display. From top to bottom: standard wrapping style, balance, pretty. The default cuts off the year in (February 2024) on a separate line, while pretty keeps them together; balance just cuts the headline roughly in half, resulting in another awkward break between Lightroom and Classic.

I added balance to image captions and footnotes instead; most of the captions on my blog are centered, so making the lines have similar width emphasizes the centered image; footnotes, being right-aligned and smaller than the main text, also look nicer with a more even width. I reserved pretty for article titles, where the larger font makes lonely orphans stand out more, and the uneven line width gives it a more dynamic feel than the uniform lines you get with balance.