<bdi>
Isole un fragment de texte dont le sens d’écriture est inconnu, par exemple un nom d’utilisateur écrit en arabe.
- Affichage
- inline
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu phrasant
Exemple
#<p>Classement de la semaine :</p>
<ol>
<li><bdi>Léa</bdi> : 120 pts</li>
<li><bdi>سلمى</bdi> : 95 pts</li>
<li><bdi>נועה</bdi> : 80 pts</li>
</ol>
<p>Sans isolation : سلمى: 95 pts</p>Dans le dernier paragraphe, le nombre de points s’est retrouvé déplacé devant le prénom, parce que le navigateur l’a considéré comme faisant partie du texte arabe.
Définition et utilisation
#L’élément <bdi> (de l’anglais bidirectional isolate) isole un fragment de texte dont le sens d’écriture n’est pas connu à l’avance. Un exemple typique est un nom d’utilisateur, un titre de produit ou un commentaire, qui peuvent être écrits aussi bien en français qu’en arabe ou en hébreu, c’est-à-dire de droite à gauche.
Sans isolation, le navigateur traite ce fragment comme une partie de la phrase qui l’entoure, et l’algorithme de détermination du sens peut réarranger les caractères voisins. Dans le classement donné en exemple, le nombre de points se retrouve alors déplacé devant le prénom arabe. <bdi> enferme le texte dans sa propre « boîte », donc il n’influence pas son environnement.
Le navigateur détermine seul le sens du texte à l’intérieur de <bdi>, à partir du premier caractère ayant un sens défini, comme si l’élément avait l’attribut dir="auto". Si vous voulez imposer un sens précis, utilisez <bdo>.
Syntaxe
#<bdi>texte de sens inconnu</bdi>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
bdi {
unicode-bidi: isolate;
}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
#- Enveloppez dans
<bdi>toutes les données venant des utilisateurs que vous insérez au milieu d’une phrase : noms, titres, commentaires. <bdi>détecte seul le sens du texte, tandis que<bdo>l’impose de force. Avec du contenu venant des utilisateurs, c’est presque toujours le premier dont vous avez besoin.- Dans les champs de formulaire, l’attribut global
dir="auto"donne un effet similaire.
Entrées associées
#- <bdo>Impose le sens d’affichage du texte, en contournant l’algorithme bidirectionnel automatique.
- <span>Un conteneur en ligne générique sans signification, pour styliser un fragment 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.
- <p>Un paragraphe de texte.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.