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. Observe los ejemplos de esta publicación
esta línea de CSS puede mejorar enormemente los 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
<wbr>
o
­
para ayudar
guiar los diseños de texto para que tomen 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 diseño el ajuste de texto, están en el navegador. Por eso vemos que el título como en la siguiente imagen:
![El título se destaca con Herramientas para desarrolladores, abarca todo el ancho de su espacio intercalado y tiene dos palabras colgantes en la segunda línea.](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-fe0c4a80e307b.png?authuser=19&hl=es)
.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:
![El título se destaca como en la versión anterior de Herramientas para desarrolladores, esta vez no se abarca todo el ancho. Comenzó una nueva línea antes del final y, por lo tanto, es un bloque de texto equilibrado.](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-0861292a42f0d.png?authuser=19&hl=es)
.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, como el diseñador "equilibrar el texto", quiere agradar la vista, no las matemáticas. Este tema suele ser (alineación métrica versus óptica). 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 técnicas evolucionaron, también lo hicieron los resultados. Hoy en día, los diseñadores tienen color, peso, tamaño y más para equilibrar el texto en sus diseños.
Sin embargo, en la Web, hay menos control disponible porque el documento cambia
tamaños y colores 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
. Empate
con el tamaño del ojo y haz que sea simétrico y legible para que el ojo pueda leerlo. 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 mensaje
max-inline-size
en los ejemplos de esta publicación, este estilo es como max-width
, pero se puede configurar
una vez para cada 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 rendimiento y el costo se mitiga con una regla, solo funciona para seis líneas unidas 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 ni ajustar el tiempo. con la carga de fuentes, 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 texto equilibrado tienen una ventaja
unión, a medida que cambian el max-width
del elemento contenedor en sí. 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 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, en
menos en mi opinión. Por ejemplo, los encabezados 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 eficazmente una búsqueda binaria para el ancho mínimo, que no genera líneas adicionales y se detiene en un píxel CSS (no muestra píxel). Para minimizar aún más los pasos en la búsqueda de objetos binarios, el navegador comienza con el 80% del ancho de línea promedio.