Mieux rendre la typographie avec `text-wrap: pretty`

• Aperçu de text-wrap: pretty, une propriété qui rend la typographie web plus élégante
• Nouvelle fonctionnalité introduite dans Safari Technology Preview 216, elle améliore la typographie web de manière plus fine et plus lisible
• Jusqu’ici, la mise en page du texte sur le web était traitée ligne par ligne, mais pretty ajuste les points de retour à la ligne en tenant compte de l’ensemble du paragraphe
• Cette fonctionnalité améliore la lisibilité et l’accessibilité, et s’inspire des méthodes traditionnelles de composition typographique

De bonnes pratiques de retour à la ligne héritées de la typographie traditionnelle

• Éviter une dernière ligne trop courte : laisser un seul mot sur la dernière ligne n’est pas esthétique
• Améliorer la forme irrégulière de fin de paragraphe : lorsque les fins de ligne sont trop irrégulières, la lisibilité baisse, il faut donc chercher un meilleur équilibre
• Éviter une mauvaise utilisation des traits d’union : deux lignes consécutives avec césure ou des mots trop fragmentés rendent la lecture difficile
• Éviter les rivières typographiques : il faut éviter que les espaces entre les mots s’alignent verticalement et distraient le regard

L’histoire du retour à la ligne sur le web

• Depuis 1991, le web utilise une approche qui « traite le texte une ligne à la fois à partir de la première ligne »
• Cette méthode calcule séparément la longueur de chaque ligne sans tenir compte de l’harmonie entre elles
• Des outils comme InDesign ou LaTeX alignent les lignes en considérant le paragraphe entier, mais le web ne le faisait pas jusqu’à récemment
• Safari Technology Preview 216 introduit pour la première fois un retour à la ligne tenant compte de l’ensemble du paragraphe

Les problèmes que résout text-wrap: pretty

• Il évalue le paragraphe entier pour déterminer les meilleurs points de retour à la ligne
• Il évite les dernières lignes trop courtes, améliore la forme des fins de ligne (rag) et réduit les césures inutiles
• Les navigateurs basés sur Chromium n’améliorent que les 4 dernières lignes du paragraphe, tandis que WebKit applique cela à l’ensemble du paragraphe
• Le phénomène des rivières n’est pas encore corrigé, mais son ajout est prévu à l’avenir

Différences d’implémentation selon les navigateurs

• pretty peut se comporter différemment selon les navigateurs, conformément à la définition du CSS Working Group
• WebKit l’applique à l’ensemble du paragraphe, Chromium uniquement aux 4 dernières lignes
• Les développeurs peuvent donc l’utiliser non seulement pour améliorer la dernière ligne, mais aussi pour rehausser la typographie globale

Voir la démo

• La démo CodePen permet d’expérimenter des combinaisons de pretty, balance, césure, alignement, etc.
• Activez « show guides » et « show ghosts » pour comparer avant et après
• Il est possible d’observer l’effet dans plusieurs langues (anglais, arabe, allemand, chinois, japonais)

Répondre aux inquiétudes sur les performances

• Sur des contenus comportant beaucoup de lignes, cela peut avoir un impact sur les performances, mais il n’y a pas de problème pour un paragraphe ordinaire
• On peut l’utiliser librement tant qu’il ne s’agit pas de paragraphes de plusieurs centaines ou milliers de lignes
• Si nécessaire, WebKit prévoit de découper les longs paragraphes pour garantir les performances

Différence entre pretty et balance

• pretty conserve un texte qui remplit la largeur du conteneur tout en rendant les retours à la ligne plus naturels
• balance vise surtout à égaliser la longueur de toutes les lignes, ce qui remplit moins le conteneur
• En général, pretty convient au texte courant, tandis que balance est adapté aux titres, légendes et textes d’accroche
• Les deux peuvent s’utiliser sur des textes courts, mais il vaut mieux éviter balance pour les longs textes courants

Explication des autres valeurs de la propriété text-wrap

text-wrap: avoid-short-last-lines

• Nouvelle valeur ajoutée, elle se concentre uniquement sur l’évitement des dernières lignes trop courtes
• Elle n’est encore implémentée dans aucun navigateur

