Ajuste de texto de CSS: bella

Habilita el ajuste de texto optimizado para lograr belleza 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 de CSS 4.

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

Las viudas y huérfanas tipográficas son palabras únicas que se separan por sí solas al final de un párrafo o bloque de texto. Las viudas son palabras solas en la parte superior de un bloque de texto y los huérfanos aparecen solos al final del bloque de texto. Pueden interrumpir la manera en que nuestros ojos leen el texto, lo que hace que el contenido sea más difícil de leer. Algunos diseñadores los evitan a toda costa y hacen todo lo posible para evitarlos.

Se muestra un párrafo con una viuda al principio y un huérfano al final, en comparación con el mismo párrafo sin los huérfanos ni las viudas.
Imagen obtenida de Google Fonts: Viudas y huérfanos

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

Esta función no solo garantiza que los párrafos no terminen con una sola palabra, sino que también ajusta la separación silábica si aparecen líneas consecutivas al final de un párrafo o ajusta las líneas anteriores para liberar espacio. También se ajustará de forma adecuada para justificar el texto. text-wrap: pretty es, en general, mejor ajuste de línea y salto de texto, que actualmente se enfoca en 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 buena o mala.
Imagen obtenida de Por qué deberías quitar los huérfanos del texto del cuerpo.

También está text-wrap: balance, que no evita la aparición de huérfanos, pero garantiza que el texto se ajuste de una manera que cree un bloque de texto armonioso. Yo uso balance para los títulos y pretty para los párrafos.

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

Si tienes otras mejoras o sugerencias para romper las líneas, nos encantaría escucharlas. Informa un problema en el registro de errores de Chromium con detalles y ejemplos de saltos de línea correctos y incorrectos, y nos comunicaremos contigo.