Ajuste de texto en CSS: balance

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

Adam Argyle

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

Sin text-wrap: balance; diseñadores, editores de contenido y editores algunas 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 a tomar 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 diseño el ajuste de texto, están en el navegador. Por este motivo, vemos el ajuste de texto del título como en la siguiente imagen:

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

Con text-wrap: balance de CSS Text 4, puedes solicitar al navegador lo siguiente: descubrir la mejor solución de ajuste de línea equilibrado 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 tienen el siguiente aspecto:

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

Es útil verlos lado a lado, quietos y sin superposición de información de depuración.

Tu ojo debería estar mucho más satisfecho con el bloque de texto equilibrado. Captura la atención y, en general, es más fácil de leer.

Cómo encontramos el equilibrio

Los titulares son lo primero que ven los lectores; deben ser visualmente atractivos y y fácil de leer. Esto capta la atención del usuario y proporciona una sensación de calidad y seguridad. Una buena tipografía brinda confianza a los lectores y los alienta a continúa leyendo.

Tradicionalmente, esta tarea se realizaba a mano o de forma óptica, ya que el diseñador que equilibra el texto quiere complacer al ojo, no a la matemática. A menudo, este tema se conoce como alineación óptica en comparación con la alineación métrica. En publicaciones grandes, como el New York Times, El balanceo de títulos 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 las impresoras colocaría letras. A medida que las herramientas y las técnicas evolucionaron, también lo hicieron los resultados. En la actualidad, los diseñadores tienen color, grosor, 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, a partir del trabajo y tradiciones de diseñadores de la industria impresa.

Equilibrar los títulos

Este será y debería ser el caso de uso principal de text-wrap: balance. Dibuja el ojo con el tamaño adecuado y haz que sea simétrico y legible. Definir todos los títulos al ajuste de texto equilibrado con el siguiente CSS:

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

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

Limitaciones

La tarea de equilibrar el texto no es gratuita. El navegador necesita repetir indefinidamente. iteraciones para descubrir la mejor solución de unión equilibrada. Este costo de rendimiento se mitiga con una regla que solo funciona para seis líneas ajustadas y menos.

Consideraciones de rendimiento

No es una buena idea aplicar el balanceo de ajuste de texto a todo tu diseño. Es un solicitud desperdiciada, debido al límite de seis líneas, y podría 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 balanceo del texto con la carga de la fuente, como lo haces actualmente con JavaScript. El navegador se encarga de eso.

Interacciones con la propiedad white-space

El equilibrio entre el texto compite con el white-space propiedad porque uno no pide unión y la otra pide envoltorio equilibrado. Para solucionarlo, desactiva la propiedad del espacio en blanco. Luego, el ajuste equilibrado puede volver a aplicarse.

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

El balanceo no cambiará el tamaño intercalado del elemento.

Algunas de las soluciones de JavaScript para el ajuste de texto equilibrado tienen la ventaja de cambiar el max-width del propio elemento contenedor. Esta tiene una ventaja adicional de ser “envoltura retráctil” al bloque equilibrado. text-wrap: balance no tiene este efecto y se puede ver en este ejemplo:

¿Ves que el ancho que se muestra en Herramientas para desarrolladores tiene mucho espacio adicional al final? Esto se debe a que es solo un estilo de unión, no un estilo de cambio de tamaño. Debido a esto, hay algunas situaciones en las que text-wrap: balance no es tan bueno, en menos en mi opinión. Por ejemplo, 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 utiliza 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 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.