16 mai 2013

HTML5 bdi

16.5.13 - 0

html5 bdi
HTML5 bdi : La balise <bdi> permet d’isoler du texte dont la direction différente. Autrement,  impliquer des modifications sur la disposition du texte.
La gestion de la direction du texte se fait avec la balise <bdo>. Donc, Le rôle de la balise <bdo> est de spécifier le sens d'affichage du texte encapsulé à l'aide de l'attribut 'dir' qui spécifie la direction de l'affichage du texte contenu dans le tag bdo ("left to right" : ltr ou bien "right to left" : rtl).

L’emploi de la balise <bdi> est recommandé lorsque la direction du texte à afficher n'est pas connue.

Support: icon google chrome icon firefox

 

Exemple d'utilisation:

// text initial
<span style="padding:3px; border:solid 1px;">
   Notre équipe nationale gagne 20 coups de monde!
</span>

// text avec la balise bdo
<span style="padding:3px; border:solid 1px;">
   Notre équipe nationale
   <bdo dir="rtl">gagne</bdo> 20 coups de monde!
</span>

// text avec la balise bdi et bdo
<span style="padding:3px; border:solid 1px;">
   Notre équipe nationale
   <bdi>
      <bdo dir="rtl">gagne</bdo>
   </bdi> 20 coups de monde!
</span>

 

Résultat:

// text initial

Notre équipe nationale gagne 20 coups de monde!

// text avec la balise bdo

Notre équipe nationale gagne 20 coups de monde!

// text avec la balise bdi et bdo

Notre équipe nationale gagne 20 coups de monde!

=> On constate que le texte "gagne" et le texte "20" sont inversés à l'affichage en raison du sens du texte appliqué sur le texte "gagne". Donc, il faut appliquer une isolation du texte avec la balise <bdi>.

Newsletter

Abonnez-vous à notre newsletter pour recevoir les nouveautés.

0 commentaires:

© 2014 Déveur. WP Theme-junkie converted by Bloggertheme9
Powered by Blogger.
back to top