HTML5 汉字上方添加拼音标注 ruby、rp、rt

HTML5 汉字上方添加拼音标注 ruby、rp、rt

原文：http://wenxi.fun/study/html5/html5_pinyin.html
欢迎访问： 温习饭，一个技术学习网站

先来看效果：

温wēn习xí饭fàn

如果你想给汉字加上拼音，有几种办法，

你可能会采用下面的方式：

温(wēn)习(xí)饭(fàn)

将拼音追加在文字后面，这样看起来会比较的长。 你有没有想过将拼音放在汉字上方呢，就像这样：

温wēn习xí饭fàn

HTML5提供的ruby标签可以实现这个拼音效果。

ruby是一种排版注释系统，是位于横排基础文本上方的简短文字，主要针对东亚语言作出简单的读音注释。例如可以为中文或日文显示读音。

ruby涉及的元素包括ruby、rt以及rp。首先使用ruby指定一个具体的表达式，然后使用rt提供说明。rt部分将显示在表达式上方。

下面的例子中，拼音将显示在文字的上方。

<ruby>
温<rt>wēn</rt>
习<rt>xí</rt>
饭<rt>fàn</rt>
</ruby>

效果为：

温wēn 习xí 饭fàn

但是在不支持ruby的浏览器中需要使用rp对这两个区块进行视觉上的隔离。

<ruby>
    温
    <rp>
        <rt>wēn</rt>
    </rp>
    习
    <rp>
        <rt>xí</rt>
    </rp>
    饭
    <rp>
        <rt>fàn</rt>
    </rp>
</ruby>

<ruby>标签是将所有需要注释的字包裹起来，然后实现上标的标签其实是<rt>标签，由于这个标签属于HTML5标签，很多老版本浏览器会不支持，那么当浏览器不支持的时候它就会像>>“温wēn习xí饭fàn”这样显示，非常不美观。 加上<rp>当浏览器不支持时就可以显示成>>温（wēn）习（xí）饭（fàn） 这样的效果了。

如果要显示拼音的声调，可以使用下面的特殊字符：

ā á ǎ à

ā á ǎ à

ō ó ǒ ò

ī í ǐ ì

ū ú ǔ ù

ǖ ǘ ǚ ǜ

ń ň

原文：http://wenxi.fun/study/html5/html5_pinyin.html