語法
css
/* 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;
值
start-
這是一個關鍵詞，表示注音將與基準文字的開頭對齊。
center-
這是一個關鍵詞，表示注音將與基準文字的中間對齊。
space-between-
這是一個關鍵詞，表示額外的空間將分佈在注音元素之間。
space-around-
這是一個關鍵詞，表示額外的空間將分佈在注音元素之間和周圍。
正式定義
正式語法
ruby-align =
start |
center |
space-between |
space-around
示例
注音與基準文字開頭對齊
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;
}
結果
注音與基準文字中心對齊
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;
}
結果
額外空間分佈在注音元素之間
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;
}
結果
額外空間分佈在注音元素之間和周圍
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;
}
結果
規範
| 規範 |
|---|
| CSS Ruby 註釋佈局模組級別 1 # ruby-align 屬性 |
瀏覽器相容性
載入中…
另見
- HTML 注音元素：
<ruby>、<rt>、<rp>和<rtc>。 - CSS 注音屬性：
ruby-position、ruby-merge。