Mise en page optimisée du texte (à activer) pour privilégier l'esthétique à la vitesse.
À 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 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.
À 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.
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.