Activez le retour automatique à la ligne, pour plus de rapidité et de beauté.
À 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;
}
Les orphelins et veuves typographiques sont des mots isolés à la fin d'un paragraphe ou d'un bloc de texte. Les veuves sont des mots seuls en haut d'un bloc de texte et les orphelins sont seuls au bout 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 s'efforcent de les éviter.
À 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 du texte, actuellement axé sur les orphelins.
À l'avenir, text-wrap: pretty pourra proposer d'autres améliorations.
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 liées aux 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.