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

總結

以上是生活随笔為你收集整理的HTML5 汉字上方添加拼音标注 ruby、rp、rt的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。