ap

Future CSS: Text Wrap Pretty

Published on

Orphan words are a common problem in web design. They can make a page look unbalanced and distract the reader.

They're also notoriously difficult to fix, particularly in responsive web design, where text can reflow at different screen sizes.

But did you know that you can fix this natively in CSS?

pretty and balance are two new values for the text-wrap property that are proposed in the CSS Text Module Level 4. They're designed to help prevent single words from being left on a line by themselves, also known as "orphans".

But before we dive into how to use them, let's take a step back and look at the text-wrap property itself.

The text-wrap property

The text-wrap property helps us control how, as the name suggests, text wraps in an element. Personally, I use it a lot when rendering code blocks on my blog, as it helps to ensure that code snippets don't break randomly in the middle of a word.

1) text-wrap: balance

The balance value is the first new addition to the text-wrap property. It's designed to help prevent orphans in text by balancing the number of words on each line.

For example, let's say you're building a hero section:

This is my headline textAnd this is my subheading text which is a little bit longer

Notice how the number of words on the first line is significantly greater than on the last? That's not ideal. But with text-wrap: balance, we can fix it:

.subheading {
  text-wrap: balance;
}
This is my headline textAnd this is my subheading text which is a little bit longer

As you can see, the text is now "balanced" across the two lines.

2) text-wrap: pretty

The pretty value is another new addition to the text-wrap property. It's designed to help prevent orphans at the end of chunks of text, making it a good candidate for use in long paragraphs.

Let's use our hero section example again, but this time with text-wrap: pretty:

.subheading {
  text-wrap: pretty;
}
This is my headline textAnd this is my subheading text which is a little bit longer

As you can see, although the number of words on each line is different, there aren't any orphaned words.

When should I use pretty vs balance?

Although similar, there are some key differences between pretty and balance:

You can think of balance as a way to ensure that the number of words on each line is roughly the same. This is great for headings, where you want to ensure that the text is balanced across multiple lines.

On the other hand, pretty is a way to ensure that there aren't any orphaned words at the end of a block of text. This is great for long paragraphs, where you want to ensure that the text flows nicely.

Here's a side-by-side comparison of non-wrapped text, pretty, and balance. Notice how with balance the length of the lines is significantly shorter, albeit more consistent.

text-wrap: wrap (default value)Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque.
text-wrap: prettySed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque.
text-wrap: balanceSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque.

Gotchas

Okay, so why not just use text-wrap: pretty | balance all the time? Well, there are a few gotchas to be aware of:

Browser support

Firstly, both of these properties are still in the "proposal" stage. This means that they're not supported in all browsers yet. This is a great enhancement for the future, but don't rely on it for critical text. As of May 2024, balance is partially supported in the latest versions Chrome, Firefox, and Safari, while pretty is only supported in Chrome and Edge.

Limits

Browsers also implement a limit on the number of lines considered when wrapping text with balance. This is to prevent performance issues, but it can also lead to unexpected results if you're not aware of it. pretty doesn't have this limit, but this can lead to performance issues. As such, consider using balance for headings and pretty for long paragraphs where absolutely necessary.

Performance

Secondly, there's a performance cost. Behind the scenes, the browser engine has to make some relatively expensive computations. As mentioned above balance will only be computed on a limited number of lines in order to avoid an overly expensive computation, whilst pretty has no such limit. As such, you should use pretty sparingly and only when you really need it.

Further reading