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).
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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>
.
Un texte bidirectionnel est un texte qui contient à la fois des suites de caractères à lire de gauche à droite (LTR pour left-to-right) et des suites de caractères à lire de droite à gauche (RTL pour right-to-left), par exemple une citation en arabe dans un texte en néerlandais. Les navigateurs implémentent l'algorithme de bidirectionnalité Unicode afin de gérer ces cas. Dans cet algorithme, les caractères ont une directionnalité implicite : les caractères latins sont considérés comme LTR et les caractères arabes comme RTL par exemple. D'autres caractères, comme les espaces ou certains caractères de ponctuation sont considérés comme neutres et leur directionnalité est fournie par les caractères environnant.
La plupart du temps, cet algorithme fournira le bon résultat, sans que l'auteur ait besoin de fournir un balisage spécifique. Toutefois, dans certains cas, il faudra aider l'algorithme et c'est là qu'intervient <bdi>
.
L'élément <bdi>
est utilisé afin d'encadrer un fragment de texte pour indiquer à l'algorithme de traiter ce texte avec une directionnalité différente du texte qui l'entoure. Cela fonctionne selon deux axes :
- La directionnalité du texte contenu dans
<bdi>
n'influence pas la directionnalité du texte environnant. - La directionnalité du texte contenu dans
<bdi>
n'est pas influencée par la directionnalité du texte environnant.
Prenons le texte suivant :
TEXTE-INJECTÉ - 1re place
Si TEXTE-INJECTÉ
est un texte LTR, aucun problème. En revanche, si TEXTE-INJECTÉ
est RTL, - 1
sera considéré comme du texte RTL (car ce fragment est composé de caractères neutres/faibles pour la directionnalité) et le résultat sera donc un mélange incohérent :
1 - TEXTE-INJECTÉre place
Si on connaît d'avance la directionnalité de TEXTE-INJECTÉ
, on peut corriger le problème en enveloppant TEXTE-INJECTÉ
dans un élément <span>
avec un attribut dir
décrivant la bonne directionnalité. Cependant, si on ne connaît pas la directionnalité à l'avance (TEXTE-INJECTÉ
provenant d'une base de données ou étant saisi par un utilisateur), on utilisera <bdi>
afin d'empêcher la directionnalité de TEXTE-INJECTÉ
d'avoir un impact sur le texte environnant.
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.
Utiliser <span dir="auto">
aura le même effet qu'utiliser <bdi>
mais la sémantique portée sera moindre.
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.
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.
Exemples
Texte écrit de gauche à droite
Cet exemple affiche les gagnants d'une compétition grâce à des éléments <span>
. Ici, les noms ne s'écrivent que de gauche à droite et le résultat s'affiche correctement :
<ul>
<li><span class="name">Henrietta Boffin</span> - 1re place</li>
<li><span class="name">Jerry Cruncher</span> - 2e place</li>
</ul>
body {
border: 1px solid #3f87a6;
max-width: calc(100% - 40px - 6px);
padding: 20px;
width: calc(100% - 40px - 6px);
border-width: 1px 1px 1px 5px;
}
Texte de droite à gauche
Cela fonctionne sans problème tant que les noms s'écrivent de gauche à droite. Lorsqu'on insère un nom écrit de droite à gauche, la partie "- 1
" sera captée par le texte en RTL et le résultat sera confus :
<ul>
<li><span class="name">اَلأَعْشَى</span> - 1re place</li>
<li><span class="name">Jerry Cruncher</span> - 2e place</li>
</ul>
body {
border: 1px solid #3f87a6;
max-width: calc(100% - 40px - 6px);
padding: 20px;
width: calc(100% - 40px - 6px);
border-width: 1px 1px 1px 5px;
}
Utiliser <bdi> avec du texte utilisant les deux directions
Pour éviter cet écueil, on pourra utiliser <bdi>
pour séparer le contenu :
<ul>
<li><bdi class="name">اَلأَعْشَى</bdi> - 1re place</li>
<li><bdi class="name">Jerry Cruncher</bdi> - 2e place</li>
</ul>
body {
border: 1px solid #3f87a6;
max-width: calc(100% - 40px - 6px);
padding: 20px;
width: calc(100% - 40px - 6px);
border-width: 1px 1px 1px 5px;
}
Résumé technique
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 |
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
BCD tables only load in the browser
Voir aussi
- La localisation et l'internationalisation
<bdo>
- Les propriétés CSS
direction
etunicode-bidi