Propriété CSS direction

La propriété direction définit la direction de texte.

La propriété direction définit la base de la direction de texte des éléments de niveau bloc et la direction des intégrations qui sont créées par la propriété unicode-bidi. Elle définit également l'alignement initiale de texte des éléments de niveau bloc et la direction de flot des cellules dans une rangée de tableau.

L'une des différences de l'attribut dir dans HTML est que la propriété direction n'est pas héritée des colonnes de tableau aux cellules de tableau.

La propriété direction n'a aucun effet sur les éléments de niveau en ligne.

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

Syntaxe

direction: ltr | rtl | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      direction: rtl;
      }
    </style>
  </head>
  <body>
    <p>Comme vous le voyez, ce texte est écrit avec la direction initiale. </p>
    <div>De toute façon, ce texte est écrit du droit à gauche comme nous l'avez défini.</div>
  </body>
</html>

Essayez-vous-même!

Dans cet exemple, nous avons utilisée la valeur "rtl". Le texte va du droit à gauche.

Valeurs

Valeur	Description
ltr	Cela signifie que la direction de texte sera du gauche à droit. C'est la valeur initiale de cette propriété.
rtl	Cela signifie que la direction de texte sera du droit à gauche.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.