direction

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

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.

Exemple interactif

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.

Syntaxe

css
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.

Définition formelle

Valeur initialeltr
Applicabilitétous les éléments
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationNot animatable

Syntaxe formelle

direction = 
ltr |
rtl

Exemples

CSS

css
blockquote {
  direction: rtl;
}

HTML

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

Résultat

Spécifications

Specification
CSS Writing Modes Level 4
# direction
Scalable Vector Graphics (SVG) 2
# DirectionProperty

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
direction
ltr
rtl
Control direction of vertical range sliders, meters, and progress bars

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support

Voir aussi