ruby-position CSS property

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 over und under wechselt, wenn mehrere Annotationsebenen vorhanden sind.

inter-character

Wenn angegeben, verhält es sich wie over in vertikalen Schreibrichtungen. Andernfalls gibt es an, dass das Ruby zwischen den verschiedenen Zeichen platziert werden muss, auf der rechten Seite des Basistexts in horizontalem Text erscheint und die Kinder des Ruby-Annotation-Containers zwingt, einen Schreibmodus vertical-rl 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
• CSS Ruby-Layout Modul