ruby-position

Exemple interactif

ruby-position: over;

ruby-position: under;

<section id="default-example">
  <ruby id="example-element"> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
</section>

#example-element {
  font-size: 2em;
}

Syntaxe

/* Valeurs avec un mot-clé */
ruby-position: over;
ruby-position: under;
ruby-position: alternate;
ruby-position: alternate over;
ruby-position: alternate under;
ruby-position: inter-character;

/* Valeurs globales */
ruby-position: inherit;
ruby-position: initial;
ruby-position: revert;
ruby-position: revert-layer;
ruby-position: unset;

Valeurs

over

Est un mot-clé indiquant que le ruby doit être placé au-dessus du texte principal pour les scripts horizontaux et à droite pour les scripts verticaux.

under

Est un mot-clé indiquant que le ruby doit être placé sous le texte principal pour les scripts horizontaux et à gauche pour les scripts verticaux.

alternate Expérimental

Est un mot-clé indiquant que le ruby alterne entre au-dessus et en-dessous, lorsqu'il y a plusieurs niveaux d'annotation.

inter-character

Lorsqu'il est défini, il se comporte comme over dans les modes d'écriture verticale. Sinon, il indique que le ruby doit être placé entre les différents caractères, apparaissant à droite de la base dans le texte horizontal et forçant les enfants du conteneur d'annotation ruby à avoir un mode d'écriture vertical-rl.

Définition formelle

Syntaxe formelle

ruby-position = 
  [ alternate || [ over | under ] ]  |
  inter-character                    

Exemples

Ruby positionné au-dessus du texte

HTML

<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>

CSS

ruby {
  ruby-position: over;
}

Résultat

Ruby positionné en-dessous du texte

HTML

<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>

CSS

ruby {
  ruby-position: under;
}

Résultat

Ruby alterné

HTML

<ruby>
  <rb>A</rb><rb>B</rb><rb>C</rb>
  <rtc>Above</rtc>
  <rtc>Below</rtc>
</ruby>

CSS

ruby {
  ruby-position: alternate; /* ceci est également la valeur initiale */
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les éléments HTML <ruby>, <rt>, <rp> et <rtc>
• La propriété ruby-align
• Le module de disposition ruby CSS