La balise HTML <bdo>
La balise HTML <bdo> force la direction du texte (ltr ou rtl) en remplaçant l'algorithme bidirectionnel du navigateur. Exemples RTL/LTR.
La balise HTML <bdo> (« bidirectional override », soit remplacement bidirectionnel) force une direction de texte spécifique en remplaçant l'algorithme bidirectionnel (bidi) intégré du navigateur. Elle est particulièrement utile lorsque vous devez afficher des caractères dans un ordre fixe de gauche à droite ou de droite à gauche, quelle que soit la direction naturelle du script auquel ces caractères appartiennent.
Cette page explique ce que fait ce remplacement, l'attribut dir obligatoire, des exemples RTL et LTR que vous pouvez exécuter, l'équivalent CSS, la prise en charge par les navigateurs, ainsi que des remarques sur l'accessibilité.
Pourquoi le remplacement bidirectionnel existe
Par défaut, les navigateurs gèrent automatiquement le texte multidirectionnel à l'aide de l'algorithme bidirectionnel Unicode. Cet algorithme examine la direction inhérente de chaque caractère — les lettres latines vont de gauche à droite (LTR), tandis que les lettres arabes et hébraïques vont de droite à gauche (RTL) — et les dispose en conséquence. La plupart du temps, c'est exactement ce que vous souhaitez.
<bdo> est la « trappe de secours » pour les rares cas où vous devez forcer l'ordre visuel au lieu de laisser l'algorithme décider. Elle remplace la directionnalité inhérente de chaque caractère qu'elle contient. Il s'agit d'un outil délibéré de bas niveau : utilisez-le uniquement lorsque vous avez réellement besoin d'un ordre de caractères spécifique, et non comme moyen général d'afficher du texte en langue étrangère.
Si votre objectif est simplement d'isoler un morceau de texte dont vous ne contrôlez pas la direction (par exemple, un nom fourni par un utilisateur) afin qu'il ne perturbe pas la mise en page environnante, utilisez plutôt <bdi> — il isole sans remplacer la direction.
L'attribut dir obligatoire
L'attribut dir est obligatoire sur <bdo>. Il indique au navigateur la direction à forcer et accepte deux valeurs :
rtl— affiche le contenu de droite à gauche. À utiliser avec les scripts RTL tels que l'arabe et l'hébreu, ou pour forcer un ordre RTL sur n'importe quel contenu.ltr— affiche le contenu de gauche à droite. Cela est particulièrement utile pour forcer un ordre LTR sur un fragment (tel qu'un extrait de code, une URL ou un nombre) qui se trouve à l'intérieur d'un contexte RTL comme un paragraphe en arabe.
Contrairement à l'attribut global dir, qui définit uniquement une direction de base tout en laissant l'algorithme bidi réordonner les séquences de caractères de direction opposée, dir sur un élément <bdo> remplace entièrement cet algorithme.
Syntaxe
La balise <bdo> va par paires. Le contenu est écrit entre les balises d'ouverture (<bdo>) et de fermeture (</bdo>), et dir doit toujours être présent :
<bdo dir="rtl">…content…</bdo>Exemple RTL (arabe)
Dans cet exemple, un paragraphe LTR de base contient une phrase en arabe. Comme dir="rtl" correspond à la direction naturelle du script arabe, le texte se lit correctement de droite à gauche.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This sentence runs left to right.</p>
<p>
Arabic greeting:
<bdo dir="rtl">مرحبا بكم في موقعنا</bdo>
</p>
</body>
</html>Résultat
Remplacement LTR dans un contexte RTL
Lorsque la direction de base est RTL (un paragraphe en arabe ici), l'algorithme bidi inverserait normalement l'ordre d'un fragment LTR tel qu'un chemin de fichier ou un code produit. En encapsulant ce fragment dans <bdo dir="ltr">, on le force à rester dans son ordre gauche à droite prévu :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p dir="rtl">
المسار هو
<bdo dir="ltr">C:\Users\docs\file.txt</bdo>
</p>
</body>
</html>Résultat
L'équivalent CSS
L'effet de <bdo> peut être reproduit en CSS en combinant la propriété direction avec unicode-bidi: bidi-override. En réalité, l'élément HTML est défini en termes de ce CSS :
bdo[dir="ltr"] {
direction: ltr;
unicode-bidi: bidi-override;
}
bdo[dir="rtl"] {
direction: rtl;
unicode-bidi: bidi-override;
}L'élément clé est unicode-bidi: bidi-override. Définir uniquement direction ne fait que changer la direction de base (la même chose que fait l'attribut dir) ; c'est bidi-override qui désactive le réordonnancement automatique. Si vous souhaitez ce comportement de remplacement sur un élément autre que <bdo>, appliquez vous-même les deux déclarations. Inversement, préférez l'élément sémantique <bdo> lorsque le balisage représente un remplacement directionnel délibéré — cela garde l'intention dans le HTML plutôt que cachée dans une feuille de styles.
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| dir | ltr | rtl | Obligatoire. Définit la direction du texte : de gauche à droite (ltr) ou de droite à gauche (rtl). |
La balise <bdo> prend également en charge les attributs globaux et les attributs d'événements.
Prise en charge par les navigateurs
<bdo> fait partie du standard HTML et est pris en charge depuis longtemps par tous les navigateurs majeurs, notamment Chrome, Firefox, Safari, Edge et Opera. Aucun mécanisme de secours n'est nécessaire pour les navigateurs actuels.
Accessibilité
<bdo> modifie uniquement l'ordre visuel des caractères ; il ne modifie pas la prononciation ni l'ordre de lecture logique exposé aux technologies d'assistance. Les lecteurs d'écran annoncent le texte dans son ordre logique sous-jacent (ordre du document), et non dans l'ordre visuel remplacé.
Pour cette raison, réservez <bdo> aux cas où l'ordre visuel des caractères est réellement important (comme forcer un fragment de code ou un identifiant à rester en LTR). Pour le contenu multilingue ordinaire, définissez une direction de base correcte avec l'attribut global dir sur l'élément englobant et laissez l'algorithme bidi faire son travail, ou utilisez <bdi> pour isoler du texte non fiable — les deux offrent une expérience plus précise aux utilisateurs de lecteurs d'écran que le remplacement pur de la direction.