Le CSS est une technique de typographie classique qui consiste à créer manuellement des sauts de ligne pour les blocs de texte équilibrés.
La valeur balance de text-wrap fait partie du texte CSS niveau 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 quelques outils pour modifier l'équilibre des lignes. Les meilleures options disponibles consistent à utiliser <wbr> ou ­ pour guider la mise en page de texte afin de prendre des décisions plus avisées concernant l'emplacement des sauts de lignes et de mots.
En tant que développeur, vous ne connaissez pas la taille finale, la taille de police ni même la langue d'un titre ou d'un paragraphe. Toutes les variables nécessaires à un traitement efficace et esthétique de l'habillage du texte se trouvent dans le navigateur. C'est pourquoi le titre s'affiche comme dans l'image suivante:
.unbalanced {
max-inline-size: 50ch;
}
Avec text-wrap: balance de CSS Text 4, vous pouvez demander au navigateur de déterminer la solution de renvoi de ligne équilibrée la plus adaptée pour le texte. Le navigateur connaît tous les facteurs, tels que la taille de la police, la langue et la zone allouée.
Les résultats de l'habillage du texte avec équilibrage du navigateur se présentent aujourd'hui comme suit:
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
Il est utile de les voir côte à côte, immobiles et sans superposition d'informations de débogage.
Votre œil devrait être beaucoup plus satisfait du bloc de texte équilibré. Il attire mieux l'attention et est globalement plus facile à lire.
Le juste milieu
Les titres sont la première chose que voient les lecteurs. Ils doivent être visuellement attrayants et faciles à lire. Cela attire l'attention de l'utilisateur, et donne un sentiment de qualité et d'assurance. Une bonne typographie donne de l'assurance aux lecteurs et les encourage à poursuivre la lecture.
Traditionnellement, cette tâche était effectuée à la main, ou optiquement, car le concepteur qui équilibre le texte souhaite plaire à l'œil, et non aux calculs. Ce sujet est souvent appelé alignement métrique ou alignement optique. Pour les publications importantes comme le New York Times, l'équilibrage des titres est un détail très important concernant l'expérience utilisateur.
L'équilibre du texte dans la typographie remonte aux débuts de l'impression, lorsque les imprimantes plaçaient des lettres. Les outils et les techniques ont évolué, de même que les résultats. Aujourd'hui, les concepteurs ont la couleur, le poids, la taille et plus encore, pour équilibrer le texte dans leurs conceptions.
Toutefois, sur le Web, il y a moins de contrôle disponible, car le document change de taille et de couleur en fonction des utilisateurs. text-wrap: balance apporte l'art d'équilibrer le texte sur le Web de manière automatisée, en s'appuyant sur le travail et les traditions des concepteurs du secteur de l'impression.
Équilibrer les titres
Il s'agira et devrait être le principal cas d'utilisation de text-wrap: balance. Dessinez l'œil avec de la taille et faites en sorte qu'il soit symétrique et lisible pour l'œil. Définissez tous les titres sur un retour automatique à la ligne équilibré à l'aide du code CSS suivant:
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}
Le simple fait d'appliquer ce style peut ne pas vous fournir les résultats attendus, car le texte doit être renvoyé à la ligne automatiquement et donc avoir une longueur de ligne maximale appliquée à partir de n'importe quel endroit. Un max-inline-size est 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
La tâche d'équilibrage du texte n'est pas libre. Le navigateur doit effectuer une boucle sur les itérations pour trouver la solution d'encapsulation la plus équilibrée possible. Ce coût lié aux performances est atténué par une règle. Il ne fonctionne que pour six lignes encapsulées et moins.
Considérations sur les performances
Ce n'est pas une bonne idée d'appliquer un équilibre du retour automatique à la ligne à toute votre conception. Il s'agit d'une requête gaspillée, en raison de la limite de six lignes, qui 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'avantage de cette fonctionnalité est qu'il n'est pas nécessaire d'équilibrer le retour automatique à la ligne du texte lors du chargement de la police, comme vous le faites peut-être avec JavaScript aujourd'hui. Le navigateur s'en charge !
Interactions avec la propriété white-space
Le texte d'équilibrage est en concurrence avec la propriété white-space, car l'une demande aucun retour à la ligne et l'autre un encapsulage équilibré. Pour contourner ce problème, désactivez la propriété d'espace blanc, puis l'encapsulation équilibrée peut s'appliquer à nouveau.
.balanced {
white-space: unset;
text-wrap: balance;
}
L'équilibrage ne modifie pas la taille intégrée de l'élément
Certaines solutions JavaScript présentent un avantage pour l'encapsulation équilibré du texte, car elles modifient l'max-width de l'élément conteneur lui-même. Cela a l'avantage d'être "encapsulé" dans le bloc équilibré. text-wrap:
balance n'a pas cet effet, comme illustré dans l'exemple suivant:
Vous voyez que la largeur indiquée dans les outils de développement comporte un espace supplémentaire à la fin.
En effet, il s'agit uniquement d'un style de retour à la ligne, et non d'un style changeant de taille. Pour cette raison, il existe quelques scénarios dans lesquels text-wrap: balance n'est pas si génial, du moins à mon avis. Il peut s'agir, par exemple, de titres à l'intérieur d'une carte (ou de tout conteneur avec des bordures ou des ombres).
Ironiquement, un retour à la ligne équilibrée crée un déséquilibre par rapport à l'élément contenu.
Brève explication de la technique utilisée par le navigateur
Le navigateur effectue une recherche binaire pour obtenir la largeur minimale, sans générer de lignes supplémentaires, en s'arrêtant à un pixel CSS (et non à un pixel d'affichage). Pour réduire davantage le nombre d'étapes de la recherche binaire, le navigateur commence avec 80% de la largeur de ligne moyenne.