Use text-wrap: balance; to improve design and INP

Use text-wrap: balance; to improve design and INP

Evenly and aesthetically distributing your text on available lines? Use `text-wrap: balance` instead of JavaScript and improve web performance & INP of your website.

Table of Contents

A little background might be needed here. Your site will contain headings and maybe blockquotes. And on blog or product listing pages, you will even have a bunch of them in a grid layout. But not every heading will contain the same amount of text. Some contain a few words, others will be spanning multiple lines. And sometimes it's just a single word that falls of onto the next line.


Example by developers.chrome.com

It might not match the designs of your designer and it isn't aesthetically appealing. But if you wanted to achieve this back in 2010, JavaScript was your best bet for a long time. Luckily, there are open source solutions available.

The result of balancing text with JavaScript

By using JavaScript, you will achieve the result of the designs for your website. But also, even more JavaScript. And thus a perfect example of how your site's JS keeps growing over time.

Core Web Vitals impact

With Core Web Vitals evolving, we nowadays have a better metric to track the impact on performance and especially responsiveness. So, adding even more JavaScript likely results in impacting INP.

And negatively impacting INP means negatively impacting Core Web Vitals. That's because the new INP metrics becomes part of Google's Core Web Vitals ranking signal in March 2024. This means that next to impacting responsiveness and thus user experience, you will also end up impacting SEO.

A CSS alternative

Luckily, we don't need JavaScript anymore to achieve this. There's now a CSS only one liner to achieve the same:

text-wrap: balance

Browser support

Due to limited browser support, I didn't start using it before. Chromium-based browsers were the first to start shipping this CSS-only alternative. Firefox just recently joined the party as well:

  • Chrome & Edge started to support it in their version 114:
    • Chrome in May 30th
    • Edge in June 2nd
  • Firefox & (Chrome for) Android started supporting text-wrap: balance in December 2024:
    • (Chrome for) Android since browser version 120
    • Firefox since browser version 121
  • In Safari, it's only supported in its Technology Preview at time of writing.

The above list is based on caniuse data covering browser support.

Given the changes in December, I started to actually implement this CSS property. For example within blog detail pages as well as blog listing pages.

Characteristics

Obviously, no JavaScript is needed anymore with this solution. And that's a huge performance win already. However, it's still the browser that has to do calculations and make adjustments client side during a browser's rendering and paint tasks.

In other words, there will still be a little impact. For that reason, try to keep the following in mind:

  • try to limit its usage.
  • for example by only applying it to h1, h2, blockquotes.
  • try to exclude headings from this strategy if you know they are only going to span one line at all times anyway

Conclusion

Sometimes, optimizing performance comes in small wins. And in the end, performance improvement is the sum of multiple smaller improvements.

For example, the gains from moving from a JavaScript to a CSS text balancing solution falls in the same category as this blogpost covering pagespeed improvement with a single line of code.

Want to continue reading about text-wrap: balance;? Check these resources: