Balise HTML <bdi>
La balise HTML <bdi> isole un segment de texte de directionnalité inconnue pour que sa direction soit détectée indépendamment.
La balise HTML <bdi> (dont le nom signifie isolation bidirectionnelle) fait partie des éléments HTML5. Elle marque un segment de texte susceptible de s'afficher dans une direction d'écriture différente du texte environnant, et l'isole pour que l'algorithme bidirectionnel du navigateur le traite comme une unité autonome et indépendante.
Le cas d'utilisation classique consiste à afficher une valeur dynamique de directionnalité inconnue — un nom d'utilisateur, un nom de produit, ou toute chaîne extraite d'une base de données — dans une phrase allant de gauche à droite (LTR). Il est impossible de savoir à l'avance si cette valeur sera en anglais (John), en arabe (أحمد) ou en hébreu (דוד). Sans isolation, une valeur RTL peut « déborder » et réordonner les caractères LTR adjacents, perturbant le reste de la ligne. Envelopper la valeur dans <bdi> évite ce problème.
<p>User <bdi>أحمد</bdi> scored 90 points.</p>Ici, أحمد conserve son propre ordre de droite à gauche, tandis que le reste de la phrase — y compris le score et les mots environnants — reste correctement orienté de gauche à droite.
Pourquoi le texte bidirectionnel a besoin d'isolation
Le texte bidirectionnel mélange des séquences de caractères allant de droite à gauche (RTL) et de gauche à droite (LTR). Pour le mettre en page, les navigateurs exécutent l'algorithme bidirectionnel Unicode, qui attribue une directionnalité à chaque caractère. Certains caractères — notamment les signes de ponctuation, les chiffres et les espaces — sont neutres : leur direction est déduite de leurs voisins.
C'est cette inférence qui pose problème. Lorsqu'un caractère neutre (comme l'espace et le chiffre qui suivent un nom) se trouve à côté d'une séquence RTL, l'algorithme peut l'intégrer dans le flux RTL, faisant basculer un score ou une ponctuation en fin de ligne du mauvais côté. <bdi> règle ce problème en plaçant une frontière d'isolation autour du texte intégré : les caractères à l'intérieur ne peuvent pas influencer la direction des caractères extérieurs, et vice versa.
En résumé, <bdi> enveloppe un segment de texte et garantit :
- La directionnalité du texte à l'intérieur de
<bdi>n'affecte pas le texte environnant. - La directionnalité du texte environnant n'affecte pas le texte à l'intérieur de
<bdi>.
Avant et après : voir la différence
L'exemple ci-dessous affiche deux fois la même chaîne à l'aspect dynamique. La première ligne utilise un simple <span> ; la seconde enveloppe la valeur dans <bdi>. Avec une valeur RTL, la version avec <span> laisse le texte suivant dériver du mauvais côté, tandis que la version avec <bdi> reste lisible.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Without bdi vs. with bdi</h1>
<!-- WITHOUT isolation: the trailing ": 90" can be reordered -->
<p>User <span>إيان</span>: 90 points.</p>
<!-- WITH isolation: the name is self-contained, the rest stays LTR -->
<p>User <bdi>إيان</bdi>: 90 points.</p>
</body>
</html>Exécutez l'exemple : dans le premier paragraphe, le deux-points et le chiffre peuvent se retrouver du mauvais côté du nom arabe ; dans le second, <bdi> maintient : 90 points. correctement à droite.
<bdi> vs. dir="auto"
On pourrait se demander pourquoi ne pas simplement placer dir="auto" sur un <span> à la place. Définir dir="auto" demande bien au navigateur de déduire la direction propre de l'élément à partir de son contenu — mais sur un élément en ligne ordinaire, cela ne crée pas de frontière d'isolation, et l'élément peut donc toujours influencer la mise en page du texte environnant.
L'élément <bdi> fait les deux à la fois : il détecte automatiquement la direction et isole. En fait, <bdi> se comporte comme un <span dir="auto"> qui serait en plus isolé, ce qui est exactement ce que l'on souhaite pour une valeur intégrée de direction inconnue. Utiliser <bdi> rend l'intention explicite et évite de devoir définir l'attribut manuellement.
<bdi> vs. <bdo>
<bdi> est souvent confondu avec l'élément <bdo> (substitution bidirectionnelle), mais ils remplissent des fonctions opposées :
<bdo>force une direction. Il faut lui fournir un attributdir(dir="rtl"oudir="ltr"), et il remplace l'algorithme pour afficher le texte exactement dans cette direction.<bdi>détecte et isole. Il n'inverse pas le texte. Il laisse l'algorithme décider de la direction du texte contenu de manière autonome, tout en le protégeant du — et en protégeant la page du — texte environnant.
Utilisez <bdo> lorsque vous connaissez la direction et souhaitez la forcer ; utilisez <bdi> lorsque la direction est inconnue (contenu dynamique) et que vous souhaitez une gestion automatique et sécurisée.
Syntaxe
La balise <bdi> fonctionne en paires. Le contenu est écrit entre les balises ouvrante (<bdi>) et fermante (</bdi>) :
<bdi>Some text of unknown directionality</bdi>Rendu CSS par défaut
Les navigateurs appliquent ce style par défaut à l'élément :
bdi {
display: inline;
unicode-bidi: isolate;
}La valeur unicode-bidi: isolate est ce qui crée la frontière d'isolation décrite ci-dessus. En général, il ne faut pas modifier unicode-bidi sur un <bdi>, mais on peut le styliser comme tout élément en ligne :
bdi {
color: blue;
font-weight: bold;
}Attributs
La balise <bdi> prend en charge les attributs globaux et les attributs d'événement.
Comment styliser une balise HTML <bdi>
bdi {
color: blue;
font-weight: bold;
}