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. 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
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Sans text-wrap: balance
; les concepteurs, les éditeurs de contenu
et les éditeurs ont
quelques outils
pour modifier l'équilibre des lignes. La meilleure option est d'utiliser
<wbr>
ou
­
pour vous aider
orienter la mise en page du texte afin de prendre de meilleures décisions sur l’endroit où les lignes et les mots doivent être séparés.
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">![Le titre est mis en évidence par les outils de développement, s'étend sur toute la largeur de son espace intégré et comporte deux mots suspendus sur la deuxième ligne.](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-fe0c4a80e307b.png?authuser=19&hl=fr)
.unbalanced {
max-inline-size: 50ch;
}
Avec text-wrap: balance
dans CSS Text 4, vous pouvez demander au navigateur de
trouver la meilleure solution de renvoi
à 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'habillage du texte avec équilibrage du navigateur se présentent aujourd'hui comme suit:
![Comme pour les outils de développement précédents, le titre est mis en évidence, mais cette fois-ci, il ne s'étend pas sur toute la largeur. Il commence une nouvelle ligne avant la fin et, en tant que tel, un bloc de texte équilibré.](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-0861292a42f0d.png?authuser=19&hl=fr)
.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 s'empare une meilleure attention et est globalement plus facile à lire.
Le juste milieu
Les titres sont la première chose que voient les lecteurs. elles doivent être visuellement attrayantes et facile à lire. Cela attire l'attention de l'utilisateur et donne une idée de la qualité et garantie. Une bonne typographie donne confiance aux lecteurs, les encourageant à lire la suite.
Traditionnellement, cette tâche était effectuée à la main, ou optiquement, comme le concepteur équilibrer le texte veut plaire à l'œil et non aux calculs. Ce sujet est souvent appelé alignement métrique et alignement optique. Pour les publications importantes telles que New York Times, l'équilibrage des titres est un détail très important de l'expérience utilisateur.
<ph type="x-smartling-placeholder">L'équilibre du texte dans la typographie remonte aux débuts de l'impression, lorsque les imprimantes placerait des lettres. Les outils et les techniques ont évolué, de même que les résultats. De nos jours, 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, 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 et
les traditions des designers
de l'industrie de l'impression.
Équilibrer les titres
Il s'agira et devrait être le principal cas d'utilisation de text-wrap: balance
. 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 permettra peut-être pas d'obtenir les résultats attendus, car
doit être renvoyé à la ligne automatiquement. Une longueur de ligne maximale est donc 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
La tâche d'équilibrage du texte n'est pas libre. 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 et moins.
<ph type="x-smartling-placeholder">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'un en raison de la limite de six lignes, ce qui peut avoir un impact sur la vitesse d'affichage des pages.
* { text-wrap: balance; }
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. La le navigateur s'en charge !
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 contourner ce problème,
annulez 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 permettent
d'obtenir un texte équilibré
l'encapsulation, car ils modifient l'max-width
de l'élément conteneur lui-même. Ce
a en plus l'avantage d'être "enveloppé" au 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. En raison de
il existe des cas où text-wrap: balance
n'est pas très bien,
le moins à mon avis. Par exemple, les titres d'une carte (ou de tout autre 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 trouver la largeur minimale, n'entraîne pas de lignes supplémentaires et s'arrête à un pixel CSS (pas d'affichage (Pixel). Pour réduire davantage le nombre d'étapes de la recherche binaire, le navigateur commence par 80% de l'épaisseur de ligne moyenne.