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 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
Diese Eigenschaft wird als eines der folgenden Schlüsselwörter angegeben:
start-
Ist ein Schlüsselwort, das angibt, dass das Ruby mit dem Start 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 und um die Elemente des Ruby 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, das am Anfang des Basistextes ausgerichtet ist
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, das in der Mitte des Basistextes ausgerichtet ist
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, der zwischen Ruby-Elementen verteilt wird
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, der zwischen und um Ruby-Elemente verteilt wird
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
| 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>