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 davon 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 davon für vertikale Schriften platziert werden muss.

alternate

Ist ein Schlüsselwort, das angibt, dass das Ruby zwischen über und unter wechselt, wenn es mehrere Annotationsstufen gibt.

inter-character

Wenn angegeben, verhält es sich wie over in vertikalen Schreibmodi. Andernfalls gibt es an, dass das Ruby zwischen den verschiedenen Zeichen platziert werden muss und rechts von der Basis im horizontalen Text erscheint, wobei die Kinder des Ruby-Annotation-Containers gezwungen werden, 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 wechselnd

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
• CSS Ruby-Layout Modul