ruby-align
这是一种实验技术
由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。还要注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
ruby-alignCSS属性定义在基底的不同ruby 元素的分布。
/* 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: unset;
| Initial value | space-around |
|---|---|
| 应用对象 | ruby bases, ruby annotations, ruby base containers, ruby annotation containers |
| 是否可继承 | yes |
| 媒体 | visual |
| 计算值 | as specified |
| 动画类型 | discrete |
| 规范顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
值
start是一个关键字，表明ruby 将与基本文本的开始对齐。
形式语法
start | center | space-between | space-around
实例
此HTML将以不同的方式呈现ruby-align：
<ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
Ruby在基本文本的开始对齐
<ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
ruby {
ruby-align:start;
}
结果如下：
Ruby在基本文本的中心对齐
<ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
ruby {
ruby-align:center;
}
结果如下：
在 ruby 元素之间额外的空间分布
<ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
ruby {
ruby-align:space-between;
}
结果如下：
在ruby元素之间和周围分布的额外空间
<ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
ruby {
ruby-align:space-around;
}
结果如下：
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Ruby Layout Module Level 1The definition of 'ruby-align' in that specification. | Working Draft | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | No support | No support¹ | 38 (38) | No support¹ | No support | No support |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | No support | (Yes) | 38.0 (38) | No support¹ | No support | No support |
Microsoft Edge及其前身的Internet Explorer版本9至11实现了CSS Rubby的一个早期草案，其中ruby-align属性有值auto，left，center，right，distribute-letter，distribute-space，和line-edge。这里是一个表格，描述了Microsoft实现的和当前的CSS Ruby，Level 1规范之间的近似等价关系：
| Edge and IE Syntax | Standard Syntax |
|---|---|
| auto | space-around (default value) for ideographic scripts or center for Latin scripts; to achieve a similar effect, one may use ISO 15924 script codes in conjunction with HTML lang attributes or XML xml:lang attributes and CSS lang pseudo‑class selectors |
| left | start in left‐to‐right scripts |
| center | center without the optional behavior described in CSS Ruby, Level 1, Section 5.2: Line‐Edge Alignment; this is the Firefox behavior |
| right | start in right‐to‐left scripts |
| distribute-letter | space-between |
| distribute-space | space-around (default value) |
| line-edge | center with the optional behavior described in CSS Ruby, Level 1, Section 5.2: Line‐Edge Alignment; Firefox does not support a keyword for this behavior; CSS rules targeting individual ruby elements with the center and start keywords based on ruby base text positions and widths may be used instead to achieve similar effects in Firefox |
