Encapsulation de texte CSS: jolie

Activer le retour automatique à la ligne optimisé, pour plus de rapidité.

Adam Argyle
Adam Argyle

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

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

Les veuves et les orphelins typographiques sont des mots uniques qui se trouvent à la fin d'un paragraphe ou d'un bloc de texte. Les veuves sont des mots isolés en haut d'un bloc de texte, et les orphelins sont 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 éviter.

Un paragraphe s'affiche avec un veuve au début et un orphelin à la fin, par rapport au même paragraphe sans les orphelins ou les veuves.
Image provenant de Google Fonts—Widows & Orphans

À partir de Chrome 117, il est possible d'éviter les orphelins en utilisant une 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 le trait d'union si des lignes consécutives composées apparaissent à la fin d'un paragraphe ou ajuste les lignes précédentes pour faire de la place. Il s'adaptera également de manière appropriée pour justifier le texte. text-wrap: pretty est destiné à améliorer les retours à la ligne et les sauts de texte, en général pour les orphelins. À l'avenir, text-wrap: pretty proposera peut-être d'autres améliorations.

Comparaison d'un paragraphe avec des orphelins et un autre avec aucun orphelin, chacun avec un badge de "mauvais" ou de "bon".
Image provenant de l'article Pourquoi supprimer les orphelins de votre corps de texte.

text-wrap: balance, qui n'empêche pas les orphelins, mais garantit que le texte est renvoyé à la ligne de façon à 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 déterminer les considérations relatives aux performances, voici un lien vers le document de conception créé par l'ingénieur situé derrière la caractéristique, Koji Ishii.

Si vous avez d'autres améliorations ou suggestions pour les sauts de ligne, n'hésitez pas à nous en faire part. Signalez un problème dans l'outil de suivi des bugs Chromium en fournissant des détails, des exemples de bons et de mauvais sauts de ligne, et nous vous recontacterons.