L'une des propriétés de la typographie d'un site Web que vous pouvez choisir d'ajuster au cours du développement d'un site est la façon dont le texte du site est justifié. Par défaut, le texte du site Web est justifié à gauche et c'est le nombre de sites qui laissent leur texte. Les seules autres options sont justifiées à droite, ce qui est rare, ou pleinement justifiées.
Texte justifié est un bloc de texte qui s'aligne à la fois sur les côtés gauche et droit, par opposition à un seul de ces côtés (ce que font les justifications "gauche" et "droite"). L'effet doublement justifié est obtenu en ajustant les espaces de mots et de lettres dans chaque ligne de texte pour s'assurer que chaque ligne a la même longueur. Cet effet est appelé justification complète. Justifier le texte en CSS en utilisant le aligner le texte propriété.
Comment fonctionne la justification?
La raison pour laquelle vous voyez souvent un bord inégal sur le côté droit d'un bloc de texte est que chaque ligne de texte n'a pas la même longueur. Certaines lignes ont plus de mots ou des mots plus longs tandis que d'autres ont des mots moins nombreux ou plus courts. Pour justifier ce bloc de texte, des espaces supplémentaires doivent être ajoutés à certaines lignes pour égaliser toutes les lignes et les rendre cohérentes.
Chaque navigateur Web a son propre algorithme pour appliquer les espaces supplémentaires dans une ligne. Les navigateurs examinent la longueur des mots, la césure et d'autres facteurs pour déterminer où placer les espaces. Par conséquent, le texte justifié peut ne pas sembler identique d'un navigateur à l'autre. Soyez assuré, cependant, que la prise en charge des principaux navigateurs est bonne pour justifier le texte avec CSS.
Comment justifier le texte
La justification du texte avec CSS nécessite une section de texte à justifier. En règle générale, vous utiliserez des paragraphes de texte car de gros blocs de contexte de texte qui s'étendent sur plusieurs lignes seront balisés avec des balises de paragraphe.
Une fois que vous avez un bloc de texte à justifier, il suffit de définir le style sur justifié avec la propriété CSS text-align style. Appliquez cette règle CSS à un sélecteur approprié pour que le bloc de texte s'affiche comme prévu.
Quand justifier le texte
Beaucoup de gens aiment l'apparence du texte justifié du point de vue de la conception, en grande partie parce qu'il crée un aspect très cohérent et mesuré, mais il y a des inconvénients à justifier pleinement le texte sur une page Web.
Premièrement, le texte justifié peut être difficile à lire. En effet, lorsque vous justifiez du texte, beaucoup d'espace supplémentaire peut parfois être ajouté entre certains mots sur la ligne. Ces lacunes incohérentes peuvent rendre le texte plus difficile à lire. Ceci est particulièrement important sur les pages Web, qui peuvent déjà être difficiles à lire en raison de l'éclairage, de la résolution ou d'autres qualités matérielles. L'ajout d'espaces inhabituels au texte peut aggraver une mauvaise situation.
En plus des problèmes de lisibilité, les espaces blancs s'alignent parfois les uns avec les autres pour créer des "rivières" d'espaces blancs au milieu du texte. Ces grands espaces blancs peuvent vraiment créer un affichage gênant. De plus, sur des lignes extrêmement courtes, la justification peut entraîner des lignes contenant un mot avec des espaces supplémentaires entre les lettres elles-mêmes.
Alors, quand devriez-vous utiliser la justification du texte? Le meilleur moment pour justifier le texte se produit lorsque les lignes sont longues et que la taille de la police est petite, ce qui est difficile à garantir sur les sites Web réactifs où la longueur des lignes change en fonction de la taille de l'écran. Il n'y a pas de chiffre précis pour la longueur de la ligne ou la taille du texte; vous devez utiliser votre meilleur jugement.
Après avoir appliqué le style text-align pour justifier le texte, testez-le pour vous assurer que le texte ne contient pas de rivières d'espaces blancs - et testez-le à différentes tailles. Le test le plus simple ne nécessite rien de plus compliqué que vos propres yeux plissés. Les rivières se détachent comme des taches blanches dans un bloc de texte par ailleurs gris. Si vous voyez des rivières, vous devez modifier la taille du texte ou la largeur du bloc de texte pour redistribuer le texte.
N'utilisez la justification qu'après l'avoir comparée au texte aligné à gauche. Vous aimerez peut-être la cohérence de la justification complète, mais le texte standard justifié à gauche est généralement plus lisible. En fin de compte, vous devez justifier le texte car vous avez choisi de justifier le texte à des fins de conception et avez confirmé que votre site reste facile à lire.