Ajuste de texto de CSS: bella

Habilita el ajuste de texto optimizado para la belleza por sobre la velocidad.

Adam Argyle
Adam Argyle
X GitHub

A partir de Chrome 117, puedes usar una nueva función de ajuste de texto: text-wrap: pretty del nivel de texto del CSS 4.

p {
  text-wrap: pretty;
}
https://codepen.io/web-dot-dev/pen/yLGmzLJ

Las viudas y los huérfanos tipográficos son únicos palabras que están solas al final de un párrafo o bloque de texto Las viudas son palabras solos en la parte superior de un bloque de texto y los huérfanos están solos al final de un texto bloque. Pueden interrumpir la forma en que nuestros ojos hojean el texto, lo que dificulta el contenido. para leer. Algunos diseñadores los evitan a toda costa y se esfuerzan mucho por prevenirlos.

Se muestra un párrafo con una viuda al principio y una huérfana al final, en comparación con el mismo párrafo sin los huérfanos ni las viudas.
La imagen proviene de Google Fonts—Widows & Huérfanos
.

A partir de Chrome 117, puedes evitar los huérfanos con una línea de CSS: text-wrap: pretty.

La función hace un poco más que solo garantizar que los párrafos no terminen con un una sola palabra, también ajusta la separación silábica si aparecen líneas consecutivas con guion al final de un párrafo o ajusta las líneas anteriores para hacer lugar. También ajustar adecuadamente la justificación del texto. text-wrap: pretty es para en general, mejora el ajuste de línea y el salto de texto, que actualmente se enfoca en los huérfanos. En el futuro, es posible que text-wrap: pretty ofrezca más mejoras.

Una comparación de un párrafo con huérfanos y otro sin huérfanos, cada uno con una insignia de mala o buena.
Imagen obtenida de Por qué deberías quitar huérfanos del texto del cuerpo.

También está text-wrap: balance, que no evita los huérfanos, pero garantiza que el texto se ajuste de una manera que genere de texto armonioso. Personalmente, utilizo balance para los títulos y pretty para y párrafos.

Si quieres conocer los detalles del algoritmo que se usa para determinar la cantidad óptima de líneas, o consideraciones de rendimiento, aquí hay un vínculo al documento de diseño creado por el ingeniero detrás del atributo, Koji Ishii.

Si tienes otras mejoras o sugerencias que rompen las líneas, nos encantaría conocer con ellos. Informa un problema en el registro de errores de Chromium con los detalles y ejemplos de saltos de línea buenos y malos, y nos comunicaremos contigo.