Une technique classique de typographie permettant de créer à la main des sauts de ligne pour les blocs de texte équilibrés est disponible dans CSS.
La valeur balance de text-wrap fait partie du texte CSS de niveau 4. Consultez les exemples de cet article pour découvrir comment cette ligne de code CSS peut considérablement améliorer la mise en page de votre texte.
Sans text-wrap: balance, les graphistes, les éditeurs de contenu et les éditeurs disposent de quelques outils pour modifier l'équilibre des lignes. Les meilleures options sont d'utiliser <wbr> ou ­ pour guider les mises en page de texte et prendre des décisions plus éclairées concernant l'emplacement des lignes et des mots.
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 pour un traitement efficace et esthétique de l'habillage du texte se trouvent dans le navigateur. C'est pourquoi nous voyons l'encapsulation du titre comme dans l'image suivante:
.unbalanced {
max-inline-size: 50ch;
}
Avec text-wrap: balance à partir de CSS Text 4, vous pouvez demander au navigateur de déterminer la solution de retour à la ligne équilibré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.
Le résultat du retour à la ligne équilibré dans le navigateur ressemble à ce qui suit aujourd'hui:
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
Il est utile de les afficher côte à côte, immobiles 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.
Trouver l'équilibre
Les titres sont la première chose que les lecteurs voient. Ils doivent être visuellement attrayants et faciles à lire. Cela attire l'attention des utilisateurs et leur donne un sentiment de qualité et d'assurance. Une bonne typographie donne confiance aux lecteurs et les encourage à poursuivre la lecture.
Traditionnellement, cette tâche était effectuée à la main ou de façon optique, car le concepteur équilibrant le texte veut plaire à l'œil et non au calcul. Ce sujet est souvent appelé alignement métrique ou alignement optique. Pour les publications importantes telles que le New York Times, la mise en balance des titres est un élément 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 les lettres. Les résultats ont évolué au fur et à mesure de l'évolution des outils et des techniques. De nos jours, les concepteurs ont une couleur, un poids, une taille et plus encore pour équilibrer le texte dans leurs conceptions.
Sur le Web, le contrôle disponible est toutefois moindre, car le document change de taille et de couleur en fonction des utilisateurs. text-wrap: balance permet d'équilibrer le texte sur le Web de manière automatisée, en s'appuyant sur le travail et les traditions des graphistes du secteur de l'impression.
Équilibrez les titres
Il s'agira, et devrait être, le principal cas d'utilisation de text-wrap: balance. Dessinez l'œil avec une taille appropriée et rendez-le symétrique et lisible pour l'œil. Définissez tous les titres sur un retour à la ligne équilibré avec le 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 escomptés, car le texte doit renvoyer à la ligne et doit donc avoir une longueur de ligne maximale appliquée. Dans cet article, vous verrez un max-inline-size défini sur les exemples de cet article. Ce style est semblable à max-width, mais il peut être défini une seule fois pour n'importe quelle langue.
Limites
La tâche d'équilibrer le texte n'est pas sans frais. Le navigateur doit effectuer une boucle sur les itérations pour identifier la solution d'encapsulation la plus équilibrée. Ce coût de performances est atténué par une règle. Il ne fonctionne que pour six lignes encapsulées et moins.
Considérations sur les performances
Il n'est pas judicieux d'appliquer un équilibre de retour à la ligne du texte à l'ensemble de votre conception. Cette requête est gaspillée en raison de la limite de six lignes et peut affecter la vitesse d'affichage des pages.
* {
text-wrap: balance;
}
h1, h2, h3, h4, h5, h6, blockquote {
text-wrap: balance;
}
L'avantage de cette fonctionnalité, c'est qu'il n'est pas nécessaire d'attendre et de chronométrer l'équilibrage du texte lors du chargement des polices, comme vous le faites peut-être aujourd'hui avec JavaScript. 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'un ne demande aucun retour automatique à la ligne et l'autre demande un retour à la ligne équilibré. Pour contourner ce problème, désactivez la propriété d'espace blanc. L'enveloppement équilibré peut ensuite être réappliqué.
.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 le retour à la ligne équilibré du texte, car elles modifient l'élément 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. On peut le voir dans cet exemple:
Vous voyez que la largeur indiquée dans les outils de développement comporte un tas d'espace supplémentaire à la fin ?
En effet, il s'agit uniquement d'un style d'enveloppement, pas d'un style qui change les tailles. De ce fait, du moins à mon avis, text-wrap: balance n'est pas très performant dans certains cas. Par exemple, les en-têtes à l'intérieur d'une carte (ou tout conteneur avec des bordures ou des ombres).
Un retour à la ligne équilibré, ironiquement, crée un déséquilibre dans l'élément contenu.
Brève explication de la technique utilisée par le navigateur
Le navigateur effectue une recherche binaire sur la largeur la plus petite, sans générer de lignes supplémentaires, en s'arrêtant à un pixel CSS (pas à un pixel d'affichage). Pour réduire davantage les pas dans la recherche binaire, le navigateur commence par 80% de l'épaisseur moyenne de la ligne.