Justifier un texte est une tâche courante en conception web. Elle permet de créer une mise en page soignée et professionnelle en alignant le texte uniformément le long des marges gauche et droite. En HTML5, la justification du texte est généralement gérée par des feuilles de style en cascade (CSS) plutôt que directement dans les balises HTML.
Pourquoi justifier le texte ?
Justifier un texte crée un bloc de texte uniforme qui s'aligne sur les bords gauche et droit d'un contenant, à la manière d'un texte de journal ou de livre. Cette méthode est souvent utilisée pour améliorer l'esthétique des paragraphes, rendant le texte plus soigné et organisé.
Comment justifier du texte avec CSS en HTML5
Vous pouvez justifier du texte en HTML5 en utilisant le alignement du texte propriété en CSS. La alignement du texte La propriété contrôle l'alignement horizontal du texte dans un conteneur. Pour justifier le texte, utilisez simplement la valeur justifier.
Voici comment vous pouvez le faire :
Exemple:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de texte justifié</title>
<style>
/* CSS to justify the text */ p {
text-align: justify;
}
</style>
</head>
<body>
<h1>Comment justifier du texte en HTML5</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis felis velit. Nulla facilisi. Entier convallis, orci a egestas sodales, orci lorem lacinia lorem, eget pretium eros lorem eu erat. Quisque euismod, lorem sit amet tempor feugiat, mauris erat dictum arcu, sed suscipit justo nulla a dui. Nunc assis amet magna nisi. Entier auctor nec metus eget vulputate. Suspendisse vitae urna eget augue volutpat iaculis non sit amet mi.
</p>
<p>
Énéen tincidunt, arcu nec tincidunt aliquet, nisl risus maximus nunc, sed bibendum risus velit a augue. Curabitur suscipit, lectus id efficitur mollis, metus lectus tincidunt ligula, id luctus magna risus et sapien. Nulla facilisi. Proin elementum sit amet purus a fermentum. Ut et velit a mi volutpat auctor.
</p>
</body>
</html>
Explication:
- Structure HTML:
- Le
<h1>la balise est utilisée pour le titre, et deux<p>les balises sont utilisées pour les paragraphes de texte.
- Le
- CSS:
- Le
alignement du texte : justifier ;le style s'applique à tous<p>éléments. Cela garantit que le texte à l'intérieur de ces balises de paragraphe sera justifié, ce qui signifie qu'il s'étirera pour aligner les marges gauche et droite.
- Le
Alternative : Justifier le texte pour des éléments spécifiques
Si vous ne souhaitez pas appliquer la justification à tous les paragraphes, mais uniquement à certains d'entre eux, vous pouvez utiliser une classe ou un ID pour cibler des éléments particuliers.
Exemple utilisant une classe :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de texte justifié</title>
<style>
/* CSS to justify only paragraphs with the class 'justify-text' */ .justify-text {
text-align: justify;
}
</style>
</head>
<body>
<h1>Comment justifier du texte en HTML5</h1>
<p class="justify-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis felis velit. Nulla facilisi. Entier convallis, orci a egestas sodales, orci lorem lacinia lorem, eget pretium eros lorem eu erat. Quisque euismod, lorem sit amet tempor feugiat, mauris erat dictum arcu, sed suscipit justo nulla a dui.
</p>
<p>
Ce paragraphe ne sera pas justifié car il n'a pas la classe « justify-text ».
</p>
</body>
</html>
Dans cet exemple, seul le paragraphe avec la classe justifier le texte est justifié et le deuxième paragraphe reste aligné à gauche.
Choses à garder à l'esprit :
- Lisibilité: Un texte justifié peut parfois créer un espacement irrégulier entre les mots, surtout si la longueur de la ligne est courte. Cela peut nuire à la lisibilité. Il est important de tester la justification sur différents appareils et tailles d'écran pour garantir une apparence nette et lisible.
- Césure: Le texte justifié peut également entraîner des césures gênantes. Pour améliorer l'apparence du texte, vous pouvez activer la césure en CSS à l'aide de l'option
traits d'unionpropriété (bien que tous les navigateurs ne prennent pas en charge cette fonctionnalité).p { text-align: justify; hyphens: auto; /* Permet la césure automatique */} - Alignements alternatifs:Si vous décidez que la justification n'est pas très esthétique dans tous les cas, vous pouvez expérimenter d'autres alignements de texte, tels que
gauche,droite, oucentre, en utilisant lealignement du textepropriété.
Conclusion
Justifier un texte en HTML5 est simple à réaliser en utilisant CSS avec le alignement du texte : justifier ; Propriété. Il permet de créer des blocs de texte clairs et professionnels, couramment utilisés dans les livres, les journaux et les sites web. Que vous souhaitiez justifier du texte sur toute la page ou seulement pour des éléments spécifiques, CSS offre un moyen simple d'implémenter cette fonctionnalité et de l'adapter à vos besoins.
Photo de Lucas
