ruby-position

Baseline 2024 *
Newly available

Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

Die ruby-position CSS Eigenschaft definiert die Position eines Ruby-Elements relativ zu seinem Basiselement. Es kann über dem Element (over), unterhalb (under) oder zwischen den Zeichen auf ihrer rechten Seite (inter-character) positioniert werden.

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

css
/* 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

Over example Ist ein Schlüsselwort, das angibt, dass das Ruby oberhalb des Haupttextes für horizontale Schriften und rechts daneben für vertikale Schriften platziert werden muss.

under

Under example Ist ein Schlüsselwort, das angibt, dass das Ruby unterhalb des Haupttextes für horizontale Schriften und links daneben für vertikale Schriften platziert werden muss.

alternate

Ist ein Schlüsselwort, das angibt, dass das Ruby abwechselnd über und unter dem Text platziert wird, wenn es mehrere Annotationsebenen gibt.

inter-character

Wenn angegeben, verhält es sich wie over in vertikalen Schreibmodi. Andernfalls gibt es an, dass das Ruby zwischen verschiedenen Zeichen platziert werden muss, rechts vom Basistext in horizontalem Text erscheint und die Kinder des Ruby-Annotation-Containers dazu zwingt, einen vertical-rl Schreibmodus zu haben.

Formale Definition

Anfangswertalternate
Anwendbar aufRuby-Anmerkungscontainer
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

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

Beispiele

Ruby über dem Text positioniert

HTML

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

CSS

css
ruby {
  ruby-position: over;
}

Ergebnis

Ruby unter dem Text positioniert

HTML

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

CSS

css
ruby {
  ruby-position: under;
}

Ergebnis

Ruby alternierend

HTML

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

CSS

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

Ergebnis

Spezifikationen

Specification
CSS Ruby Annotation Layout Module Level 1
# rubypos

Browser-Kompatibilität

Siehe auch