Mejora la tipografía con `text-wrap: pretty`

• La función text-wrap: pretty hace que la tipografía web se vea mejor
• Es una función incorporada recientemente en Safari Technology Preview 216 que mejora la tipografía web para hacerla más refinada y fácil de leer
• La composición tradicional del texto en la web procesaba una línea a la vez, pero pretty ajusta los puntos de salto de línea considerando el párrafo completo
• Esta función mejora la legibilidad y la accesibilidad, y está inspirada en los métodos tradicionales de composición tipográfica

Cómo lograr buenos saltos de línea aprendiendo de la tipografía tradicional

• Evitar una última línea demasiado corta: no es estéticamente agradable dejar solo una palabra en la última línea
• Mejorar el acabado irregular del párrafo: si los finales de línea quedan desparejos, la legibilidad baja, por lo que conviene equilibrarlos en lo posible
• Evitar una mala separación con guiones: si se usan guiones en dos líneas seguidas o se fragmentan demasiado las palabras, se vuelve difícil de leer
• Prevenir los ríos tipográficos: hay que evitar el efecto en el que los espacios entre palabras se alinean verticalmente y distraen la vista

Historia del salto de línea en la web

• La web ha usado desde 1991 un método de “procesar una línea a la vez desde la primera línea”
• Este método calcula por separado la longitud de texto de cada línea y no considera la armonía entre líneas
• Herramientas como InDesign o LaTeX alinean las líneas viendo el párrafo completo, pero la web no había podido hacerlo hasta hace poco
• Safari Technology Preview 216 introduce por primera vez un método de salto de línea que considera el párrafo completo

Problemas que resuelve text-wrap: pretty

• Evalúa el párrafo completo para determinar los puntos óptimos de salto de línea
• Evita una última línea corta, mejora el contorno irregular de los finales de línea (rag) y reduce los guiones innecesarios
• Los navegadores basados en Chromium solo mejoran las últimas 4 líneas del párrafo, mientras que WebKit aplica el ajuste al párrafo completo
• Aún no mejora el efecto de ríos tipográficos, pero está previsto incorporarlo en el futuro

Diferencias de implementación entre navegadores

• pretty puede funcionar de manera distinta según el navegador, tal como lo definió el CSS Working Group
• WebKit lo aplica al párrafo completo; Chromium, solo a las últimas 4 líneas
• Por eso, los desarrolladores no deberían usarlo solo para mejorar la última línea, sino para elevar la tipografía general

Ver el demo

• En el demo de CodePen se pueden probar combinaciones de pretty, balance, guiones y alineación
• Se puede activar “show guides” y “show ghosts” para comparar antes y después
• También se puede ver el efecto en varios idiomas (inglés, árabe, alemán, chino y japonés)

Aclarando las dudas sobre rendimiento

• En contenido con muchas líneas podría afectar el rendimiento, pero en párrafos normales no hay problema
• Se puede usar libremente siempre que no se trate de párrafos de cientos o miles de líneas
• Si hace falta, WebKit planea dividir párrafos largos para garantizar el rendimiento

Diferencia entre pretty y balance

• pretty mantiene el texto ocupando todo el ancho del contenedor mientras hace que los saltos de línea se vean más naturales
• balance se enfoca en igualar la longitud de todas las líneas, por lo que llena menos el contenedor
• En general, pretty es adecuado para texto de cuerpo y balance para títulos, captions y texto teaser
• Ambos pueden usarse en textos cortos, pero conviene evitar balance en contenido largo

Otros valores de la propiedad text-wrap

text-wrap: avoid-short-last-lines

• Es un valor nuevo añadido recientemente, enfocado únicamente en evitar una última línea corta
• Aún no está implementado en ningún navegador

text-wrap: auto

• Es el valor predeterminado y usa el algoritmo de “salto de línea voraz” basado en líneas que se ha usado desde 1991
• En el futuro, los navegadores podrían incluso mejorar el valor predeterminado en sí

text-wrap: stable

• Actualmente funciona igual que auto, pero ofrece saltos de línea estables adecuados para texto editable
• Garantiza que los saltos de línea no cambien durante animaciones o mientras se escribe texto

Detalles de la propiedad text-wrap

• text-wrap es en realidad una forma abreviada de dos propiedades: text-wrap-mode y text-wrap-style

• text-wrap-mode: define si se permiten saltos de línea (wrap / nowrap)

• text-wrap-style: elige el algoritmo de salto de línea (auto, stable, balance, pretty, avoid-short-last-lines)

  text-wrap-style: pretty;  
  text-wrap-mode: wrap;  
  

• Al usarlo junto con la propiedad white-space, también hay que revisar cómo se manejan los espacios en blanco

Resumen

• text-wrap: pretty permite un salto de línea mucho más refinado para texto web que el existente hasta ahora
• Fue implementado en Safari Technology Preview 216 con un enfoque que evalúa el párrafo completo
• Incluso al aplicarlo a texto largo, casi no presenta problemas de rendimiento y aporta grandes mejoras en legibilidad y estética
• Es importante entender la diferencia con balance y elegirlo según el tipo de contenido

[GN⁺]

Comentarios en Hacker News

• Da risa escuchar que muchos desarrolladores se preocupan por el rendimiento de text-wrap: pretty. Cuesta creer que haya tantos desarrolladores que realmente estén considerando el rendimiento del ajuste de texto
• El contenido de la demo está en inglés. Es un inglés extraño. No está relacionado con el tema, y salvo que se trate de mejorar los saltos de línea reordenando palabras, no viene al caso
• Ojalá esta función se agregue a los ereaders. Los ereaders no tienen buenos motores de maquetación
• Se ha dedicado muy poco esfuerzo y atención a hacer que el texto en línea se vea hermoso. La web hizo retroceder el texto varios siglos. Esta función es bienvenida
• Se añadió soporte para text-wrap: pretty en Safari Technology Preview, lo que aporta un nivel de refinamiento sin precedentes a la tipografía web. Según caniuse.com, Chrome soporta esta función desde septiembre de 2023. Cuesta entender qué tiene de “sin precedentes”
• ¿Alguien sabe cuál es la diferencia entre text-align: justify y text-wrap: pretty? En Chrome, text-wrap: pretty da un efecto mucho más suave. Revisé si convendría usar ambos en el cuerpo de un blog promedio, y parece que cada uno aporta cambios por separado
• Esta función es excelente. No sorprende que se enfoque en las líneas finales cortas y en los bordes irregulares. Pero todavía no hace ajustes para evitar los ríos. Cuesta imaginar cómo definir una métrica que los describa. Me pregunto si alguien habrá inventado una métrica ingeniosa que realmente funcione
• El párrafo que intenta evitar palabras huérfanas deja sola la palabra “large”. Aplicar text-wrap: pretty lo soluciona
• El objetivo de pretty, tal como lo diseñó el CSS Working Group, es que cada navegador haga lo que pueda para mejorar el ajuste del texto. No obliga a todos los navegadores a tomar las mismas decisiones. Por la forma en que Chrome lo implementó, muchos desarrolladores web esperan que este valor sirva para evitar líneas finales cortas. Pero esa no es su intención
• Ya estoy usando text-wrap: balance en los titulares. Había intentado unir ciertas palabras para evitar malos cortes de línea. text-wrap: pretty resolverá un problema similar en el texto del cuerpo