Accueil    HTML    Balise Bdi
 



balise bdi  Balise BDI : bi-directional isolation

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome 20.0 et plus
  • Firefox 14.0.1 et plus
  • IE 9 et plus
  • Opera 12 et plus
  • Safari 5.1.7 et plus



La balise <bdi> est utilisée pour isoler du texte dont la direction est différente du reste du texte qui l'entoure. Son emploi est recommandé lorsque la direction du texte à afficher n'est pas connue, comme par exemple après une saisie utilsateur pouvant être dans une langue étrangère et qui doit ensuite être affichée (pouvant alors impliquer des modifications sur la disposition du texte adjacent).

La gestion de la direction du texte se fait avec la balise <bdo> et les styles CSS direction et unicode-bidi.



Exemple d'utilisation de la balise bdi :




Pour mettre en avant l'utilité de la balise <bdi> nous allons modifier la direction d'un bloc de texte avec l'élément <bdo> et son attribut "dir" :
Texte initial :

<span style="padding:5px; border:solid 1px silver; border-radius:8px;">
   Bienvenue sur votre boîte de réception Laurent : 5 messages non lus
</span>

Inversion de la direction du prénom :

<span style="padding:5px; border:solid 1px silver; border-radius:8px;">
   Bienvenue sur votre boîte de réception
   <bdo dir="rtl">Laurent</bdo> : 5 messages non lus
</span>

On constate que le prénom et le texte ": 5" sont inversés à l'affichage en raison du sens du texte appliqué sur le prénom. C'est ici qu'il faut appliquer une isolation du texte avec la balise <bdi> :

<span style="padding:5px; border:solid 1px silver; border-radius:8px;">
   Bienvenue sur votre boîte de réception
   <bdi>
      <bdo dir="rtl">Laurent</bdo>
   </bdi> : 5 messages non lus
</span>

L'orientation du texte n'impacte plus la disposition du texte qui l'entoure.



Pour mettre en avant l'utilité de la balise <bdi> nous allons modifier la direction d'un bloc de texte avec l'élément <bdo> et son attribut "dir" :
Texte initial :

Bienvenue sur votre boîte de réception Laurent : 5 messages non lus


Inversion de la direction du prénom (Laurent devient tneruaL) :

Bienvenue sur votre boîte de réception Laurent : 5 messages non lus


On constate que le prénom et le texte ": 5" sont inversés à l'affichage en raison du sens du texte appliqué sur le prénom. C'est ici qu'il faut appliquer une isolation du texte avec la balise <bdi> :

Bienvenue sur votre boîte de réception Laurent : 5 messages non lus


» L'orientation du texte n'impacte plus la disposition du texte qui l'entoure.