<bdo>
Impose le sens d’affichage du texte, en contournant l’algorithme bidirectionnel automatique.
- Affichage
- inline
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu phrasant
Exemple
#<p>Texte normal : CodeWorlds</p>
<p>Avec un sens forcé : <bdo dir="rtl">CodeWorlds</bdo></p>Définition et utilisation
#L’élément <bdo> (de l’anglais bidirectional override) désactive la détermination automatique du sens du texte et affiche les caractères exactement dans le sens que vous indiquez dans l’attribut dir : ltr (de gauche à droite) ou rtl (de droite à gauche). Avec rtl, même un texte français apparaîtra inversé, lettre par lettre.
Il est rarement utile : quand vous voulez montrer dans quel ordre les caractères sont stockés dans la mémoire de l’ordinateur, par exemple en enseignant les textes arabes ou hébreux, ou quand l’algorithme automatique se trompe dans un cas précis.
Avec <bdo>, l’attribut global dir est obligatoire et n’accepte que les valeurs ltr ou rtl ; la valeur auto n’est pas autorisée ici. Pour un contenu de sens inconnu, par exemple des noms d’utilisateurs, il existe <bdi>.
Syntaxe
#<bdo dir="rtl">texte</bdo>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
Plus d’exemples
#<p>C’est ainsi que s’affiche le mot « shalom » : שלום</p>
<p>C’est ainsi qu’il est stocké en mémoire, caractère par caractère : <bdo dir="ltr">שלום</bdo></p>CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
bdo {
unicode-bidi: isolate-override;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Indiquez toujours
dir="ltr"oudir="rtl". Sans cela, l’élément n’a pas de sens. - Pour les textes saisis par les utilisateurs, utilisez
<bdi>, et non<bdo>. - N’inversez pas un texte avec
<bdo>pour un effet visuel. Un lecteur d’écran le lira de toute façon dans son ordre d’origine.
Entrées associées
#- <bdi>Isole un fragment de texte dont le sens d’écriture est inconnu, par exemple un nom d’utilisateur écrit en arabe.
- <span>Un conteneur en ligne générique sans signification, pour styliser un fragment de texte.
- <p>Un paragraphe de texte.
- <ruby>Les annotations ruby : un petit texte au-dessus des caractères, le plus souvent la prononciation de caractères chinois ou japonais.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.