ruby-align
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.
Thuộc tính ruby-align của CSS xác định cách phân bố các phần tử ruby khác nhau trên văn bản cơ sở.
Cú pháp
css
/* Giá trị từ khóa */
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;
/* Giá trị toàn cục */
ruby-align: inherit;
ruby-align: initial;
ruby-align: revert;
ruby-align: revert-layer;
ruby-align: unset;
Giá trị
start-
Từ khóa cho biết ruby sẽ được căn chỉnh theo điểm đầu của văn bản cơ sở.
center-
Từ khóa cho biết ruby sẽ được căn chỉnh ở giữa văn bản cơ sở.
space-between-
Từ khóa cho biết khoảng trống thừa sẽ được phân bố giữa các phần tử ruby.
space-around-
Từ khóa cho biết khoảng trống thừa sẽ được phân bố giữa và xung quanh các phần tử ruby.
Định nghĩa hình thức
| Initial value | space-around |
|---|---|
| Applies to | ruby bases, ruby annotations, ruby base containers, ruby annotation containers |
| Inherited | yes |
| Computed value | as specified |
| Animation type | by computed value type |
Cú pháp hình thức
ruby-align =
start |
center |
space-between |
space-around
Ví dụ
Ruby căn chỉnh theo điểm đầu văn bản cơ sở
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;
}
Kết quả
Ruby căn chỉnh ở giữa văn bản cơ sở
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;
}
Kết quả
Khoảng trống thừa phân bố giữa các phần tử ruby
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;
}
Kết quả
Khoảng trống thừa phân bố giữa và xung quanh các phần tử ruby
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;
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Ruby Annotation Layout Module Level 1 # ruby-align-property |
Tương thích trình duyệt
Xem thêm
ruby-position- Module CSS ruby layout
- Các phần tử HTML Ruby:
<ruby>,<rt>,<rp>, và<rtc>