Les éléments `bdi` et `bdo`

L’algorithme bidirectionnel Unicode gère généralement bien le texte à sens mixte, mais il faut parfois le remplacer — pour isoler un nom fourni par l’utilisateur afin qu’il ne modifie pas le sens du texte environnant, ou pour imposer un sens précis dans un bloc de code.

<bdi> (isolation bidirectionnelle) traite son contenu comme un contexte bidirectionnel distinct. Le sens du texte à l’intérieur de <bdi> ne peut pas influencer le sens du texte à l’extérieur, et inversement.

Une liste d’utilisateurs mêlant des noms anglais et arabes risque de laisser les noms arabes « déborder » dans le sens RTL du texte environnant. Entourer chaque nom de <bdi> l’isole : la mise en page reste cohérente, quel que soit le sens de chaque nom.

<bdo dir="rtl"> (remplacement bidirectionnel) impose un sens précis à son contenu et remplace la résolution bidirectionnelle naturelle. Utilisez-le lorsque vous souhaitez afficher du texte dans un sens non naturel — par exemple pour afficher des extraits de code en LTR au sein d’une page RTL.

L’attribut dir sur un élément ordinaire définit un sens de base, tandis que l’algorithme bidirectionnel continue de s’appliquer à l’intérieur. <bdo> désactive l’algorithme bidirectionnel pour son contenu : chaque caractère s’écoule strictement dans le sens indiqué, quel que soit son système d’écriture.

Chaque fois que vous insérez du texte généré par l’utilisateur dans une interface environnante — des noms dans les en-têtes de discussion, des noms d’utilisateur dans les commentaires ou des titres dans les éléments d’un fil. L’isolation garantit que la mise en page de l’interface n’est pas affectée par ce que l’utilisateur a saisi.

Rarement. Le principal usage légitime consiste à enseigner le fonctionnement du texte bidirectionnel (montrer à quoi ressemble une chaîne inversée) ou à corriger des données mal balisées lorsque la résolution bidi naturelle produit un ordre visuel incorrect.

Pour du contenu utilisateur dont la direction est inconnue, combinez <bdi dir="auto"> pour une double protection : la détection automatique choisit une direction de base à partir du contenu, et bdi empêche cette direction de se propager au texte environnant.

bdi et bdo sont pris en charge par tous les navigateurs modernes. Ils font partie de HTML5 et sont stables depuis des années. Les anciennes versions d'IE ne prennent pas en charge bdi, mais elles sont fonctionnellement obsolètes ; les sites modernes peuvent utiliser bdi librement.

Les lecteurs d'écran respectent l'isolation bidi : le texte placé dans <bdi> est annoncé avec la voix de sa propre langue (lorsque lang est défini), sans que le contexte environnant n'interfère. bdi aide également la synthèse vocale à produire des pauses appropriées autour des expressions isolées.

Les modèles contenant des paramètres substituables ("Welcome, {name}") doivent entourer le paramètre de <bdi> : Welcome, <bdi>{name}</bdi>. Tout nom d'utilisateur — anglais, arabe ou mélange des deux — s'affiche correctement sans perturber le reste du message d'accueil.

Quelle est la différence pratique entre et ?

bdi isole la direction du texte d'une section afin qu'elle n'affecte pas son environnement — utilisez-le pour du contenu utilisateur intégré, comme des noms dans des modèles. bdo impose une direction précise en remplaçant la direction bidi ; il est rarement nécessaire en dehors des exemples pédagogiques. Combinez bdi avec dir="auto" pour gérer de manière sûre le texte fourni par l'utilisateur dans des langues inconnues.