Accueil    HTML    Balise RT
 



balise rt  Balise RT : ruby text

«  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



Les balises <ruby> <rt> et <rp> s'utilisent de concert pour mettre en place des annotations ruby. Une annotation ruby permet de donner des indications de prononciation pour des termes spécifiques et s'emploie usuellement pour annoter les kanjis des langues asiatiques (chinois, coréen ou japonais).

    - La balise <ruby> encadre le texte original qui sera annoté ainsi que les éléments <rt> et <rp> qui suivront le texte original.
    - La balise <rt> (ruby text) contient les indications phonétiques du texte qui la précède au sein de l'élément ruby.
    - La balise <rp> (ruby parentheses) sert pour les navigateurs ne supportant pas les éléments ruby à écrire un texte (généralement des parenthèses) encadrant les informations contenues dans l'élément <rt>. Elle est ignorée par les navigateurs qui interprètent correctement les annotations ruby.

Il est possible d'inclure plusieurs annotations imbriquées.
La mise en forme par défaut des annotations ruby est la suivante : le texte original est affiché dans le contexte courant (au niveau de la ligne dans laquelle il est écrit) et les informations de prononciation (au sein des éléments <rt>) sont affichées au dessus de celui-ci avec une taille de police de caractère assez petite.
Cette mise en forme peut être modifiée avec par exemple les styles font-size pour agrandir la taille de la police et display:inline pour afficher les annotations à la suite du texte original.



Exemple d'utilisation de la balise rt :




Exemples de mise en forme (hors contexte sémantique) :

Bloc de texte avec une
<ruby>annotation ruby
   <rp>(</rp><rt>[phonétique]</rt><rp>)</rp>
</ruby>.

Bloc de texte avec une
<ruby style="border-top:dashed 1px grey;">annotation ruby
   <rp>(</rp><rt style="font-size:12px; color:firebrick;">[phonétique]</rt><rp>)</rp>
</ruby>.

Bloc de texte avec une
<ruby style="border-top:dashed 1px grey;">annotation ruby
   <rp>(</rp><rt style="font-size:12px; color:firebrick; display:inline;">[phonétique]</rt><rp>)</rp>
</ruby>.


Exemples de mise en forme (hors contexte sémantique) :

Bloc de texte avec une annotation ruby ([phonétique]).

Bloc de texte avec une annotation ruby ([phonétique])

Bloc de texte avec une annotation ruby ([phonétique]).