Ajuste de texto de CSS: bella

El ajuste de texto optimizado con solicitud de aceptación prioriza la estética sobre la velocidad.

Adam Argyle
Adam Argyle

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

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

Las viudas y huérfanos tipográficos son palabras únicas que se encuentran 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 las huérfanas están solas al final de un bloque de texto. Pueden interrumpir la forma en que nuestros ojos leen el texto, lo que dificulta la lectura del contenido. 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 huérfanos ni viudas.
Imagen de Google Fonts: viudas y huérfanos

A partir de Chrome 117, se pueden evitar los elementos 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 una sola palabra, también ajusta la división si aparecen líneas consecutivas con guiones al final de un párrafo o ajusta las líneas anteriores para hacer espacio. También se ajustará de forma adecuada para la justificación del texto. text-wrap: pretty es para mejorar, en general, el ajuste de línea y la división 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 uno sin huérfanos, cada uno con una insignia de bueno o malo.
Imagen de Por qué debes quitar los 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 cree un bloque de texto armonioso. Personalmente, uso balance para los títulos y pretty para los párrafos.

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

Si tienes otras sugerencias o mejoras para el corte de líneas, nos encantaría escucharlas. Informa un problema en el seguimiento de errores de Chromium con los detalles, ejemplos de líneas de corte correctas y incorrectas, y nos comunicaremos contigo.