direction
Baseline
Widely available
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
Attention :
Dans la mesure du possible, il est recommandé aux autrices et auteurs d'éviter d'utiliser la propriété CSS direction et de préférer l'attribut global HTML dir.
La propriété CSS direction définit le sens du texte, des colonnes de tableau et de grille, ainsi que du débordement horizontal. Utilisez rtl pour les langues écrites de droite à gauche (comme l'hébreu ou l'arabe), et ltr pour celles écrites de gauche à droite (comme l'anglais et la plupart des autres langues).
Notez que la direction du texte est généralement définie dans un document (par exemple, avec l'attribut dir de HTML) plutôt que par l'utilisation directe de la propriété direction.
Exemple interactif
direction: ltr;
direction: rtl;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
padding: 0.75em;
width: 80%;
max-height: 300px;
display: flex;
}
#example-element > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
margin: 10px;
flex: 1;
}
Syntaxe
direction: ltr;
direction: rtl;
/* Valeurs globales */
direction: inherit;
direction: initial;
direction: revert;
direction: revert-layer;
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.
Description
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 ou de grille.
Contrairement à l'attribut dir en HTML, la propriété direction n'est pas héritée des colonnes de tableau vers les cellules, car l'héritage CSS suit l'arborescence du document et les cellules sont à l'intérieur des lignes, mais pas à l'intérieur des colonnes.
Les propriétés direction et unicode-bidi sont les deux seules propriétés qui ne sont pas affectées par la propriété raccourcie all.
Définition formelle
| Valeur initiale | ltr |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | Not animatable |
Syntaxe formelle
direction =
ltr |
rtl
Exemples
Définir la direction de droite à gauche
Dans l'exemple ci-dessous, deux chaînes de texte sont affichées avec direction: rtl. Le texte en arabe s'affiche correctement avec ce réglage, mais le texte en anglais affiche maintenant un point final à un emplacement inhabituel.
blockquote {
direction: rtl;
width: 300px;
}
<blockquote>
<p>
Ce paragraphe est en français mais s'affiche incorrectement de droite à
gauche.
</p>
<p></p>
</blockquote>
<blockquote>
<p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
<p></p>
</blockquote>
Spécifications
| Specification |
|---|
| CSS Writing Modes Level 4 # direction |
| Scalable Vector Graphics (SVG) 2 # DirectionProperty |
Compatibilité des navigateurs
Voir aussi
- La propriété
unicode-bidi - La propriété
writing-mode - L'attribut SVG
direction - L'attribut universel HTML
dir - Créer des contrôles de formulaire verticaux
- Gérer différentes directions de texte