Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

La propriété direction doit être paramétrée afin de correspondre à la direction du texte :rtl (Right To Left pour droite à gauche) pour les textes en hébreu ou en arabe et ltr (Left To Right pour gauche à droite) pour les autres. Cela doit normalement être fait dans le document (par exemple, en utilisant l'attribut dir en HTML) plutôt qu'avec une feuille de style CSS.

La propriété définit la direction principale du texte des éléments de type bloc et celle des éléments incorporés créés par la propriété unicode-bidi. Elle définit également l'alignement par défaut du texte et des éléments de type bloc, ainsi que le sens de progression des cellules dans une ligne de tableau.

Contrairement à l'attribut HTML dir, la propriété direction n'est pas héritée pour les cellules depuis les colonnes d'un tableau car l'héritage CSS suit l'arborescence du document et les cellules sont à l'intérieur des lignes et non à l'intérieur des colonnes.

Les propriétés direction et unicode-bidi sont les deux seuls propriétés qui ne sont pas affectés par la propriété raccourcie all.

Valeur initialeltr
Applicabilitétous les éléments
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

direction: ltr;
direction: rtl;

/* Valeurs globales */
direction: inherit;
direction: initial;
direction: unset;

Valeurs

ltr
La valeur par défaut qui correspond à une disposition de la gauche vers la droite pour le texte et les autres éléments.
rtl
Le texte et les autres éléments vont de la droite vers la gauche.

Afin que la propriété direction ait un effet sur les éléments en ligne, il faut que la valeur de la propriété unicode-bidi soit embed ou override.

Syntaxe formelle

ltr | rtl

Exemples

CSS

blockquote {
  direction: rtl;
}

HTML

<blockquote>
  Du reste, depuis son bain dans la mare aux larmes,
  tout était changé : la salle, la table de verre, et
  la petite porte avaient complétement disparu.
</blockquote>

Résultat

Spécifications

Spécification État Commentaires
CSS Writing Modes Module Level 3
La définition de 'direction' dans cette spécification.
Candidat au statut de recommandation Aucune modification.
CSS Level 2 (Revision 1)
La définition de 'direction' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 2.0 1.0 (1.7 ou moins) 5.5 9.2 1.3
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1.0) 6 8 3.1

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, ksad, FredB, Mgjbot, Fredchat, Kyodev, VincentN
 Dernière mise à jour par : SphinxKnight,