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

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

Anfangswertspace-around
Anwendbar aufRuby-Basiselemente, Ruby-Anmerkungen, Ruby-Basiscontainer, Ruby-Anmerkungscontainer
VererbtJa
Berechneter Wertwie angegeben
Animationstypby computed value type

Formale Syntax

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

Beispiele

Ruby am Anfang des Basistextes ausgerichtet

HTML

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

CSS

ruby {
  ruby-align: start;
}

Ergebnis

Ruby in der Mitte des Basistextes ausgerichtet

HTML

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

CSS

ruby {
  ruby-align: center;
}

Ergebnis

Zusätzlicher Raum zwischen Ruby-Elementen verteilt

HTML

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

CSS

ruby {
  ruby-align: space-between;
}

Ergebnis

Zusätzlicher Raum zwischen und um Ruby-Elemente verteilt

HTML

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

CSS

ruby {
  ruby-align: space-around;
}

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

Siehe auch