Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.
Übersicht
Die ruby-align CSS Eigenschaft definiert die Verteilung der verschiedenen Rubyelemente über die Basis.
| Initialwert | space-around |
|---|---|
| Anwendbar auf | Ruby-Basiselemente, Ruby-Anmerkungen, Ruby-Basiscontainer, Ruby-Anmerkungscontainer |
| Vererbt | Ja |
| Medien | visuell |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
| Kanonische Reihenfolge | die eindeutige Reihenfolge definiert durch die formale Grammatik |
Syntax
/* Schlüsselwortwerte */ ruby-align: start; ruby-align: center; ruby-align: space-between; ruby-align: space-around; /* Globale Werte */ ruby-align: inherit; ruby-align: initial; ruby-align: unset;
Werte
start- Ist ein Schlüsselwort, dass angibt, dass die Anmerkung am dem Start des Basistexts ausgerichtet wird.
center- Ist ein Schlüsselwort, dass angibt, dass die Anmerkung mittig am Basistext ausgerichtet wird.
space-between- Ist ein Schlüsselwort, das angibt, dass der zusätzliche Abstand zwischen die Elemente der Anmerkung verteilt wird.
space-around- Ist ein Schlüsselwort, das angibt, dass der zusätzliche Abstand zwischen und um die Elemente der Anmerkung verteilt wird.
Formale Syntax
start | center | space-between | space-around
Beispiele
Dieses HTML wird mit jedem Wert von ruby-align unterschiedlich dargestellt:
<ruby> <rb>Dies ist ein langer Text als Beispiel</rb> <rp>（</rp><rt>kurzes Ruby</rt><rp>）</rp> </ruby>
Ruby am Start des Basistexts ausgerichtet
ruby {
ruby-align:start;
}
Dies ergibt folgende Ausgabe:
Ruby mittig am Basistext ausgerichtet
ruby {
ruby-align:center;
}
Dies ergibt folgende Ausgabe:
Zusätzlicher Abstand verteilt zwischen Rubyelementen
ruby {
ruby-align:space-between;
}
Dies ergibt folgende Ausgabe:
Zusätzlicher Abstand verteilt zwischen und um Rubyelemente
ruby {
ruby-align:space-around;
}
Dies ergibt folgende Ausgabe:
Spezifikationen
| Spezifikation | Status | Kommentar |
|---|---|---|
| CSS Ruby Layout Module Level 1 Die Definition von 'ruby-align' in dieser Spezifikation. |
Arbeitsentwurf | Ursprüngliche Definition |
Browser Kompatibilität
Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!
| Merkmal | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Grundlegende Unterstützung | Nicht unterstützt | 38 (38) | Nicht unterstützt[1] | Nicht unterstützt | Nicht unterstützt |
| Merkmal | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | Nicht unterstützt | 38.0 (38) | Nicht unterstützt[1] | Nicht unterstützt | Nicht unterstützt |
[1] Seit Version 9 implementiert Internet Explorer einen frühen Entwurf von CSS Ruby, in dem ruby-align die folgenden Werte hat: auto, left, center, right, distribute-letter, distribute-space und line-edge. Hier ist eine grobe Konvertierungstabelle:
| IE Syntax | Standardsyntax |
|---|---|
auto |
ruby-align nicht verwenden |
left |
start verwenden (in links-nach-rechts Schreibungen) |
center |
center |
right |
start verwenden (in rechts-nach-links Schreibungen) |
distribute-letter |
kein direktes Äquivalent; space-between oder space-around verwenden |
distribute-space |
space-around |
line-edge |
kein direktes Äquivalent |
Siehe auch
- HTML Ruby Elemente:
<ruby>,<rt>,<rp>und<rtc>. - CSS Ruby Eigenschaften:
ruby-position,ruby-merge.