Stylisation du texte

Les déclarations servant à styliser le texte peuvent être divisées en deux groupes : les propriétés relatives à la présentation du texte, traitées ici, et celles relatives à la police de caractères, qui font l'objet de la prochaine page.

Dans ce qui suit, la valeur inherit pour une propriété indique que la valeur doit être héritée de l'élément parent. Si une valeur apparait en caractères gras dans un tableau, c'est qu'il s'agit de la valeur par défaut.

Propriétés de base

Le tableau suivant donne les propriétés et les valeurs les plus courantes concernant le texte :

Propriétés du texte

Propriété Valeurs possibles
text-align left | right | center | justify | inherit
text-decoration none | underline | overline | line-through | inherit
text-indent longueur | pourcentage | inherit
text-transform none | capitalize | uppercase | lowercase | inherit

Le sens de ces déclarations est comme suit :

text-align spécifie si le texte doit être aligné à gauche (left), à droite (right), au centre (center) ou justifié (justify).

text-decoration indique si on veut du texte normal, souligné (underline), surligné (overline) ou barré (line-through).

text-indent sert à indenter le début des paragraphes. On peut spécifier une longueur ou un pourcentage de la longueur des lignes. La valeur par défaut est 0.

text-transform peut être utilisé pour mettre la première lettre de chaque mot en majuscule (capitalize), mettre tout le texte en majuscules (uppercase) ou tout le texte en minuscules (lowercase).

Autres propriétés

Parmi les autres propriétés, il y en a trois qui pourraient probablement vous être utile. La première est line-height :

line-height normal | longueur | nombre | pourcentage | inherit

qui fixe la distance entre les lignes. Outre le défaut du navigateur (normal), vous pouvez spécifier une longueur en pixels ou en cadratins, un pourcentage de la taille de la police ou un facteur (par exemple, 1.5em, 1.5 et 150% correspondent tous les trois à une distance entre deux lignes qui est une fois et demie la taille de la police). La propriété peut aussi être héritée de l'élément parent (inherit).

La seconde propriété est word-spacing :

word-spacing normal | longueur | inherit

qui permet d'augmenter (si la valeur est positive) ou de diminuer (si la valeur est négative) l'espacement entre les mots¹. La valeur par défaut est normal. Une valeur modeste comme 1px ajouterait un pixel à l'espacement normal et pourrait contribuer à la lisibilité du texte (une valeur de -1px soustrairait un pixel à l'espacement normal).

Finalement, la troisième propriété est vertical-align :

vertical-align baseline | longueur | sub | super | top | text-top | middle | bottom | text-bottom | inherit

Sans entrer dans des détails trop techniques, mentionnons simplement que cette propriété peut être utile pour aligner le texte dans un tableau avec le haut (top) ou le bas (bottom) de la cellule où il se trouve.

______________________________________________________________________________

¹ Il existe aussi une propriétés pour fixer l'écart entre les lettres qui pourrait s'avérer utile dans certaines circonstances.

Accueil