TIL: improve the legibility with text-wrap: balance

Spanish version available

Today navigating in Mastodon I got a post by Cassidy James, @cassidy@blaede.family in the fediverse, sharing briefly a value that I didn't know, balance, for the CSS property text-wrap.

So today I learned that text-wrap: balance is an option that allows the text to be adjusted in a more balanced way, improving the structure of the resulting text and its readability.

After test it, I admit that the result obtained, especially with centered texts, is really amazing.

I invite you to read the post here, it hast two images attached as examples, one with the text aligned to the left and another with centered text) and boost the post if you also find it interesting. Thanks, Cassidy!

Example #

1.balanced-text {
2    text-wrap: balance;
3}

Left, without text-wrap: balance; right, with text-wrap: balance.

Text aligned by default to the left

Text centered with text-align: center

Important #

According to the MDN documentation, the behavior of text-wrap: balance varies between browsers, as it depends on the implementation of the property. There is a number of maximum allowed lines for text blocks that use this property, 10 in the case of Firefox. I have not tested this limitation.

It is important to note that it seems to have good browser compatibility according to MDN, although it hasn't support in Safari iOS and it is in preview browser support in Safari. Firefox supports it since version 121, so it is relatively new.

As a minor note... this is the first post in English in this blog!