Propriété direction CSS
La propriété direction définit la direction du texte.
La propriété direction définit la direction de base du texte des éléments de niveau bloc et la direction des embeddings créés par la propriété unicode-bidi. Elle définit également l'alignement par défaut du texte des éléments de niveau bloc et la direction dans laquelle les cellules s'alignent au sein d'une ligne de tableau.
La direction du texte est généralement spécifiée dans un document, comme l'attribut dir de HTML, plutôt que d'utiliser directement la propriété direction. Contrairement à l'attribut HTML dir, la propriété CSS direction n'est pas héritée par les cellules de tableau depuis les colonnes de tableau, car les cellules se trouvent dans les lignes, et non dans les colonnes. À la place, les cellules héritent de la direction depuis l'élément table lui-même.
INFO
La propriété direction n'a aucun effet sur les éléments de niveau en ligne.
| Valeur initiale | ltr |
|---|---|
| S'applique à | Tous les éléments. |
| Héritée | Oui. |
| Animable | Discrète. |
| Version | CSS2 |
| Syntaxe DOM | object.style.direction = "rtl"; |
Syntaxe
Syntaxe de la propriété CSS direction
direction: ltr | rtl | initial | inherit;Exemple de la propriété direction :
Exemple de la propriété CSS direction avec la valeur rtl (de droite à 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>Résultat
Dans l'exemple donné, la valeur "rtl" est utilisée. Le texte s'écrit de droite à gauche.
Valeurs
| Valeur | Description | Tester |
|---|---|---|
| ltr | Indique que la direction du texte sera de gauche à droite. Il s'agit de la valeur par défaut de la propriété. | Tester » |
| rtl | Indique que la direction du texte sera de droite à gauche. | Tester » |
| initial | Définit la propriété sur sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété CSS 'direction' ?