Text-wrap CSS: solde

Une technique de typographie classique consistant à créer manuellement des retours à la ligne pour équilibrer les blocs de texte est désormais disponible dans CSS.

Adam Argyle

La valeur balance pour text-wrap fait partie du CSS Text Level 4. Examinez les exemples de cet article pour savoir comment cette ligne de CSS peut améliorer considérablement vos mises en page de texte.

Navigateurs pris en charge

• 114
• 114
• 121
• 17,5

Source

Essayer une démonstration

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 sont d'utiliser <wbr> ou ­ pour guider les mises en page de texte afin de prendre des décisions plus judicieuses sur l'endroit où couper les lignes et les 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 paragraphe. Toutes les variables nécessaires à une conception efficace et esthétique du renvoi à la ligne du texte se trouvent dans le navigateur. C'est pourquoi les titres comme dans l'image suivante:

<ph type="x-smartling-placeholder">

</ph> Essayer une démo

.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 à la ligne équilibrée pour le texte. Le navigateur connaît tous les facteurs, comme la taille de la police, la langue et la zone allouée. Les résultats de l'ajustement du texte dans le navigateur se présentent comme suit :

Essayer une démonstration

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

Il est utile de les voir côte à côte, sans mouvement 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 des utilisateurs et leur donne un sentiment de qualité et de confiance. Une bonne typographie donne confiance aux lecteurs, les encourageant à poursuivre leur lecture.

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

Essayer une démo

Remarque : Équilibrer le texte principal de l'article n'est pas courant, car il n'a pas besoin de se démarquer ni d'attirer l'attention du lecteur.

L'équilibrage du texte en typographie remonte aux débuts de l'impression, lorsque les imprimeurs plaçaient les lettres à la main. Les résultats ont évolué à mesure que les outils et les techniques ont évolué. De nos jours, les concepteurs peuvent utiliser la couleur, l'épaisseur, la taille, etc. pour équilibrer le texte dans leurs conceptions.

Toutefois, sur le Web, il y a moins de contrôle, car le document change tailles et couleurs en fonction des utilisateurs. text-wrap: balance vous apporte l'art de pour un équilibrage automatique entre le texte et le Web, en s'appuyant sur le travail les traditions des designers de l'industrie de l'impression.

Titres des articles sur l'équilibre

Il s'agit du cas d'utilisation principal de text-wrap: balance, et il doit en être ainsi. Tirage au sort l'œil avec de la taille et le rendre symétrique et lisible pour l'œil. Définir tous les titres vers un retour automatique à la ligne équilibré, avec le code CSS suivant:

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

Le simple fait d'appliquer ce style ne vous donnera peut-être pas les résultats attendus, car le texte doit être mis en forme et doit donc avoir une longueur de ligne maximale appliquée quelque part. 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 toutes les langues.

Limites

L'équilibrage du texte n'est pas gratuit. Le navigateur doit effectuer une boucle pour découvrir la solution d'encapsulation la plus équilibrée possible. Ces performances le coût est atténué par une règle, il ne fonctionne que pour six lignes encapsulées ou moins.

Essayer une démonstration

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, et elle peut avoir un impact sur la vitesse de rendu de la page.

À éviter

* {
  text-wrap: balance;
}

RÉFLÉCHISSEZ AU PROBLÈME

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

L'avantage de cette fonctionnalité est que vous n'avez pas besoin d'attendre et de passer le retour à la ligne automatique. avec le chargement des polices, comme vous le feriez avec JavaScript aujourd'hui. Le navigateur s'en occupe !

Interactions avec la propriété white-space

L'équilibre du texte est en concurrence white-space car l'un ne demande aucun wrapping et l'autre l'autre l'encapsulation équilibrée. Pour résoudre ce problème, désélectionnez la propriété d'espace négatif, puis l'ajustement équilibré peut être appliqué à nouveau.

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

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

Certaines solutions JavaScript permettent d'obtenir un texte équilibré encapsulant, car ils modifient l'max-width de l'élément conteneur lui-même. L'avantage supplémentaire est qu'il est "emballé sous film rétractable" au bloc équilibré. text-wrap: balance n'a pas cet effet, comme le montre cet exemple :

Notez 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 d'un style de mise en forme uniquement, et non d'un style de modification de taille. Par conséquent, il existe quelques scénarios où text-wrap: balance n'est pas si efficace, du moins à mon avis. Par exemple, les titres dans une fiche (ou tout conteneur avec des bordures ou des ombres).

Ironie du sort, un retour à la ligne équilibré 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 efficace de la largeur la plus petite, qui ne génère aucune ligne supplémentaire, et s'arrête à un pixel CSS (et non à un pixel d'affichage). Pour réduire davantage le nombre d'étapes de la recherche binaire, le navigateur commence par 80% de l'épaisseur de ligne moyenne.