CSS llega a CSS, una técnica de tipografía clásica de creación manual de saltos de línea para bloques de texto equilibrados.
El valor balance para text-wrap forma parte del nivel de texto 4 de CSS. Mira los ejemplos de esta publicación y descubre cómo esta única línea de CSS puede mejorar tus diseños de texto de forma masiva.
Sin text-wrap: balance, los diseñadores, editores de contenido y 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 a decisiones más inteligentes sobre dónde dividir las líneas y las palabras.
Como desarrollador, no sabes el tamaño final, el tamaño de fuente o incluso el idioma de un título o párrafo. Todas las variables necesarias para un tratamiento eficaz y estético del ajuste de texto se encuentran en el navegador. Es por eso que vemos que el título se ajusta como en la siguiente imagen:
.unbalanced {
max-inline-size: 50ch;
}
Con text-wrap: balance del Texto de CSS 4, puedes solicitar al navegador que encuentre la mejor solución de ajuste de línea equilibrada para el texto. El navegador conoce todos los factores, como el tamaño de la fuente, el idioma y el área asignada.
Hoy, los resultados del ajuste de texto equilibrado del navegador tienen el siguiente aspecto:
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
Es útil verlos uno al lado del otro, quietos y sin superposición de información de depuración.
Tus ojos deberían estar mucho más satisfechos con el bloque de texto equilibrado. Capta mejor la atención y es más fácil de leer en general.
Encontrar el equilibrio
Los titulares son lo primero que ven los lectores; deben ser atractivos visualmente y fáciles de leer. Esto llama la atención del usuario y proporciona una sensación de calidad y seguridad. Una buena tipografía les brinda confianza a los lectores y los anima a seguir leyendo.
Tradicionalmente, esta tarea se realizaba a mano o de forma óptica, ya que el diseñador que equilibra el texto quiere complacer a la vista, no a las matemáticas. Este tema a menudo se conoce como alineación métrica frente a alineación óptica. Para publicaciones grandes como el New York Times, el equilibrio del título es un detalle muy importante de la experiencia del usuario.
Equilibrar el texto en la tipografía se remonta a los primeros días de la impresión, cuando las impresoras colocaban las letras a mano. A medida que las herramientas y las técnicas evolucionaron, también lo hicieron los resultados. En la actualidad, los diseñadores tienen color, peso, tamaño, etc., para equilibrar el texto en sus diseños.
Sin embargo, en la Web, hay menos controles disponibles porque el documento cambia de tamaño y color según los usuarios. text-wrap: balance lleva el arte de equilibrar el texto en la Web de forma automatizada, sobre la base del trabajo y las tradiciones de los diseñadores de la industria de la impresión.
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 y haz que sea simétrico y legible para que el ojo lo lea. Configura todos los títulos con ajuste de texto equilibrado con el siguiente CSS:
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}
Es posible que solo aplicar este estilo no te proporcione los resultados que esperas, ya que el texto debe ajustarse y, por lo tanto, aplicar una longitud de línea máxima desde algún lugar. Verás que se configura una max-inline-size en los ejemplos de esta publicación. Este estilo es similar a max-width, pero se puede establecer una vez para cualquier idioma.
Limitaciones
La tarea de equilibrar el texto no es libre. El navegador debe repetir iteraciones para descubrir la mejor solución de unión equilibrada. Este costo de rendimiento se mitiga con una regla, solo funciona para seis líneas unidas o menos.
Consideraciones sobre el rendimiento
No es una buena idea aplicar el equilibrio de envoltorio 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 para esta función es que no necesitas esperar ni controlar el tiempo de ajuste de texto con la carga de fuentes, como sucede actualmente con JavaScript. El navegador se encarga de eso.
Interacciones con la propiedad white-space
El balanceo de texto compite con la propiedad white-space porque uno pide no ninguna unión y el otro, solicita un ajuste equilibrado. Para solucionar este problema, anula la configuración de la propiedad de espacio en blanco y, luego, la unión equilibrada 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 la unión de texto equilibrada tienen una ventaja, ya que cambian el max-width del elemento contenedor. Esto tiene una ventaja adicional de "se une" 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 que cambia de tamaño. Debido a esto, 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).
El ajuste de texto equilibrado crea irónicamente un desequilibrio en el elemento contenido.
Una breve explicación de la técnica que utiliza el navegador
El navegador realiza una búsqueda binaria del ancho mínimo que no provoca líneas adicionales, y se detiene en un píxel de CSS (no píxel de visualización). Para minimizar aún más los pasos en la búsqueda de objeto binario, el navegador comienza con el 80% del ancho de línea promedio.