Améliorer la mise en page et la lisibilité du texte

La mise en page du texte, en particulier à la fin des lignes et des paragraphes, peut avoir un impact sur la lisibilité et l'esthétique d'une page. Le CSS propose plusieurs options de retour automatique à la ligne qui peuvent améliorer des cas d'utilisation spécifiques.

Pour les blocs de texte courts tels que les titres, utilisez text-wrap: balance. Cette propriété indique au navigateur de répartir le texte de manière aussi uniforme que possible sur les lignes, ce qui crée une apparence plus symétrique.

La propriété CSS text-wrap: pretty vous permet d'améliorer la qualité typographique du corps du texte en activant un algorithme de retour à la ligne plus sophistiqué. Il est spécialement conçu pour éviter les "orphelins" (mots isolés sur la dernière ligne d'un paragraphe) et créer un "rag" visuel plus agréable pour les longs blocs de texte.

Implémentation

1. Identifier les éléments de texte :

Pour text-wrap: balance, sélectionnez des blocs de texte courts, comme des titres et des en-têtes de tableau. Évitez les éléments comportant des cadres visibles, tels que des bordures ou des arrière-plans, car cela peut créer des zones vides inattendues dans la mise en page.

Pour text-wrap: pretty, sélectionnez les éléments susceptibles de contenir de longs blocs de texte où les mots orphelins (mots isolés) ou les sauts de ligne incorrects sont les plus visibles. Cela inclut les éléments suivants :

• <p>
• <blockquote>
• <li>
• Tout autre élément susceptible de contenir de longs passages de texte.

Choisir la bonne méthode d'encapsulation

2. Appliquez l'habillage choisi :

Appliquez text-wrap: balance spécifiquement aux éléments courts de plusieurs lignes, tels que les titres (h1-h6), les sous-titres ou les citations.

/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
  /* Enables balanced line-breaking logic */
  text-wrap: balance;
}

Utilisez text-wrap: pretty pour activer un algorithme optimisé qui évalue les dernières lignes d'un paragraphe afin de trouver les meilleurs points de rupture.

/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
  /* Enables pretty line-breaking logic for body copy */
  text-wrap: pretty;
}

Contraintes critiques et performances

text-wrap: balance

• Limite de lignes : les navigateurs imposent une limite au nombre de lignes qu'ils tenteront d'équilibrer pour maintenir les performances (généralement 6 lignes dans Chromium et 10 lignes dans Firefox). Si le texte dépasse cette limite, le navigateur revient au comportement wrap standard. Évitez d'utiliser text-wrap: balance sur des blocs de texte susceptibles de dépasser ces limites.
• Application ciblée : n'appliquez PAS text-wrap: balance de manière globale (par exemple, * { text-wrap: balance; }). L'algorithme de "recherche binaire" itératif utilisé par les navigateurs est coûteux en ressources de calcul. Limitez son utilisation à des éléments de texte spécifiques et courts.
• Interaction avec la largeur : text-wrap: balance ne modifie pas la largeur du conteneur (inline-size). Il n'affecte que la façon dont le texte est renvoyé à la ligne dans cette largeur. Cela peut laisser un espace vide à la fin du conteneur, ce qui peut affecter les mises en page qui reposent sur des blocs de texte en pleine largeur.

text-wrap: pretty

• Performances et qualité : OBLIGATOIRE : text-wrap: pretty est plus gourmand en ressources de calcul que l'algorithme wrap (glouton) par défaut, car il évalue plusieurs lignes (généralement les quatre dernières) pour optimiser les points d'arrêt. Évitez de l'appliquer de manière globale à chaque élément si votre page contient une quantité excessive de texte.
• Idéal pour le texte multiligne : les avantages de pretty sont plus évidents dans les paragraphes de trois lignes ou plus. Il n'a que peu ou pas d'effet sur les textes courts d'une seule ligne.
• Comportement spécifique au navigateur : sachez que les détails d'implémentation varient. Les navigateurs basés sur Chromium se concentrent généralement sur les quatre dernières lignes, tandis que d'autres moteurs peuvent évaluer l'intégralité du paragraphe.

Stratégies de remplacement

Dans les navigateurs qui ne sont pas compatibles avec text-wrap: balance ou text-wrap: pretty, la propriété est ignorée et le texte est renvoyé à la ligne en utilisant le comportement wrap par défaut. Il s'agit d'une amélioration progressive qui se dégrade de manière élégante en typographie standard. Votre contenu reste ainsi parfaitement lisible sur tous les navigateurs, tout en offrant une expérience de qualité supérieure sur ceux qui sont compatibles.

Pour les mises en page critiques où une mise en page de texte affinée est requise, utilisez une bibliothèque JavaScript, mais sachez que cela peut être lent et entraîner des problèmes de performances.