Propriété CSS direction

La propriété CSS direction définit la direction d'écriture de base du texte et du contenu en ligne — soit de gauche à droite (ltr, valeur par défaut), soit de droite à gauche (rtl). C'est cette propriété qui permet aux scripts de droite à gauche tels que l'arabe, l'hébreu, le persan et l'ourdou de s'afficher correctement.

Cette page explique ce que direction contrôle, en quoi elle diffère de l'attribut HTML dir, quand vous en avez réellement besoin, et les pièges courants à éviter.

Ce qu'affecte direction

Définir direction sur un élément de niveau bloc modifie plusieurs choses à la fois :

La direction de base du texte du contenu de l'élément.
L'alignement par défaut du texte à l'intérieur de cet élément (rtl aligne le texte à droite, ltr à gauche), sauf si vous le remplacez avec text-align.
L'ordre dans lequel les cellules de tableau s'enchaînent dans une ligne (la plus à droite en premier pour rtl).
La direction des intégrations bidirectionnelles créées conjointement avec la propriété unicode-bidi.

direction influence également le côté sur lequel apparaissent les puces de liste, les barres de défilement et le dépassement, car le début en ligne de l'élément est inversé.

direction vs. l'attribut HTML dir

Dans les documents réels, la direction est généralement définie avec l'attribut HTML dir (<html dir="rtl">) plutôt qu'avec la propriété CSS, car dir porte une signification sémantique dont dépendent les technologies d'assistance et l'algorithme bidi du navigateur.

Les deux ne sont pas parfaitement équivalents : contrairement à l'attribut HTML dir, la propriété CSS direction n'est pas héritée dans les cellules de tableau depuis les colonnes de tableau — les cellules de tableau vivent à l'intérieur des lignes, pas des colonnes, de sorte qu'une cellule hérite sa direction de l'élément tableau lui-même.

Info

Pour modifier l'ordre d'une mise en page purement visuelle (éléments flex/grid, marges, rembourrage), préférez les propriétés logiques modernes et writing-mode. Utilisez direction spécifiquement pour la direction de lecture du texte. Voir writing-mode.

Valeur initiale	ltr
S'applique à	Tous les éléments.
Héritée	Oui.
Animable	Discret.
Version	CSS2
Syntaxe DOM	object.style.direction = "rtl";

Syntaxe

Syntaxe de la propriété CSS direction

direction: ltr | rtl | initial | inherit;

Exemple : comparaison de ltr et rtl

Le <p> conserve la direction ltr par défaut ; le <div> est basculé en rtl, donc son texte commence au bord droit et se lit vers la gauche.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        direction: rtl;
      }
    </style>
  </head>
  <body>
    <p>As you can see, this text is written with default direction.</p>
    <div>However, this text is written from right to left as we defined.</div>
  </body>
</html>

Essayez vous-même »

Résultat

![Propriété CSS direction](https://api.w3docs.com/uploads/media/default/0001/03/576170a14b5c571d29380b8bdc5880bafac595b3.png "CSS direction property rtl example" =420x)

Dans l'exemple ci-dessus, la valeur rtl est utilisée, donc le texte dans le <div> s'écoule de droite à gauche et s'aligne à droite par défaut.

Exemple : une liste et une citation de droite à gauche

Comme direction inverse le début en ligne, les marqueurs de liste et l'alignement de texte par défaut se déplacent vers le côté droit — exactement ce que vous souhaitez pour un extrait en arabe ou en hébreu.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .rtl {
        direction: rtl;
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <ul class="rtl">
      <li>First item</li>
      <li>Second item</li>
    </ul>
  </body>
</html>

Les puces s'affichent à droite et le texte s'aligne à droite — sans aucune règle text-align.

Valeurs

Valeur	Description	Tester
ltr	Indique que la direction du texte ira de gauche à droite. C'est la valeur par défaut de la propriété.	Tester »
rtl	Indique que la direction du texte ira de droite à gauche.	Tester »
initial	Définit la propriété à sa valeur par défaut.	Tester »
inherit	Hérite la propriété de son élément parent.

Pièges courants

direction n'a pas d'effet sur l'ordre des boîtes en ligne par lui-même. Pour réordonner réellement un texte mêlant des parties de gauche à droite et de droite à gauche, vous avez également besoin de unicode-bidi (par exemple unicode-bidi: bidi-override).
Alignement vs. direction. rtl change l'alignement par défaut, mais une règle text-align explicite prend toujours le dessus. Si le texte s'aligne dans le "mauvais" sens après avoir changé de direction, vérifiez qu'il n'y a pas un text-align conflictuel.
Elle est héritée. Définissez direction une seule fois sur un conteneur de haut niveau (ou via <html dir="rtl">) et toute la sous-arborescence en hérite, sauf les cellules de tableau comme indiqué ci-dessus.

Propriétés associées

unicode-bidi — contrôle précis du texte bidirectionnel.
writing-mode — flux vertical vs. horizontal et direction de bloc.
text-align — alignement horizontal explicite du contenu en ligne.

Exercice

Pratique

Que fait la propriété CSS 'direction' ?

Définit la direction du texte pour le contenu d'un élément.Contrôle la direction du conteneur flexElle ne s'applique pas aux éléments en ligne.Elle a un impact sur l'ordre des colonnes de tableau.