English

<bdi>

Texte bidirectionnel (arabe, hébreu)

— 2 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • internationalisation

<bdi> + <bdo> — Le texte bidirectionnel

<bdi> (Bidirectional Isolate) isole un segment de texte dont la direction peut différer du texte environnant. <bdo> (Bidirectional Override) force une direction d'écriture spécifique (ltr ou rtl).

Quand l'utiliser

Tu affiches du contenu généré par les utilisateurs ou des noms propres dans des langues mixtes. <bdi> est le choix par défaut : il laisse l'algorithme Unicode déterminer la direction et empêche le texte inséré de contaminer le texte autour. <bdo> est réservé aux cas où tu veux forcer une direction, par exemple afficher un texte arabe en left-to-right pour une démonstration.

Ce que tu gagnes

Accessibilité : sans <bdi>, un nom arabe inséré dans une phrase française peut inverser l'ordre des mots environnants. Les lecteurs d'écran et l'affichage visuel sont tous les deux affectés. <bdi> garantit que chaque segment est lu dans le bon sens.

Exemple de code

<!-- bdi: isolate user-generated content -->
<p>
  User <bdi>محمد</bdi> posted 3 comments.
</p>
 
<!-- bdo: force direction for demonstration -->
<p>
  The word "hello" reversed: <bdo dir="rtl">hello</bdo>
</p>

Pour aller plus loin