ruby-align CSS property
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 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 am 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 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 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
| 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>