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:

    
    
    
    


    
Comment justifier du texte en HTML5
    

        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. 
    
    

        É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.
    

Explication:

• Structure HTML:
  • Le
    la balise est utilisée pour le titre, et deux
    les balises sont utilisées pour les paragraphes de texte.
• CSS:
  • Le alignement du texte : justifier ; le style s'applique à tous
    é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.

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 :

    
    
    
    


    
Comment justifier du texte en HTML5
    

        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.
    
    

        Ce paragraphe ne sera pas justifié car il n'a pas la classe « justify-text ».
    

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 :

1. Lisibilité: Justified text can sometimes create uneven spacing between words, especially if the line length is short. This can affect readability. It’s important to test the justification on different devices and screen sizes to ensure a clean, readable appearance.
2. 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'union propriété (bien que tous les navigateurs ne prennent pas en charge cette fonctionnalité).

   p { text-align: justify; hyphens: auto; /* Permet la césure automatique */}
   

3. 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, ou centre, en utilisant le alignement du texte proprié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