CSS text-wrap: balance

Une technique typographique classique qui consiste à créer manuellement des sauts de ligne pour équilibrer les blocs de texte est désormais disponible en CSS.

Adam Argyle

La valeur balance pour text-wrap fait partie de CSS Text Level 4. Consultez les exemples de cet article pour découvrir comment cette ligne de CSS peut améliorer considérablement la mise en page de votre texte.

Sans text-wrap: balance, les concepteurs, les éditeurs de contenu et les éditeurs disposent de peu d'outils pour modifier l'équilibre des lignes. Les meilleures options disponibles consistent à utiliser <wbr> ou ­ pour aider à guider les mises en page de texte vers des décisions plus intelligentes sur l'endroit où insérer des retours à la ligne et des césures.

En tant que développeur, vous ne connaissez pas la taille finale, la taille de la police ni même la langue d'un titre ou d'un paragraphe. Toutes les variables nécessaires à un traitement efficace et esthétique du retour automatique à la ligne se trouvent dans le navigateur. C'est pourquoi nous voyons des titres qui s'affichent sur plusieurs lignes, comme dans l'image suivante :

.unbalanced {
  max-inline-size: 50ch;
}

Avec text-wrap: balance de CSS Text 4, vous pouvez demander au navigateur de trouver la meilleure solution de retour automatique à la ligne pour le texte. Le navigateur connaît tous les facteurs, comme la taille de la police, la langue et la zone allouée. Voici à quoi ressemble le retour automatique à la ligne équilibré du navigateur aujourd'hui :

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

Il est utile de les voir côte à côte, fixes et sans informations de débogage superposées.

Votre œil devrait être beaucoup plus satisfait du bloc de texte équilibré. Elle attire mieux l'attention et est globalement plus facile à lire.

Le juste milieu

Les titres sont la première chose que les lecteurs voient. Ils doivent être visuellement attrayants et faciles à lire. Cela attire l'attention de l'utilisateur et lui donne un sentiment de qualité et d'assurance. Une bonne typographie inspire confiance aux lecteurs et les encourage à poursuivre leur lecture.

Traditionnellement, cette tâche était effectuée à la main ou de manière optique, car le concepteur qui équilibre le texte souhaite plaire à l'œil, et non aux mathématiques. On parle souvent d'alignement métrique par rapport à l'alignement optique. Pour les grandes publications comme le New York Times, l'équilibrage des titres est un détail très important pour l'expérience utilisateur.

L'équilibrage du texte dans la typographie remonte aux débuts de l'imprimerie, lorsque les imprimeurs plaçaient les lettres à la main. Les résultats ont évolué en même temps que les outils et les techniques. Aujourd'hui, les concepteurs disposent de la couleur, de l'épaisseur, de la taille et d'autres éléments pour équilibrer le texte dans leurs conceptions.

Sur le Web, le contrôle est toutefois moins important, car la taille et les couleurs du document changent en fonction des utilisateurs. text-wrap: balance apporte l'art de l'équilibrage du texte sur le Web de manière automatisée, en s'appuyant sur le travail et les traditions des concepteurs de l'industrie de l'impression.

Équilibrer les titres

Il s'agit du cas d'utilisation principal de text-wrap: balance. Attirez l'attention avec la taille, et assurez-vous que le texte est symétrique et lisible. Définissez le retour automatique à la ligne de tous les titres sur "équilibré" à l'aide du code CSS suivant :

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

L'application de ce style ne vous fournira peut-être pas les résultats escomptés, car le texte doit être renvoyé à la ligne et donc avoir une longueur de ligne maximale appliquée quelque part. Vous verrez un max-inline-size défini sur les exemples de cet article. Ce style est semblable à max-width, mais peut être défini une seule fois pour n'importe quelle langue.

Limites

L'équilibrage du texte n'est pas sans frais. Le navigateur doit effectuer des itérations pour trouver la meilleure solution d'habillage équilibrée. Ce coût de performances est atténué par une règle, mais ne fonctionne que pour six lignes enveloppées ou moins.

Considérations sur les performances

Il n'est pas judicieux d'appliquer l'équilibrage de l'habillage de texte à l'ensemble de votre conception. Il s'agit d'une requête inutile, en raison de la limite de six lignes, et cela peut avoir un impact sur la vitesse d'affichage de la page.

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

L'un des principaux avantages de cette fonctionnalité est que vous n'avez pas besoin d'attendre et de synchroniser l'équilibrage de l'habillage du texte avec le chargement des polices, comme vous le faites peut-être avec JavaScript aujourd'hui. Le navigateur s'en charge !

Interactions avec la propriété white-space

L'équilibrage du texte est en conflit avec la propriété white-space, car l'une demande à ce qu'il n'y ait pas de retour à la ligne et l'autre demande un retour à la ligne équilibré. Pour résoudre ce problème, annulez la propriété d'espace blanc. L'habillage équilibré pourra alors s'appliquer à nouveau.

.balanced {
  white-space: unset;
  text-wrap: balance;
}

L'équilibrage ne modifie pas la taille inline de l'élément.

Certaines solutions JavaScript pour l'habillage équilibré du texte présentent un avantage, car elles modifient le max-width de l'élément conteneur lui-même. Cela présente l'avantage supplémentaire d'être "sous blister" pour le bloc équilibré. text-wrap: balance n'a pas cet effet, comme le montre cet exemple :

Vous voyez que la largeur affichée dans les outils pour les développeurs comporte beaucoup d'espace supplémentaire à la fin ? En effet, il s'agit uniquement d'un style d'habillage, et non d'un style de modification de la taille. C'est pourquoi, selon moi, il existe quelques scénarios où text-wrap: balance n'est pas idéal. Par exemple, les titres à l'intérieur d'une fiche (ou de tout conteneur avec des bordures ou des ombres).

Ironiquement, le retour automatique à la ligne équilibré crée un déséquilibre dans l'élément qu'il contient.

Brève explication de la technique utilisée par le navigateur

Le navigateur effectue une recherche binaire pour trouver la largeur la plus petite qui ne provoque pas de lignes supplémentaires, en s'arrêtant à un pixel CSS (et non un pixel d'affichage). Pour minimiser davantage les étapes de la recherche binaire, le navigateur commence par 80% de la largeur de ligne moyenne.