L'élément <bdi> (ou élément d'isolation de texte bidirectionnel) isole une portée (span) de texte pouvant être formatée dans une direction différente de celle du texte qui l'entoure.
Cet élément est utile lorsqu'on intègre du texte dont on ignore la directivité (provenant d'une base de données par exemple), au sein d'un autre texte dont la direction est connue.
Note : Bien que le même effet de rendu puisse être créé avec la règle CSS unicode-bidi : isolate sur un élément <span> ou toute méthode de formatage du texte, la sémantique est ici uniquement portée par l'élément <bdi> . Les navigateurs peuvent notamment ignorer la mise en forme induite par la feuille CSS. Dans ce cas, le texte serait bien affiché en utilisant l'élément HTML mais deviendrait inutilisable si seul CSS est utilisé pour apporter cette information.
| Catégories de contenu | Contenu de flux, contenu phrasé, contenu tangible. |
|---|---|
| Contenu autorisé | Contenu phrasé. |
| Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires |
| Parents autorisés | Tout élément acceptant du contenu phrasé. |
| Rôles ARIA autorisés | Tous les rôles sont autorisés. |
| Interface DOM | HTMLElement |
Attributs
Comme tous les éléments HTML, cet élément dispose des attributs universels. Cependant il a une sémantique légèrement différente. En effet, l'attribut dir n'est pas hérité. S'il n'est pas renseigné, sa valeur par défaut sera auto et le navigateur décidera de la direction à appliquer selon le contenu de l'élément.
Exemples
HTML
<p dir="ltr">Ce mot arabe <bdi>ARABIC_PLACEHOLDER</bdi> est automatiquement affiché de droite à gauche.</p>
Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| WHATWG HTML Living Standard La définition de '<bdi>' dans cette spécification. |
Standard évolutif | |
| HTML5 La définition de '<bdi>' dans cette spécification. |
Recommendation |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support simple | 16 | 10.0 (10.0) | Pas de support | Pas de support | Pas de support |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support simple | Pas de support | 10.0 (10.0) | Pas de support | Pas de support | Pas de support |
Voir aussi
<bdo>- Les propriétés CSS
directionetunicode-bidi