Vous pouvez aligner des paragraphes ou des contenus de cellules de tableau selon vos préférences en utilisant les propriétés suivantes. Ces propriétés peuvent également être appliquées à tous les autres éléments auxquels une hauteur ou une largeur définie ou calculée peut être attribuée.
Indentation de la première ligne
Nous commençons avec la propriété text-indent. Cela définit comment la première ligne d'un paragraphe doit être indentée. Il est également possible d'indenter vers la gauche. Pour ce faire, une valeur négative de text-indent doit être utilisée. (Des informations détaillées sur quand une indententation extrême peut être judicieuse suivront ensuite). Une valeur numérique est attendue.
Voici un exemple :
.absatz { text-indent: 2em; }
Dans le navigateur, cela ressemble à ceci :
Si vous utilisez une valeur négative, une indentation du texte apparaîtra dans la première ligne de texte flottant.
.absatz {
text-indent: -2em;
}
Et bien sûr, voici un aperçu du résultat dans le navigateur :
Cela est également possible. Cependant, veillez à ce que les contenus soient toujours lisibles lorsque vous définissez des indentations. En fait, text-indent peut devenir intéressant en relation avec l'optimisation pour les moteurs de recherche. Par exemple, on préfère parfois afficher des images au lieu de texte.
Cependant, si le texte doit toujours être accessible aux moteurs de recherche, vous êtes alors confronté à un dilemme. Cela peut être résolu en utilisant text-indent. En effet, cette propriété vous permet de déplacer des textes hors du champ de vision des visiteurs.
L'avantage de la variante text-indent : Le texte à remplacer par une image est toujours présent dans le code source.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Cette syntaxe attribue une image de fond à l'élément h1. (La propriété background a déjà été introduite dans cette série). Avec text-indent: -99999px, le texte du titre est déplacé de 99999 pixels vers la gauche. Le texte n'est donc plus visible. Ce qui est affiché est effectivement uniquement l'image.
Si vous désactivez la feuille de style, le texte redevient visible normalement.
Définir la hauteur de ligne
J'avais déjà mentionné la hauteur de ligne une fois en relation avec la propriété font. Cette fois, nous approfondissons un peu ce sujet. La définition de la hauteur de ligne en relation avec la taille du texte (font-size) est intéressante.
La hauteur de ligne peut être définie à l'aide de la propriété line-height. Des valeurs numériques sont autorisées. Les valeurs en pourcentage sont également possibles. Elles se réfèrent alors à la taille de police de l'élément pour lequel la hauteur de ligne est spécifiée. Avant de définir la hauteur de ligne, notez ceci : il peut arriver qu'un navigateur/appareil accorde la priorité à la spécification de la hauteur de ligne par rapport à d'autres propriétés, et affiche des éléments coupés s'ils sont trop hauts. Cela peut être particulièrement frustrant avec des images. Testez donc les résultats avant de publier la page en ligne.
L'exemple suivant montre comment utiliser line-height.
<p style="line-height:1.4em; font-size:1em;">Parfois, vous avez créé une mise en page impressionnante, mais les photos manquent encore, et si vous utilisez simplement des cadres vides, la mise en page paraît assez nue. Il y a une meilleure solution :<br /> Dans cette formation vidéo, je vous montre les meilleures adresses web pour obtenir rapidement des espaces réservés pour images gratuits. Une liste géniale est disponible par exemple <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">ici</a>.</p> <p style="line-height:2em;font-size:1em;">Parfois, vous avez créé une mise en page impressionnante, mais les photos manquent encore, et si vous utilisez simplement des cadres vides, la mise en page paraît assez nue. Il y a une meilleure solution :<br /> Dans cette formation vidéo, je vous montre les meilleures adresses web pour obtenir rapidement des espaces réservés pour images gratuits. Une liste géniale est disponible par exemple <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">ici</a>.</p> <p style="line-height:1em; font-size:1em;">Parfois, vous avez créé une mise en page impressionnante, mais les photos manquent encore, et si vous utilisez simplement des cadres vides, la mise en page paraît assez nue. Il y a une meilleure solution :<br /> Dans cette formation vidéo, je vous montre les meilleures adresses web pour obtenir rapidement des espaces réservés pour images gratuits. Une liste géniale est disponible par exemple <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">ici</a>.</p>
Ici, trois paragraphes ont été définis, à chacun desquels des hauteurs de ligne différentes ont été attribuées.
Comme vous pouvez le constater, la lisibilité des textes justifiés peut être fortement influencée par la hauteur de la ligne. Il est donc recommandé de manipuler avec précaution la propriété line-height.
La question finale est bien sûr de savoir quelle hauteur de ligne il convient de choisir. En général, on considère des hauteurs de ligne comprises entre 130 et 150 pour cent.
p {
line-height: 150%;
}
Cependant, la bonne lisibilité dépend surtout de la largeur du texte. Dans ce cas, il faut retenir que la hauteur de ligne doit être d'autant plus grande que les lignes de texte sont longues. Il est donc essentiel de tester la page pour garantir la bonne lisibilité.
Alignement horizontal du texte
La propriété text-align définit l'alignement horizontal des paragraphes de texte et d'autres textes justifiés ou éléments en ligne contenus dans des éléments de bloc. Les valeurs suivantes peuvent être définies pour text-align:
• left – alignement à gauche
• right – alignement à droite
• center – centré
• justify – justifié
Voici un exemple à nouveau:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>Voici le résultat dans le navigateur:
Remarquez que text-align ne concerne pas uniquement les contenus textuels. En réalité, cette propriété s'applique à tous les éléments en ligne. Ainsi, si une image est intégrée, la définition de text-align s'applique également à cet élément.
Un dernier conseil: text-align ne devrait pas – du moins selon la spécification CSS officielle – avoir d'effet sur les éléments de bloc. (Même s'il existe des navigateurs qui l'appliquent aux éléments de bloc). Si vous souhaitez aligner des éléments de bloc, utilisez dans ce cas les propriétés margin déjà présentées.
