ruby-align

Baseline 2024

Neu verfügbar

Seit December 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

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: Ist ein Schlüsselwort, das angibt, dass das Ruby mit dem Anfang des Basistexts ausgerichtet wird.
center: Ist ein Schlüsselwort, das angibt, dass das Ruby in der Mitte des Basistexts ausgerichtet wird.
space-between: Ist ein Schlüsselwort, das angibt, dass der zusätzliche Raum zwischen den Elementen des Ruby verteilt wird.
space-around: Ist ein Schlüsselwort, das angibt, dass der zusätzliche Raum zwischen den Elementen des Ruby und um es 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 Basistexts 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 Basistexts 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

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

Browser-Kompatibilität

Siehe auch

ruby-position
CSS Ruby Layout Modul
HTML Ruby-Elemente: <ruby>, <rt>, <rp>, und <rtc>

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden