<bdi>

Description

L’élément <bdi> (Bidirectional Isolation) isole une portion de texte dont la direction (gauche-à-droite ou droite-à-gauche) est inconnue à l’avance, comme un nom d’utilisateur saisi par un tiers. Sans <bdi>, un texte en arabe ou en hébreu intercalé dans du texte LTR peut perturber l’affichage de tout le paragraphe.

Syntaxe

<p>Classement : <bdi>اسم المستخدم</bdi> — 42 points</p>

Exemples

Noms d’utilisateurs d’origine inconnue dans un classement :

<ol>
  <li><bdi>Kevin</bdi> — 120 pts</li>
  <li><bdi>مرحبا</bdi> — 98 pts</li>
  <li><bdi>Sophie</bdi> — 87 pts</li>
</ol>

Contenu dynamique issu d’une base de données :

<p>Commentaire de <bdi><?= $username ?></bdi> :</p>

Notes

<bdi> vs <span dir="auto"> : les deux approches fonctionnent, mais <bdi> est sémantiquement explicite sur l’intention d’isolation bidirectionnelle. <span dir="auto"> doit être ajouté manuellement ; <bdi> applique dir="auto" par défaut.

Quand l’utiliser : dès qu’une chaîne provient de l’utilisateur ou d’une source externe dont vous ne maîtrisez pas la langue (noms, pseudonymes, titres).