Ajuste de texto en CSS: balance

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.

Adam Argyle

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:

.

.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, 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.