HTML5 汉字上方添加拼音标注 ruby、rp、rt
原文:http://wenxi.fun/study/html5/html5_pinyin.html
欢迎访问: 温习饭,一个技术学习网站
先来看效果:
温习饭
如果你想给汉字加上拼音,有几种办法,
你可能会采用下面的方式:
温(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>
效果为:
温习饭
但是在不支持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