Attribut HTML dir
L'attribut dir fait partie des attributs globaux et indique la direction du texte du contenu d'un élément. Découvrez sur quels éléments il s'applique.
L'attribut HTML dir spécifie la direction de base du texte du contenu d'un élément. Il est indispensable pour afficher correctement HTML dans les scripts de droite à gauche (RTL) tels que l'arabe, l'hébreu, le persan et l'ourdou. Des centaines de millions de personnes lisent des langues écrites dans ces scripts, et définir correctement la direction constitue donc un élément fondamental de l'internationalisation.
dir est un attribut global, vous pouvez donc l'utiliser sur n'importe quel élément HTML. La valeur utilisée par un élément est héritée de l'ancêtre le plus proche qui possède dir, et revient à ltr si aucun ancêtre ne le définit.
Valeurs
L'attribut dir peut prendre trois valeurs :
ltr— direction du texte de gauche à droite (valeur par défaut dans la plupart des navigateurs). Utilisée pour les scripts latin, cyrillique, grec, CJK et la plupart des autres scripts.rtl— direction du texte de droite à gauche. Utilisée pour l'arabe, l'hébreu et les scripts similaires.auto— laisse le navigateur décider en fonction du contenu, en utilisant l'heuristique du premier caractère directionnel fort (voir l'avertissement ci-dessous).
Syntaxe
<tag dir="ltr | rtl | auto">content</tag>Définir la direction du document avec dir sur <html>
L'utilisation la plus courante et la plus importante de dir est sur l'élément <html>. Cela définit la direction de base de toute la page, que tous les éléments héritent ensuite. Pour une page en arabe ou en hébreu, vous devez toujours associer dir="rtl" à l'attribut lang correspondant :
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<title>مرحبا بالعالم</title>
</head>
<body>
<h1>مرحبا بالعالم</h1>
<p>هذا مثال على نص يُكتب من اليمين إلى اليسار.</p>
</body>
</html>Comme dir="rtl" est placé sur <html>, le titre, le paragraphe, les puces de liste, la position de la barre de défilement et l'alignement du texte par défaut s'écoulent tous de droite à gauche sans balisage supplémentaire.
Exemple : effet RTL visible
L'exemple original appliquait dir="rtl" à du texte anglais, où l'effet est à peine perceptible. La direction n'est évidente qu'avec un véritable texte en script RTL ou avec une ponctuation mixte. Comparez ces paragraphes :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML dir attribute</title>
</head>
<body>
<p dir="ltr">שלום עולם — Hebrew greeting (forced ltr)</p>
<p dir="rtl">שלום עולם — Hebrew greeting (rtl)</p>
<p dir="auto">שלום עולם — Hebrew greeting (auto)</p>
</body>
</html>Dans le paragraphe rtl, l'hébreu s'écoule de droite à gauche et le texte suivant ainsi que la ponctuation sont réordonnés en conséquence. Dans le paragraphe auto, le navigateur détecte le premier caractère fort (hébreu) et choisit automatiquement rtl.
Quand définir ltr explicitement
Définir dir="ltr" sur un élément enfant est utile pour remplacer une direction rtl héritée. Par exemple, dans une page arabe (rtl) vous pouvez avoir un bloc de code, une URL ou un champ de formulaire en anglais qui doit rester de gauche à droite :
<html lang="ar" dir="rtl">
<body>
<p>عنوان الموقع:</p>
<p dir="ltr">https://www.w3docs.com/learn-html</p>
</body>
</html>Sans dir="ltr", l'URL hériterait de la direction rtl de la page et sa ponctuation pourrait être visuellement réordonnée de façon confuse.
Remarque sur auto
auto est pratique pour le contenu généré par les utilisateurs (commentaires, noms d'utilisateurs, résultats de recherche) lorsque vous ne connaissez pas la langue à l'avance. Mais cela repose sur une heuristique simple : le navigateur recherche le premier caractère directionnel fort et l'utilise pour choisir la direction de l'élément entier. Cela peut être incorrect — par exemple, un commentaire commençant par un emoji, un chiffre ou un mot latin mais composé majoritairement d'arabe sera mis en page de gauche à droite. Pour l'isolation par chaîne de texte à direction inconnue, préférez l'élément <bdi>, qui isole le texte et peut appliquer auto.
dir vs. <bdo>, <bdi> et CSS direction
Ces outils sont liés mais résolvent des problèmes différents :
- Attribut
dir— définit la direction de base héritée par un élément et ses enfants. Le navigateur applique toujours l'algorithme bidirectionnel Unicode (bidi) pour réordonner les séquences de direction mixte. <bdo>— remplacement bidirectionnel. Il force une seule direction et désactive le réordonnancement bidi automatique pour son contenu. Utilisez-le lorsque vous devez inverser les caractères indépendamment de leur direction naturelle.<bdi>— isolation bidirectionnelle. Il isole une portion de texte afin que sa direction ne puisse pas affecter le texte environnant — idéal pour intégrer du contenu utilisateur imprévisible.- CSS
direction— l'équivalent au niveau style de l'attributdir. L'attribut HTMLdirest généralement préféré car il informe également les technologies d'assistance et l'algorithme bidi, ce que CSS seul ne fait pas toujours. Lorsque les deux sont présents, l'attribut correspond généralement à la même valeur calculée.
Compatibilité avec les navigateurs
L'attribut dir est pris en charge par tous les navigateurs modernes et ce depuis très longtemps, vous pouvez donc l'utiliser sans prévoir de solutions de repli.