Llega a CSS una técnica de tipografía clásica en la que se crean a mano los saltos de línea para bloques de texto equilibrados.
El valor balance para text-wrap forma parte del nivel de texto del CSS 4. Observa 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, editores de contenido y editores 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 romper líneas y palabras.
Como desarrollador, no conoces el tamaño final, el tamaño de la fuente ni el idioma de un título o párrafo. Todas las variables necesarias para un tratamiento eficaz y estético del ajuste de texto 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 de CSS Text 4, puedes solicitar al navegador que encuentre la mejor solución de ajuste de líneas equilibrado para el texto. El navegador conoce todos los factores, como el tamaño de 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 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; deben ser atractivos visualmente 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 brinda confianza a los lectores y los alienta a seguir leyendo.
Tradicionalmente, esta tarea se realizaba de forma visual o manual, ya que el diseñador que equilibra el texto quiere agradar el ojo, no las matemáticas. Este tema se conoce a menudo como alineación métrica frente a alineación óptica. Para publicaciones grandes como New York Times, el equilibrio de títulos es un detalle muy importante sobre 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 colocaban letras. A medida que las herramientas y 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 control disponible porque el documento cambia el tamaño y los colores según los usuarios. text-wrap: balance lleva el arte de equilibrar el texto a la Web de forma automatizada, tomando como base el 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. Atrae el ojo con el tamaño y haz que sea simétrico y legible para que el ojo pueda leerlo. Configura todos los títulos como un ajuste de texto equilibrado con el siguiente CSS:
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}
Con solo aplicar este estilo, es posible que no obtengas 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. En los ejemplos de esta publicación, verás un max-inline-size, que 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 las 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 balanceo de ajuste de texto a todo tu 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 tiempo para ajustar el ajuste de texto con la carga de fuentes, como puedes hacer con JavaScript actualmente. ¡El navegador se encarga de eso!
Interacciones con la propiedad white-space
El texto de balanceo compite con la propiedad white-space porque uno solicita ajuste y el otro pide un ajuste equilibrado. Para solucionar este problema, desactiva la propiedad de espacio en blanco, y podrás volver a aplicar la unión balanceada.
.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 una ventaja, ya que cambian el max-width del elemento contenedor. Esto tiene la ventaja adicional de ser “unión 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 se trata solo de un estilo de envoltorio, no de 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, 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 efectivamente 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 de visualización). 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.