ruby-position 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.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die ruby-position CSS-Eigenschaft definiert die Position eines Ruby-Elements relativ zu seinem Basiselement. Es kann über dem Element (over), unter ihm (under) oder rechts davon (inter-character) positioniert werden.
Probieren Sie es aus
ruby-position: over;
ruby-position: under;
<section id="default-example">
<ruby id="example-element"> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
</section>
#example-element {
font-size: 2em;
}
Syntax
/* Keyword values */
ruby-position: over;
ruby-position: under;
ruby-position: alternate;
ruby-position: alternate over;
ruby-position: alternate under;
ruby-position: inter-character;
/* Global values */
ruby-position: inherit;
ruby-position: initial;
ruby-position: revert;
ruby-position: revert-layer;
ruby-position: unset;
Werte
Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:
over-
Ist ein Schlüsselwort, das angibt, dass Ruby über dem Haupttext für horizontale Schriften und rechts davon für vertikale Schriften platziert werden muss. under-
Ist ein Schlüsselwort, das angibt, dass Ruby unter dem Haupttext für horizontale Schriften und links davon für vertikale Schriften platziert werden muss. alternate-
Ist ein Schlüsselwort, das angibt, dass Ruby zwischen über und unter wechselt, wenn es mehrere Ebenen der Annotation gibt.
inter-character-
Ist ein Schlüsselwort, das angibt, dass die Ruby-Annotation rechts von den Basistextzeichen platziert wird. Dieser Wert ist für Bopomofo-Ruby (Zhuyin Fuhao) gedacht.
Formale Definition
| Anfangswert | alternate |
|---|---|
| Anwendbar auf | Ruby-Anmerkungscontainer |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
ruby-position =
[ alternate || [ over | under ] ] |
inter-character
Beispiele
Ruby über dem Text positioniert
HTML
<ruby>
<rb>超電磁砲</rb>
<rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
CSS
ruby {
ruby-position: over;
}
Ergebnis
Ruby unter dem Text positioniert
HTML
<ruby>
<rb>超電磁砲</rb>
<rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
CSS
ruby {
ruby-position: under;
}
Ergebnis
Ruby alternierend
HTML
<ruby>
<rb>A</rb><rb>B</rb><rb>C</rb>
<rtc>Above</rtc>
<rtc>Below</rtc>
</ruby>
CSS
ruby {
ruby-position: alternate; /* this is also the initial value */
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Ruby Annotation Layout Module Level 1 # rubypos |
Browser-Kompatibilität
Siehe auch
<ruby>,<rt>,<rp>, und<rtc>HTML-Elementeruby-align- CSS Ruby Layout Modul