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.

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

Probieren Sie es aus

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 für horizontale Schriftarten über dem Haupttext und für vertikale Schriftarten rechts davon platziert werden muss.

under

Under example Ist ein Schlüsselwort, das angibt, dass das Ruby für horizontale Schriftarten unter dem Haupttext und für vertikale Schriftarten links davon platziert werden muss.

alternate

Ist ein Schlüsselwort, das angibt, dass das Ruby bei mehreren Annotationsebene zwischen over und under wechselt.

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, erscheint auf der rechten Seite des Basiselements im horizontalen Text und erzwingt, dass die Kinder des Ruby-Anmerkungscontainers einen vertical-rl Schreibmodus 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

BCD tables only load in the browser

Siehe auch