HTML拼音/音标注释标记ruby和它的子元素rt/rp

转： /html-ruby-rt-rp

ruby语法说明

• <ruby> — 用它将需要注释或注音标的文字内容包围住。
• <rt> — 这里面放置音标或注释，这个标记要跟在需要注释的文本后边。
• <rp> — 这个标记是防备那些不支持ruby标记的浏览器，主要用来放置括弧。对于支持这个标记的浏览器，rp标记的CSS样式是{display:none;}，也就是不可见。

<ruby>
北<rp>（</rp><rt>bei</rt><rp>）</rp>
京<rp>（</rp><rt>jing</rt><rp>）</rp>
</ruby>

rt里的文字，对于横向显示的文章，它会显示在上方。对于竖向显示的文字，它会显示到右边。如果你觉得音标的字体太大了，可以用css设置成小字体。

下面是一个竖向的例子：

北bei京jing你ni好hao

浏览器支持情况

对于不支持ruby标记的浏览器里，rp标记里的内容就会显示出来，你可以用下面这张图和上面的那种图比较一下，看看有什么区别。下面这张图就是在不支持ruby标记的浏览器里的显示效果：

最新版的火狐、谷歌等浏览器都支持这个标记。

这个标记还支持嵌套使用，显示双层标注。

用这个标记显示中英文对照文本，效果很不错。