注音元素 ruby

例

效果

尾 上(おのえ)   世 (せ) 莉 (り) 架 (か)

尾上 世莉架：《Chaos;Child》女主角。

HTML

<ruby>
    <span>尾 上</span>
    <rp>（</rp>
    <rt>おのえ</rt>
    <rp>）</rp>
</ruby>
<span>&nbsp;</span>
<ruby>
    世
    <rp>（</rp>
    <rt>せ</rt>
    <rp>）</rp>
    莉
    <rp>（</rp>
    <rt>り</rt>
    <rp>）</rp>
    架
    <rp>（</rp>
    <rt>か</rt>
    <rp>）</rp>
</ruby>

CSS

.ruby rt {
    font-size: 0.8em;
}

.ruby {
    font-size: 25px;
}

元素

• ruby：东亚字符注音元素。ruby 取名自 a unit of measurement used by typesetters 。
• rp：Ruby Fallback Parenthesis，Ruby 后备括号元素。

以

尾 上（おのえ）  世 （せ） 莉 （り） 架 （か）

为例，在不支持 ruby 元素的浏览器中，会显示为

尾 上(おのえ)世(せ)莉(り)架(か)

• rt：Ruby Text，Ruby 文本元素，即注音。

参考

• <ruby>: The Ruby Annotation element | MDN
• <rp>: The Ruby Fallback Parenthesis element | MDN
• <rt>: The Ruby Text element | MDN