text-wrap: balance y pretty

El algoritmo de corte de línea que usa la web desde 1994 es codicioso: mete en cada línea todo lo que cabe y pasa a la siguiente. Es rápido, es predecible y produce titulares con la última línea de dos letras. balance y pretty son dos algoritmos alternativos con costes y límites distintos, y esos límites —empezando por el número de líneas que cada motor está dispuesto a equilibrar— deciden dónde se pueden usar.

Por qué el corte codicioso falla

El algoritmo llena cada línea al máximo sin mirar las siguientes. Para un párrafo de quince líneas eso está bien: el desequilibrio se reparte y solo la última línea puede quedar corta. Para un titular de tres líneas, no: toda la irregularidad se concentra en un bloque que el ojo abarca de una vez.

El caso peor es el titular de dos líneas donde la segunda tiene una palabra. El ojo lee eso como un error de maquetación, y lo es: hay una composición mejor —repartir las palabras entre las dos líneas— que el algoritmo no busca porque no mira hacia adelante.

text-wrap es la abreviatura de dos longhands: text-wrap-mode, que decide si se corta o no —lo que antes eran white-space: nowrap y compañía—, y text-wrap-style, que decide cómo se corta. Los valores de esta lección pertenecen al segundo.

balance y su tope de líneas

h1, h2, h3, blockquote, figcaption {
  text-wrap: balance;
}

El motor busca la anchura de línea que iguale al máximo la longitud de todas las líneas del bloque, normalmente con una búsqueda binaria sobre el ancho disponible. El resultado son titulares repartidos y sin líneas huérfanas.

Y aquí está el límite que hay que conocer, porque no está en ninguna advertencia visible: cada motor impone un tope de líneas por encima del cual desactiva el equilibrado en silencio.

El motivo es el coste: el equilibrado exige recomponer el bloque varias veces, y en un párrafo largo eso multiplica el trabajo de layout. Los topes son un cortafuegos de rendimiento.

La consecuencia práctica es traicionera. Un titular de cinco líneas se equilibra en Chromium; el mismo titular traducido al alemán, con palabras más largas, pasa a siete líneas y deja de equilibrarse sin que nadie se entere. No hay error, no hay aviso, y el fallo aparece solo en el idioma que tú no revisas.

De ahí la regla: aplica balance únicamente a bloques cuya longitud controlas, y trátalo como una mejora que puede no aplicarse en lugar de como una garantía de composición.

El soporte de balance está en los tres motores: Chrome 130, Firefox 124 y Safari 17.5 para el longhand text-wrap-style, y algo antes a través de la abreviatura.

pretty y el texto largo

p, li {
  text-wrap: pretty;
}

pretty optimiza otra cosa: en lugar de igualar las líneas, evita los resultados feos, empezando por la línea final huérfana —una sola palabra sola al final de un párrafo— y, en las implementaciones más recientes, considerando el párrafo entero para elegir cortes mejores.

Como no busca igualar, no necesita recomponer tantas veces y no tiene tope de líneas. Es el valor pensado para texto corrido.

El reparto de soporte sí es desigual: pretty está en Chromium desde la 130 en el longhand y en Safari desde la 26, y Firefox no lo ha implementado. La degradación es automática y limpia: un motor que no reconoce el valor descarta la declaración y compone como siempre. No hace falta ninguna detección, y es un caso de manual de mejora que no necesita @supports.

Hay un tercer valor, stable, que garantiza que las líneas ya compuestas no se recolocan al editar el contenido. Su caso de uso es el texto editable, donde los otros valores producen un reflujo desconcertante mientras se escribe.

Dónde aplicar cada uno

Dos avisos sobre balance que ahorran depuración.

No se lleva bien con los saltos manuales. Si el titular lleva un salto explícito, ya has decidido tú el reparto y el equilibrado trabaja sobre los trozos, con resultados sorprendentes. Elige una cosa o la otra.

Depende del ancho, así que cambia al redimensionar. Es lo esperable, pero significa que el reparto que has aprobado en la revisión de diseño es el de ese ancho concreto y no el de todos.