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. Cela permet, par exemple, de présenter correctement une citation en arabe (écrit de droite à gauche) au sein d'un texte écrit en français (écrit de gauche à droite).

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 : On peut également utiliser l'attribut dir afin de surcharger la directionnalité de l'élément décidée par l'agent utilisateur pour le contenu de l'élément <bdi>.

Pour en apprendre plus sur le texte bidirectionnel en HTML, nous vous invitons à lire cet article sur l'algorithme qui détermine la direction du texte.

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 si aucune valeur parmi "rtl", "ltr" n'est fournie.

Notes d'utilisation

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.

En effet, les navigateurs peuvent tout à fait ignorer la mise en forme provenant du CSS. Dans ce cas, si un texte est écrit au sein d'un élément <bdi>, il sera correctement affiché mais s'il est uniquement associé à une règle CSS content unicode-bidi: isolate, le texte sera affiché à l'envers si la feuille de style n'est pas appliquée.

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
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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 16Edge Aucun support NonFirefox Support complet 10IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Support complet 10Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, marie-ototoi, tregagnon, Delapouite
Dernière mise à jour par : SphinxKnight,