Balise BDI

Rôle

La balise <bdi> est particulièrement utile lors de l’intégration de contenu dynamique (généré par l’utilisateur) avec une direction de texte inconnue au sein d’un autre texte ayant une directivité connue.

Pour comprendre l’intérêt de cette balise observez le résultat de ce bout de code :

<ul> 
  <li> Utilisateur <b> jcranmer </b> : 12 messages.
  <li> Utilisateur <b> hober </b> : 5 messages.
  <li> Utilisateur <b> إيان </b> : 3 messages.
</ul>

Vous remarquez que le nombre de message 3 et les deux-points : s’affichent avant le nom de l’utilisateur pour l’écriture en arabe :

See the Pen WdZmWV by salsacobo (@salsacobo) on CodePen.

L’algorithme bidirectionnel met le signe deux-points et le chiffre « 3 » à côté du mot ‘Utilisateur’ plutôt qu’à coté du mot ‘messages’.

La balise <bdi> permet d’ éviter que le texte soit formatée dans une direction différente de celle du texte qui l’entoure. Observez le code ci-dessous et le résultat.

<ul> 
  <li> Utilisateur <bdi> jcranmer </bdi> : 12 messages.
  <li> Utilisateur <bdi> hober </bdi> : 5 messages.
  <li> Utilisateur <bdi> إيان </bdi> : 3 messages.
</ul>

Affichage :

See the Pen VyMNGR by salsacobo (@salsacobo) on CodePen.

On vient de solutionner le problème d’affichage rencontré sans l’utilisation de la balise <bdi>.

Compatibilité

La balise <bdi> n’est pris en charge par le navigateur internet explorer et edge.

Attributs spécifiques

Attributs spécifiques à cet élément

La balise <details> prend aussi en charge les attributs globaux

Attributs de type événement

La balise <details> prend en charge les événements souris