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 justification du texte du site. Par défaut, le texte du site Web est justifié à gauche et il correspond au nombre de sites qui laissent leur texte. Les seules autres options sont justifiées à droite, chose que personne n'utilise sur les sites Web, car cela rendrait le texte pratiquement impossible à lire en ligne, ou ce que l'on appelle pleinement justifié.
Le 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 de chaque ligne de texte pour garantir que chaque ligne a la même longueur. Cet effet est appelé justification complète. Vous justifiez 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 du 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 alors que d'autres ont des mots moins ou plus courts. Pour justifier ce bloc de texte, des espaces supplémentaires doivent être ajoutés à certaines lignes afin d’égaliser toutes les lignes et de les rendre cohérentes.
Chaque fabricant de navigateurs 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. Cela convient car aucun visiteur du site ne passera d'un navigateur à un autre simplement pour comparer la longueur des lignes de votre site! Soyez assuré, toutefois, que les principaux navigateurs sont utiles pour justifier le texte avec CSS.
Comment justifier un texte
Justifier le texte avec CSS nécessite une section de texte à justifier. En règle générale, cela est fait pour les paragraphes de texte car de grands blocs de texte contenant plusieurs lignes seront marqués avec des balises de paragraphe.
Une fois que vous avez un bloc de texte à justifier, il vous suffit de définir le style sur justifié avec la propriété de style CSS text-align.
text-align: justifier;
Vous devez appliquer cette règle CSS à un sélecteur approprié pour que le bloc de texte soit restitué comme prévu.
Quand faut-il justifier un texte?
De nombreuses personnes apprécient l'aspect du texte justifié du point de vue de la conception, principalement parce qu'il crée un aspect très cohérent et mesuré, mais il existe des inconvénients à une justification complète du texte sur une page Web.
Premièrement, un texte justifié peut être difficile à lire. En effet, lorsque vous justifiez un texte, vous pouvez parfois ajouter beaucoup d'espace entre certains mots de la ligne. Ces lacunes 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 de la qualité matérielle. L'ajout d'espaces inhabituels au texte peut aggraver une situation déplorable.
Outre les problèmes de lisibilité, les espaces vides s'alignent parfois pour créer des "rivières" d'espaces blancs au milieu du texte. Ces grandes lacunes d'espace blanc peuvent vraiment faire un affichage maladroit. De plus, sur des lignes extrêmement courtes, la justification peut générer des lignes contenant un mot avec des espaces supplémentaires entre les lettres.
Alors, quand devriez-vous utiliser la justification de texte? Le meilleur moment pour justifier le texte survient lorsque les lignes sont longues et la taille de la police est petite (chose difficile à garantir sur les sites Web réactifs où la longueur des lignes varie en fonction de la taille de l'écran). Il n’existe pas de nombre précis pour la longueur de la ligne ou la taille du texte; vous devez faire preuve de la plus grande discrétion.
Après avoir appliqué le style d'alignement de texte pour justifier le texte, testez-le pour vous assurer que le texte ne comporte pas de fleuves d'espaces blancs. Veillez également à le tester à différentes tailles. Le moyen le plus simple de le faire est de le regarder les yeux plissés. Les rivières se détachent sous la forme de taches blanches dans un bloc de texte autrement gris. Si vous voyez des rivières, vous devez modifier la taille ou la largeur du texte afin de supprimer ces rivières inesthétiques.
Utilisez la justification uniquement après l'avoir comparée au texte aligné à gauche, comme indiqué dans cet article. Vous faites comme 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 vous avez confirmé que votre site reste facile à lire.
