Formation 36

Mise en forme du texte : word-spacing , letter-spacing, vertical-align, text-align

Espacement entre les mots : word-spacing

Comme son nom l’indique, cette propriété CSS permet d’espacer ou de rapprocher les mots. Par défaut, cet espacement est normal (normal) mais vous pouvez spécifier une valeur différente en pixels, %, points, pouces, millimètres...

word-spacing: 10px;

Cette propriété a un comportement étrange et ne fonctionne pas à tous les coups... Il est parfois difficile de savoir pourquoi, mais cela provient en général de règles CSS contradictoires, comme un texte justifié par exemple.

Espacement des lettres : letter-spacing

Ce paramètre est identique au précédent mais agit sur l’espacement des lettres. Là aussi, l’espacement est par défaut normal (normal) mais vous pouvez spécifier votre propre valeur.

lettre-spacing: 120%;

Tout comme la propriété précédente, cette propriété CSS a un comportement étrange et ne fonctionne pas à tous les coups... Il est parfois difficile de savoir pourquoi, mais cela provient en général de règles CSS contradictoires, comme un texte justifié par exemple.

Alignement vertical du texte : vertical-align

Cette propriété modifie l’alignement vertical d’un texte par rapport à la ligne “ de base ” du reste du texte. Elle est généralement employée de deux manières distinctes.

 

La première méthode consiste à l’utiliser dans une cellule de tableau afin de positionner verticalement le texte :

  • verticalement au centre de la cellule : middle en langage CSS

  • le “ plaquer ” en haut de la cellule : top en langage CSS

  • le “ plaquer ” en bas de la cellule : bottom en langage CSS

vertical-align: middle;

 

Employée sur une balise de type inline, cette propriété peut également servir à décaler verticalement un bout de texte par rapport au reste du texte situé sur la même ligne. Dans ce cas, les attributs employés sont :

  • baseline : c’est le niveau “ normal ” du reste du texte. C’est la valeur par défaut.

  • une valeur numérique positive ou négative (en px, %, ex, em...). Le niveau de référence sera le niveau “ normal ” du reste du texte (“ baseline ”) pour les valeurs fixes et sera la hauteur de ligne (line-height) dans le cas d’un pourcentage.

  • indice (sub) : la ligne de base du texte décalé sera un peu plus bas que la ligne de base du reste du texte

  • superexposant (super) : la ligne de base du texte décalé sera un peu plus bas que la partie la plus haute des caractères du reste du texte.

  • haut du texte (text-top) : alignement sur le sommet des caractères les plus hauts du texte normal

  • bas du texte (text-bottom), alignement sur les parties les plus basses

  • milieu (middle) : alignement par le milieu vertical

  • haut (top) : le haut du texte décalé est aligné sur la partie la plus haute de la ligne

  • bas (bottom) : le bas du texte décalé est aligné sur la partie la plus basse de la ligne (ne fonctionne pas avec Internet Explorer)

Cette propriété a un comportement très aléatoire selon les navigateurs. Évitez de l’utiliser autant que possible ; il est souvent plus simple de jouer sur les marges intérieures et extérieures des blocs. Une autre alternative pour décaler verticalement un texte consiste à utiliser les balises HTML <sub> (indice) et <sup> (exposant).

Alignement du texte dans un paragraphe : text-align

Ce paramètre CSS permet de modifier l’alignement du texte d’un paragraphe. Il est possible :

  • d’aligner le texte à gauche (left)

  • de l’aligner à droite (right)

  • de le justifier (justify)

  • de le centrer (center)

text-align: justify;

Retrait du texte : text-indent

La propriété CSS text-indent décale la première ligne d’un paragraphe. Indiquez simplement la valeur qui vous convient en pixels, millimètres, points... Le retrait peut être positif ou négatif.

text-indent: 20px;

Espace blanc : white-space

Ce paramètre définit les modalités de retour à la ligne dans un paragraphe. Par défaut, le retour à la ligne est automatique (normal) en fonction de l’espace disponible à l’écran.

 

Mais vous pouvez imposer que le texte ne reviennent pas à la ligne (nowrap en CSS) sauf lorsqu’un retour à la ligne est imposé par la présence d’une balise HTML <br /> dans le code source.

 

Enfin, une troisième possibilité est l’attribut pre qui affiche le texte tel qu’il a été saisi dans le code source de la page, en respectant les retours à la ligne, les espaces (simples ou multiples) et les tabulations.

white-space: nowrap;

Mode d'affichage d'une balise : display

Display spécifie la manière dont un élément HTML est affiché. Voici les attributs les plus courants :

  • none : le bloc ne sera pas affiché

  • inline : le bloc sera considéré comme étant un bout de ligne (inline), la suite du texte s’ajoutera sur la même ligne

  • block : change un élément inline en bloc. La suite du texte sera rejetée sur une nouvelle ligne.

  • list-item : le bloc sera affiché comme un élément de liste (avec une puce)

Les autres attributs sont très rarement employés et tous ne sont pas interprétés de la même manière par tous les navigateurs. Nous ne détaillons donc pas leur fonctionnement dans ce mémo.



Pour plus d'informations, vous pouvez nous contacter par mail.

 

Tutos et cours en ligne

Ergonomie et accessibilit�R�f�rencementHTML / CSS