ruby-align
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 将与基本文本的开始对齐。
center是一个关键字，表示ruby将在基本文本的中间对齐
space-between是一个关键字，表明额外的空间将分布在ruby元素之间。
space-around是一个关键字，表明多余的空间将分布在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 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
