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 dem Basistext.

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 Basistextes ausgerichtet wird.
center: Ist ein Schlüsselwort, das angibt, dass das Ruby in der Mitte des Basistextes 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 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

Siehe auch

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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