text-wrap: auto

• Valeur par défaut, elle utilise l’algorithme de « retour à la ligne glouton » employé depuis 1991
• À l’avenir, la valeur par défaut elle-même pourrait être améliorée dans les navigateurs

text-wrap: stable

• Elle fonctionne actuellement comme auto, mais fournit un retour à la ligne stable adapté au texte éditable
• Elle garantit que les retours à la ligne ne changent pas pendant une animation ou la saisie de texte

Les sous-propriétés de text-wrap

• text-wrap est en réalité une forme abrégée de deux propriétés : text-wrap-mode et text-wrap-style

• text-wrap-mode : définit si le retour à la ligne est autorisé (wrap / nowrap)

• text-wrap-style : choisit l’algorithme de retour à la ligne (auto, stable, balance, pretty, avoid-short-last-lines)

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

• En l’utilisant avec la propriété white-space, il faut aussi vérifier la manière dont les espaces sont traités

Résumé

• text-wrap: pretty permet un retour à la ligne du texte web bien plus sophistiqué qu’auparavant
• Il est implémenté dans Safari Technology Preview 216 avec une approche fondée sur l’évaluation du paragraphe entier
• Même appliqué à de longs textes courants, il pose très peu de problèmes de performances et apporte un net gain en lisibilité et en esthétique
• Il faut bien comprendre sa différence avec balance et le choisir selon le type de contenu

[GN⁺]

Avis sur Hacker News

• Ça me fait rire d’entendre que beaucoup de développeurs s’inquiètent des performances de "text-wrap: pretty". J’ai du mal à croire qu’ils soient si nombreux à se soucier des performances du retour à la ligne du texte
• Le contenu de la démo est en anglais. C’est un anglais bizarre. Ce n’est pas lié au sujet et, sauf s’il s’agit de réorganiser les mots pour améliorer les retours à la ligne, ce n’est pas pertinent
• J’espère que cette fonctionnalité sera ajoutée aux ereaders. Les ereaders ont de mauvais moteurs de mise en page
• Trop peu d’efforts et d’attention ont été consacrés à rendre le texte en ligne beau. Le web a ramené le texte plusieurs siècles en arrière. Cette fonctionnalité est donc la bienvenue
• La prise en charge de "text-wrap: pretty" a été ajoutée à Safari Technology Preview, apportant un niveau de raffinement sans précédent à la typographie web. D’après caniuse.com, Chrome prend en charge cette fonctionnalité depuis septembre 2023. Il est difficile de comprendre ce qui est « sans précédent »
• Quelqu’un connaît la différence entre "text-align: justify" et "text-wrap: pretty" ? Dans Chrome, "text-wrap: pretty" produit un effet bien plus doux. J’ai vérifié s’il valait mieux utiliser les deux dans le corps d’un blog moyen, et il semble que chacun apporte un changement distinct
• Cette fonctionnalité est excellente. Il n’est pas surprenant qu’elle se concentre sur les dernières lignes courtes et les bords irréguliers. En revanche, elle n’essaie pas encore d’éviter les rivières. Il est difficile d’imaginer comment définir une métrique qui les caractérise. Je me demande si quelqu’un a déjà inventé une métrique ingénieuse qui fonctionne réellement
• Le paragraphe censé éviter les mots orphelins laisse "large" tout seul. L’application de "text-wrap: pretty" corrige cela
• L’objectif de "pretty", tel que conçu par le CSS Working Group, est de laisser chaque navigateur faire ce qu’il peut pour améliorer le retour à la ligne du texte. Il ne s’agit pas de forcer tous les navigateurs à faire les mêmes choix. À cause de la manière dont Chrome l’a implémenté, beaucoup de développeurs web s’attendent à ce que cette valeur serve à éviter les dernières lignes trop courtes. Mais ce n’est pas son intention
• J’utilise déjà "text-wrap: balance" pour les titres. J’avais essayé de lier certains mots pour éviter de mauvais retours à la ligne. "text-wrap: pretty" devrait résoudre des problèmes similaires dans le corps du texte