Attribut HTML universel : dir

Exemple interactif

<p dir="rtl">
  Ce paragraphe est en Français mais il s'affiche incorrectement de droite à
  gauche.
</p>
<p dir="ltr">
  Ce paragraphe est en Français et s'affiche correctement de gauche à droite.
</p>

<hr />

<p>هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.</p>
<p dir="auto">
  هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.
</p>

Il peut prendre les valeurs suivantes :

• ltr, qui signifie gauche à droite et doit être utilisé pour les langues écrites de gauche à droite (comme l'anglais) ;
• rtl, qui signifie droite à gauche et doit être utilisé pour les langues écrites de droite à gauche (comme l'arabe) ;
• auto, qui délègue la décision à l'agent utilisateur. Il utilise un algorithme basique qui analyse les caractères à l'intérieur de l'élément jusqu'à trouver un caractère ayant une direction forte, puis applique cette direction à l'ensemble de l'élément.

Si la valeur n'est pas spécifiée, elle est héritée de l'élément parent.

Cet attribut peut être remplacé par les propriétés CSS direction et unicode-bidi, si une feuille CSS est active et que l'élément prend en charge ces propriétés.

Comme la direction du texte est liée sémantiquement à son contenu et non à sa présentation, il est recommandé aux développeur·euse·s web d'utiliser cet attribut plutôt que les propriétés CSS associées lorsque cela est possible. Ainsi, le texte s'affichera correctement, y compris dans un navigateur qui ne prend pas en charge le CSS ou si le CSS est désactivé.

Héritage

Si un élément n'a pas d'attribut dir, il hérite de la valeur dir définie sur son nœud parent, qui peut, à son tour, l'hériter de son parent, et ainsi de suite.

Notes d'utilisation

Une image peut avoir sa propriété dir réglée sur "rtl" auquel cas les attributs HTML title et alt seront formatés et définis comme "rtl".

Lorsqu'un tableau a son dir réglé sur "rtl", l'ordre des colonnes est disposé de droite à gauche.

Cet attribut est obligatoire pour l'élément <bdo> où il a une signification sémantique différente.

Cet attribut n'est pas hérité par l'élément <bdi>. S'il n'est pas défini, sa valeur est auto.

Les navigateurs peuvent permettre aux utilisateur·ice·s de modifier la direction des éléments <input> et <textarea> afin d'aider à la rédaction de contenu. Chrome et Safari proposent une option de direction dans le menu contextuel des champs de saisie. Firefox utilise Ctrl (Windows)/Cmd (macOS) + Maj + X à l'intérieur d'un <textarea> pour basculer la direction du texte. Ces fonctionnalités basculent la valeur de l'attribut dir entre ltr et rtl.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Tous les attributs universels
• La propriété HTMLElement.dir qui reflète cet attribut.
• Gérer les différentes directions de texte