Accueil    CSS    Propriété Direction
 



style css direction  Style CSS direction

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété direction permet de définir au sein de la balise qu'elle caractérise l'alignement des différents éléments qu'elle contient : soit de gauche à droite (comportement par défaut), soit de droite à gauche.
Elle n'inverse ni le sens des lettres, ni le sens les mots au sein d'un élément donné mais inverse le style de l'élément lui-même (comme par exemple l'affichage des puces des listes ou des colonnes des tableaux) et provoque un alignement équivalent à la propriété "text-align".

Pour inverser le texte, il faut employer le style css unicode-bidi en association avec la propriété direction. La balise html <bdo> (bidirectional algorithm) permet également d'inverser le sens des caractères.


Propriétés pour le style direction :




Propriété Définition Valeurs CSS
direction Permet de définir le mode d'alignement horizontal des éléments d'un conteneur ltr
rtl
inherit
CSS 2


Exemple d'utilisation du style css clear :





Affichage de blocs de textes dans un conteneur avec la propriété direction ltr puis rtl :

<div style="width:500px; border:dashed 1px black;direction:ltr; padding:10px;">
   <span>exemple de direction ltr : </span>
   <span>gauche</span>
   <span>à</span>
   <span>doite</span>
</div>

<div style="width:500px; border:dashed 1px black;direction:rtl; padding:10px;">
   <span>exemple de direction rtl : </span>
   <span>doite</span>
   <span>à</span>
   <span>gauche</span>
</div>


Affichage d'une liste avec direction rtl :

<ul style="direction:rtl;">
   <li>valeur 1</li>
   <li>valeur 2</li>
   <li>valeur 3</li>
   <li>valeur 4</li>
</ul>


Affichage d'un tableau html avec direction rtl :

<table cellpadding='2' rules='all' cellspacing='0' style='direction:rtl; width:60%; text-align:center; border:solid 1px black; border-collapse:collapse;'>
  <tr>
    <th>Titre Col A</th>
    <th>Titre Col B</th>
  </tr>
  <tr>
    <td>Valeur 1 Col A</td>
    <td>Valeur 1 Col B</td>
  </tr>
  <tr>
    <td>Valeur 2 Col A</td>
    <td>Valeur 2 Col B</td>
  </tr>
</table>



Affichage de blocs de textes dans un conteneur avec la propriété direction ltr puis rtl :

exemple de direction ltr :
gauche à droite


exemple de direction rtl :
droite à gauche



Affichage d'une liste avec direction rtl :

  • valeur 1
  • valeur 2
  • valeur 3
  • valeur 4



Affichage d'un tableau html avec direction rtl :

Titre Col ATitre Col B
Valeur 1 Col AValeur 1 Col B
Valeur 2 Col AValeur 2 Col B