CSS text-wrap: balance

Una técnica de tipografía clásica de creación manual de saltos de línea para bloques de texto equilibrados llega a CSS.

Adam Argyle

El valor balance para text-wrap forma parte de CSS Text Level 4. Consulta los ejemplos de esta publicación para aprender cómo esta línea de CSS puede mejorar enormemente tus diseños de texto.

Sin text-wrap: balance, los diseñadores, los editores de contenido y los publicadores tienen pocas herramientas para cambiar la forma en que se equilibran las líneas. Las mejores opciones disponibles son usar <wbr> o ­ para ayudar a guiar los diseños de texto hacia decisiones más inteligentes sobre dónde dividir líneas y palabras.

Como desarrollador, no conoces el tamaño final, el tamaño de la fuente ni siquiera el idioma de un título o un párrafo. Todas las variables necesarias para un tratamiento eficaz y estético del ajuste de texto se encuentran en el navegador. Por eso, vemos el ajuste de títulos como en la siguiente imagen:

.unbalanced {
  max-inline-size: 50ch;
}

Con text-wrap: balance de CSS Text 4, puedes solicitarle al navegador que encuentre la mejor solución equilibrada de ajuste de líneas para el texto. El navegador conoce todos los factores, como el tamaño de la fuente, el idioma y el área asignada. Actualmente, los resultados del ajuste de texto equilibrado del navegador se ven de la siguiente manera:

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

Es útil verlos uno al lado del otro, sin movimiento y sin información de depuración superpuesta.

Tus ojos deberían sentirse mucho más a gusto con el bloque de texto equilibrado, ya que capta mejor la atención y, en general, es más fácil de leer.

Cómo encontramos el equilibrio

Los títulos son lo primero que ven los lectores, por lo que deben ser visualmente atractivos y fáciles de leer. Esto capta la atención del usuario y proporciona una sensación de calidad y garantía. Una buena tipografía les da confianza a los lectores y los alienta a seguir leyendo.

Tradicionalmente, esta tarea se realizaba a mano o de forma óptica, ya que el diseñador que equilibra el texto busca complacer la vista, no las matemáticas. Este tema a menudo se conoce como alineación métrica versus óptica. Para las publicaciones grandes, como The New York Times, el equilibrio de los titulares es un detalle muy importante de la experiencia del usuario.

El equilibrio del texto en la tipografía se remonta a los primeros días de la impresión, cuando los impresores colocaban las letras a mano. A medida que evolucionaron las herramientas y las técnicas, también lo hicieron los resultados. Hoy en día, los diseñadores tienen a su disposición el color, el peso, el tamaño y mucho más para equilibrar el texto en sus diseños.

Sin embargo, en la Web, hay menos control disponible porque el documento cambia de tamaño y color según los usuarios. text-wrap: balance aporta el arte de equilibrar el texto en la Web de forma automatizada, basándose en el trabajo y las tradiciones de los diseñadores de la industria de la impresión.

Titulares de saldo

Este será, y debería ser, el caso de uso principal de text-wrap: balance. Atrae la atención con el tamaño y haz que sea simétrico y legible para que el ojo lo pueda leer. Configura todos los títulos para que tengan un ajuste de texto equilibrado con el siguiente CSS:

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

Solo aplicar este estilo puede no brindarte los resultados que esperas, ya que el texto debe ajustarse y, por lo tanto, tener una longitud de línea máxima aplicada desde algún lugar. Verás un conjunto de max-inline-size en los ejemplos de esta publicación. Este estilo es similar a max-width, pero se puede configurar una vez para cualquier idioma.

Limitaciones

La tarea de equilibrar el texto no es gratuita. El navegador debe iterar varias veces para descubrir la mejor solución de ajuste equilibrado. Este costo de rendimiento se mitiga con una regla que solo funciona para seis líneas ajustadas o menos.

Consideraciones de rendimiento

No es una buena idea aplicar el balanceo del ajuste de texto a todo el diseño. Es una solicitud desperdiciada debido al límite de seis líneas y puede afectar la velocidad de renderización de la página.

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

Una gran ventaja de esta función es que no necesitas esperar y sincronizar el equilibrio del ajuste de texto con la carga de fuentes, como podrías hacer con JavaScript hoy en día. El navegador se encarga de eso.

Interacciones con la propiedad white-space

El texto de equilibrio compite con la propiedad white-space porque uno solicita que no se ajuste y el otro solicita que se ajuste de forma equilibrada. Para solucionar este problema, anula la configuración de la propiedad de espacio en blanco y, luego, se podrá volver a aplicar el ajuste equilibrado.

.balanced {
  white-space: unset;
  text-wrap: balance;
}

El balanceo no cambiará el tamaño en línea del elemento.

Algunas soluciones de JavaScript para el ajuste de texto equilibrado tienen la ventaja de que cambian el max-width del elemento contenedor. Esto tiene la ventaja adicional de estar "envuelto en plástico" en el bloque equilibrado. text-wrap: balance no tiene este efecto, como se puede ver en este ejemplo:

¿Ves cómo el ancho que se muestra en Herramientas para desarrolladores tiene mucho espacio adicional al final? Esto se debe a que solo es un estilo de ajuste, no un estilo de cambio de tamaño. Por este motivo, hay algunas situaciones en las que text-wrap: balance no es tan bueno, al menos en mi opinión. Por ejemplo, los encabezados dentro de una tarjeta (o cualquier contenedor con bordes o sombras).

Irónicamente, el ajuste de texto equilibrado crea un desequilibrio en el elemento contenido.

Una breve explicación de la técnica que usa el navegador

El navegador realiza de manera eficaz una búsqueda binaria del ancho más pequeño que no genera líneas adicionales, y se detiene en un píxel de CSS (no en un píxel de pantalla). Para minimizar aún más los pasos en la búsqueda binaria, el navegador comienza con el 80% del ancho de línea promedio.