Accueil >CSS >Référence CSS – propriétés, sélecteurs, fonctions >direction

direction

direction: ltr | rtl

Définit le sens de base du texte et des éléments en ligne : de gauche à droite, ou de droite à gauche (arabe, hébreu, persan). Elle change aussi l’alignement par défaut du texte, l’ordre des colonnes d’un tableau et le sens des propriétés logiques (margin-inline-start…).

Valeurs

ltr – par défaut : de gauche à droite.
rtl – de droite à gauche.

Valeur initiale : ltr. Héritée : oui. S’applique à : tous les éléments.

Exemples

Le sens fixé avec l’attribut dir en HTML – avec des propriétés logiques, le CSS fonctionne alors pour les deux sens :

<p class="start">Le français de gauche à droite.</p>
<p class="start" dir="rtl">العربية من اليمين إلى اليسار</p>

.start {
  max-width: 300px;
  margin: 0 0 6px;
  padding-inline-start: 10px;
  border-inline-start: 4px solid #38b8f9;
}

Résultat

Le français de gauche à droite.

العربية من اليمين إلى اليسار

Points d’attention

Le sens du texte fait partie du contenu, pas de l’apparence : pour un document ou un paragraphe en arabe ou en hébreu, réglez-le avec l’attribut dir="rtl" en HTML (avec la langue dans lang). Il fonctionne alors même sans CSS, dans les lecteurs d’écran et dans les moteurs de recherche. Gardez la propriété direction pour les exceptions.
Elle n’agit pas sur l’ordre des lettres à l’intérieur des mots – c’est l’algorithme Unicode qui le règle selon les caractères ; direction fixe le sens du paragraphe et l’ordre des passages mélangés.
Ne l’utilisez pas pour « retourner » la mise en page d’un site de gauche à droite – Flexbox (row-reverse) et grid sont faits pour cela.

Prise en charge par les navigateurs

Baseline – largement disponible : fonctionne dans tous les navigateurs courants, et depuis longtemps (au plus tard depuis 2015). Depuis la version : Chrome 2, Firefox 1, Safari 1. État : octobre 2026 (MDN browser-compat-data).

Voir aussi :
writing-mode
margin-inline et margin-block
text-align
:lang()