TIL: improve the legibility with text-wrap: balance

on Iván Hernández Cazorla - Blog

Today I learned how to use the CSS "text-wrap" property with the value "balance" to improve the legibility of the text.
#TIL, #CSS, #English

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend, nunc imperdiet finibus malesuada, ex metus dignissim nisl, ut laoreet velit diam eget nibh. Praesent viverra diam est, ut mattis eros volutpat sit amet. Phasellus ac eros elit. Sed eleifend pretium elit et vulputate...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend, nunc imperdiet finibus malesuada, ex metus dignissim nisl, ut laoreet velit diam eget nibh. Praesent viverra diam est, ut mattis eros volutpat sit amet. Phasellus ac eros elit. Sed eleifend pretium elit et vulputate...

Text centered with text-align: center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend, nunc imperdiet finibus malesuada, ex metus dignissim nisl, ut laoreet velit diam eget nibh. Praesent viverra diam est, ut mattis eros volutpat sit amet. Phasellus ac eros elit. Sed eleifend pretium elit et vulputate...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend, nunc imperdiet finibus malesuada, ex metus dignissim nisl, ut laoreet velit diam eget nibh. Praesent viverra diam est, ut mattis eros volutpat sit amet. Phasellus ac eros elit. Sed eleifend pretium elit et vulputate...

# 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!


Formo parte de Molécula, un grupo de tres cowboys del espacio y alquimistas que programan mucho e intentan contribuir a la comunidad del software libre. Si te gusta lo que escribo o lo que contribuyo, puedes invitarnos a un café, té o maté. ¡Estamos en proceso de liberar varios proyectos!

Todas las entradas de este blog están bajo la licencia CC BY-SA 4.0. Las imágenes y otros recursos que no son de mi autoría tienen especificada su respectiva licencia. En caso de no tenerla, no dudes en reportármelo.

We are a team of three space cowboys and alchemists who develop software and try to contribute to the free software community. If you like what I write or what I contribute, you can invite us for a coffee, tea or maté. I still have have to finish developing several projects and, of course, release them!

All blog posts are licensed under CC BY-SA 4.0. The images or other resources that are not my autorship have their licenses specified. In case there is something it hasn't, don't hesitate to report it to me.