20. 注音 ruby rt rp

本节目标：学会用 ruby 系列标签在文字上方显示拼音或注音，支持中文和日文场景。

ruby 标签：注音容器

<ruby> 用来包裹需要注音的文字。注音会显示在文字的上方或旁边。

<ruby>
  汉<rp>(</rp><rt>hàn</rt><rp>)</rp>
  字<rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>

在浏览器里看，效果像这样：拼音显示在汉字上方。

<rt> 放在 <ruby> 内部，包裹注音本身。

<ruby>
  中<rt>zhōng</rt>
  国<rt>guó</rt>
</ruby>

浏览器把 <rt> 的内容显示到对应文字的上方。

<rp> 是给不支持 <ruby> 的浏览器准备的。它的内容是括号。

<ruby>
  东京<rp>(</rp><rt>とうきょう</rt><rp>)</rp>
</ruby>

支持 <ruby> 的浏览器会忽略 <rp> 的内容，不显示括号。不支持的浏览器会显示括号，效果像这样：东京(とうきょう)。

<p>
  <ruby>
    码<rt>mǎ</rt>
    上<rt>shàng</rt>
    学<rt>xué</rt>
  </ruby>
</p>

注意：要给每个汉字分别注音。<rt> 的位置对应上方显示的汉字。

日文里汉字上方标注假名（furigana）也是同样的原理：

<ruby>
  日本<rt>にほん</rt>
</ruby>

当一个 <rt> 对应多个汉字时，注音显示在整组字的上方。

单字注音（rt 紧跟每个字）：

<ruby>
  拼<rt>pīn</rt>
  音<rt>yīn</rt>
</ruby>

词组注音（一个 rt 对应多个字）：

<ruby>
  拼音<rt>pīnyīn</rt>
</ruby>

大多数浏览器会把 <rt> 的内容以较小字号显示在 <ruby> 文字的正上方。

可以用 CSS 微调位置和大小：

ruby {
  ruby-align: center;
}

rt {
  font-size: 0.6em;
}

<p>
  这里的"<ruby>
    喇<rt>lǎ</rt>
    叭<rt>ba</rt>
  </ruby>"是指扬声器。
</p>

浏览器兼容性

现代浏览器都支持 <ruby>。如果需要支持非常老的浏览器，<rp> 括号能提供降级方案。