ruby-align

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-align CSS Eigenschaft definiert die Verteilung der verschiedenen Ruby-Elemente über die Basis.

Syntax

css

/* Keyword values */
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;

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

Werte

start: Ein Schlüsselwort, das angibt, dass die Ruby am Anfang des Basistextes ausgerichtet wird.
center: Ein Schlüsselwort, das angibt, dass die Ruby in der Mitte des Basistextes ausgerichtet wird.
space-between: Ein Schlüsselwort, das angibt, dass der zusätzliche Raum zwischen den Elementen der Ruby verteilt wird.
space-around: Ein Schlüsselwort, das angibt, dass der zusätzliche Raum zwischen den Elementen der Ruby und um sie herum verteilt wird.

Formale Definition

Anfangswert	`space-around`
Anwendbar auf	Ruby-Basiselemente, Ruby-Anmerkungen, Ruby-Basiscontainer, Ruby-Anmerkungscontainer
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	by computed value type

Formale Syntax

ruby-align = 
  start          |
  center         |
  space-between  |
  space-around

Beispiele

Ruby am Anfang des Basistextes ausgerichtet

HTML

html

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

CSS

css

ruby {
  ruby-align: start;
}

Ergebnis

Ruby in der Mitte des Basistextes ausgerichtet

HTML

html

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

CSS

css

ruby {
  ruby-align: center;
}

Ergebnis

Zusätzlicher Raum zwischen Ruby-Elementen verteilt

HTML

html

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

CSS

css

ruby {
  ruby-align: space-between;
}

Ergebnis

Zusätzlicher Raum zwischen und um Ruby-Elemente verteilt

HTML

html

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

CSS

css

ruby {
  ruby-align: space-around;
}

Ergebnis

Spezifikationen

Specification
CSS Ruby Annotation Layout Module Level 1 # ruby-align-property

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

HTML Ruby Elemente: <ruby>, <rt>, <rp>, und <rtc>.
CSS Ruby Eigenschaften: ruby-position, ruby-merge.