ruby-position

Probieren Sie es aus

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;
}

Syntax

/* Keyword values */
ruby-position: over;
ruby-position: under;
ruby-position: alternate;
ruby-position: alternate over;
ruby-position: alternate under;
ruby-position: inter-character;

/* Global values */
ruby-position: inherit;
ruby-position: initial;
ruby-position: revert;
ruby-position: revert-layer;
ruby-position: unset;

Werte

over

Ist ein Schlüsselwort, das angibt, dass das Ruby über dem Haupttext für horizontale Schriften und rechts daneben für vertikale Schriften platziert werden muss.

under

Ist ein Schlüsselwort, das angibt, dass das Ruby unter dem Haupttext für horizontale Schriften und links daneben für vertikale Schriften platziert werden muss.

alternate

Ist ein Schlüsselwort, das angibt, dass sich das Ruby zwischen über und unter abwechselt, wenn es mehrere Annotationsebenen gibt.

inter-character

Wenn angegeben, verhält es sich wie over in vertikalen Schreibrichtungen. Andernfalls zeigt es an, dass das Ruby zwischen den verschiedenen Zeichen platziert werden muss, auf der rechten Seite des Basiselements im horizontalen Text erscheint und die Kinder des Ruby-Annotation-Containers zwingt, einen vertical-rl Schreibmodus zu haben.

Formale Definition

Formale Syntax

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

Beispiele

Ruby über dem Text positioniert

HTML

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

CSS

ruby {
  ruby-position: over;
}

Ergebnis

Ruby unter dem Text positioniert

HTML

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

CSS

ruby {
  ruby-position: under;
}

Ergebnis

Ruby alternierend

HTML

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

CSS

ruby {
  ruby-position: alternate; /* this is also the initial value */
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <ruby>, <rt>, <rp>, und <rtc> HTML-Elemente
• ruby-align