La balise <bdi> (Bi-Directional Isolation) est une balise HTML utile pour isoler une portion de texte afin de gérer son affichage dans des contextes où les directions d'écriture (gauche à droite ou droite à gauche) se mélangent.
Elle est particulièrement utile pour garantir une présentation correcte de contenus multilingues ou de textes comprenant des données sensibles, comme des noms ou des identifiants, qui peuvent perturber la mise en page s'ils suivent une direction d'écriture différente.
Structure et syntaxe de la balise <bdi>
Structure et syntaxe de base
La balise <bdi> est une balise conteneur qui a :
- Une balise d'ouverture :
<bdi>. - Une balise de fermeture :
</bdi>.
Voici un exemple simple :
<bdi>Texte isolé</bdi>
Exemple d'utilisation
Voici un exemple pratique :
<p>Nom de l'utilisateur : <bdi>John Doe</bdi></p>Dans cet exemple, le nom "John Doe" est isolé de son contexte pour garantir que son affichage respecte l'ordre d'écriture initial.
Différence avec d'autres balises similaires
<span>: Permet de styliser des portions de texte mais ne gère pas la directionnalité.<bdo>: Forçe la directionnalité du texte, contrairement à<bdi>, qui la laisse indépendante du contexte.
Compatibilité des navigateurs
La balise <bdi> est prise en charge par la plupart des navigateurs modernes.
| Navigateur | Compatibilité |
|---|---|
| Chrome | Oui |
| Firefox | Oui |
| Safari | Oui |
| Edge | Oui |
| Internet Explorer | Partielle (IE 10+) |