ruby-position
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.
* Some parts of this feature may have varying levels of support.
Thuộc tính ruby-position của CSS xác định vị trí của phần tử ruby so với phần tử cơ sở của nó. Phần tử ruby có thể được đặt phía trên (over), phía dưới (under), hoặc giữa các ký tự ở phía bên phải (inter-character).
Try it
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;
}
Cú pháp
/* Giá trị từ khóa */
ruby-position: over;
ruby-position: under;
ruby-position: alternate;
ruby-position: alternate over;
ruby-position: alternate under;
ruby-position: inter-character;
/* Giá trị toàn cục */
ruby-position: inherit;
ruby-position: initial;
ruby-position: revert;
ruby-position: revert-layer;
ruby-position: unset;
Giá trị
over-
Từ khóa cho biết ruby phải được đặt phía trên văn bản chính với chữ viết ngang và ở bên phải với chữ viết dọc. under-
Từ khóa cho biết ruby phải được đặt phía dưới văn bản chính với chữ viết ngang và ở bên trái với chữ viết dọc. alternate-
Từ khóa cho biết ruby luân phiên giữa trên và dưới khi có nhiều cấp chú thích.
inter-character-
Khi được chỉ định, hoạt động như
overtrong chế độ viết dọc. Ngoài ra, chỉ định rằng ruby phải được đặt giữa các ký tự khác nhau, xuất hiện bên phải của cơ sở trong văn bản ngang và buộc các phần tử con của container chú thích ruby có chế độ viếtvertical-rl.
Định nghĩa hình thức
| Initial value | alternate |
|---|---|
| Applies to | ruby annotation containers |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
ruby-position =
[ alternate || [ over | under ] ] |
inter-character
Ví dụ
Ruby được đặt phía trên văn bản
HTML
<ruby>
<rb>超電磁砲</rb>
<rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
CSS
ruby {
ruby-position: over;
}
Kết quả
Ruby được đặt phía dưới văn bản
HTML
<ruby>
<rb>超電磁砲</rb>
<rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
CSS
ruby {
ruby-position: under;
}
Kết quả
Ruby luân phiên
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 */
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Ruby Annotation Layout Module Level 1 # rubypos |
Tương thích trình duyệt
Xem thêm
- Các phần tử HTML
<ruby>,<rt>,<rp>, và<rtc> ruby-align- Module CSS ruby layout