TIL: mejorar la legibilidad con text-wrap: balance

English version available

Hoy navegando en Mastodon me saltó una publicación de Cassidy James, @cassidy@blaede.family en el fediverso, en el que compartía brevemente un valor que desconocía, balance, para la propiedad text-wrap de CSS.

Así que hoy he aprendido que text-wrap: balance es una opción que permite que el texto se ajuste de una forma más equilibrada, mejorando la estructura del texto resultando y su legibilidad.

Tras haberlo probado, he de admitir que el resultado que se obtiene, sobre todo con textos centrados, es realmente increíble.

Les animo a echarle un vistazo a su publicación, que tiene dos imágenes de ejemplos (uno con alineación a la izquierda y otro centrado) e impulsarla si también les ha interesado. ¡Gracias, Cassidy!

Ejemplo #

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

Izquierda, sin text-wrap: balance; derecha, con text-wrap: balance.

Texto alineado por defecto a la izquierda

Texto centrado con text-align: center

Importante #

Según lo que indica la documentación de text-wrap en MDN, el comportamiento de text-wrap: balance varía entre navegadores, ya que depende de la implementación de la propiedad. Existe un número de líneas máximas permitidas para los bloques de texto que utilicen esta propiedad, que en el caso de Firefox son 10 líneas. No he probado esta limitación.

Por otra parte, si bien tiene bastante compatibilidad entre navegadores según MDN, no tiene soporte en Safari iOS y está en preview browser support en Safari. Firefox la soporta desde la versión 121, por lo que es relativamente nueva.