Encapsulation de texte CSS: jolie

Mise en page optimisée du texte (à activer) pour privilégier l'esthétique à la vitesse.

Adam Argyle

À partir de Chrome 117, vous pouvez utiliser une nouvelle fonctionnalité de retour à la ligne : text-wrap: pretty, disponible à partir du niveau 4 du texte CSS.

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

Les orphelins et veuves typographiques sont des mots isolés à la fin d'un paragraphe ou d'un bloc de texte. Les orphelins sont des mots seuls en haut d'un bloc de texte, tandis que les veuves sont des mots seuls à la fin d'un bloc de texte. Ils peuvent interrompre la façon dont nos yeux parcourent le texte, ce qui rend le contenu plus difficile à lire. Certains concepteurs les évitent à tout prix et font tout leur possible pour les empêcher.

Un paragraphe est affiché avec une orpheline au début et une veuve à la fin, par rapport au même paragraphe sans orpheline ni veuve.
Image issue de Google Fonts – Widows & Orphans

À partir de Chrome 117, vous pouvez éviter les éléments orphelins avec une seule ligne de code CSS: text-wrap: pretty.

Cette fonctionnalité ne se contente pas de s'assurer que les paragraphes ne se terminent pas par un seul mot. Elle ajuste également la césure si des lignes consécutives avec césure apparaissent à la fin d'un paragraphe ou ajuste les lignes précédentes pour faire de la place. Il s'ajustera également de manière appropriée à la justification du texte. text-wrap: pretty permet d'améliorer généralement le retour à la ligne et la coupure de texte, actuellement axé sur les orphelins. À l'avenir, text-wrap: pretty pourra proposer d'autres améliorations.

Comparaison d'un paragraphe avec des orphelins et d'un autre sans orphelins, chacun avec un badge "Mauvais" ou "Bon".
Image issue de Pourquoi supprimer les orphelins du corps de votre texte

Il existe également text-wrap: balance, qui n'empêche pas les orphelins, mais garantit que le texte se plie de manière à créer un bloc de texte harmonieux. Personnellement, j'utilise balance pour les titres et pretty pour les paragraphes.

Si vous souhaitez en savoir plus sur l'algorithme utilisé pour déterminer le nombre optimal de lignes ou sur les considérations de performances, cliquez ici pour accéder au document de conception créé par l'ingénieur à l'origine de cette fonctionnalité, Koji Ishii.

Si vous avez d'autres suggestions ou améliorations concernant le forçage de la ligne, n'hésitez pas à nous en faire part. Signalez le problème dans l'outil de suivi des bugs Chromium en fournissant les détails, des exemples de coupures de ligne correctes et incorrectes, et nous vous contacterons.