摘要：ruby標簽在東亞使用，顯示的是東亞字符的發音。將 <ruby> 標簽與 <rt> 和 <rp> 標簽一起使用： <ruby> 元素由一個或多個需要解釋/發音的字符和一個提供該信息的 <rt> 元素組成，還包括可選...
最近有個需求，對中文顯示拼音，按照之前思路，就是對中文上方加一個span，然后通過定位等操作移動到文字上方。但是這個操作太麻煩了，代碼也多。 后來了解到，在HTML5標簽里面，有一個 ruby 標簽，就是用來解決這個問題的。
ruby標簽
ruby標簽在東亞使用，顯示的是東亞字符的發音。將 <ruby> 標簽與 <rt> 和 <rp> 標簽一起使用：
<ruby> 元素由一個或多個需要解釋/發音的字符和一個提供該信息的 <rt> 元素組成，還包括可選的 <rp> 元素，定義當瀏覽器不支持 "ruby" 元素時顯示的內容。
舉個例子，隨便寫句話，一個ruby標簽里寫多個字符的話，拼音就跟中文不上下對齊了：
<ruby>寫代碼的小袁<rp>(</rp><rt>xiě dài mǎ de xiǎo yuán</rt><rp>)</rp></ruby>
所以還的一個字，一個ruby標簽，這樣就完美上下對齊了：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ruby標簽</title> </head> <body> <ruby>我<rt>diāo</rt></ruby> <ruby>厲<rt>chóng</rt></ruby> <ruby>害<rt>xiǎo</rt></ruby> <ruby>吧<rt>jì</rt></ruby> <br> <br> <ruby>寫<rp>(</rp><rt>xiě</rt><rp>)</rp></ruby> <ruby>代<rp>(</rp><rt>dài</rt><rp>)</rp></ruby> <ruby>碼<rp>(</rp><rt>mǎ</rt><rp>)</rp></ruby> <ruby>的<rp>(</rp><rt>de</rt><rp>)</rp></ruby> <ruby>小<rp>(</rp><rt>xiǎo</rt><rp>)</rp></ruby> <ruby>袁<rp>(</rp><rt>yuán</rt><rp>)</rp></ruby> </body> </html>
效果如下：
下一步就是解決文字變化的問題了。根據文字自動獲得拼音。我在網上找了一個庫：pinyin-pro 來解決這個通過文字識別拼音的問題，pinyin-pro具體怎么使用我這里就不啰嗦了。大家想了解可以去看文檔。 我這邊demo的代碼如下：
const gzhStr = '寫代碼的小袁'.split('');
const { pinyin } = pinyinPro;
const gzhPy = pinyin(gzhStr.join(''), { type: 'array' });
console.log(gzhStr.join(''), gzhPy.join(' '));
const containerEl = document.getElementById('gzh');
for(let i = 0, len = gzhPy.length; i < len; i++) {
const rubyEl = document.createElement('ruby');
rubyEl.innerHTML = `${gzhStr[i]} <rp>(</rp><rt>${gzhPy[i]}</rt><rp>)</rp>`;
containerEl.appendChild(rubyEl);
}邏輯就是把文字和對應的拼音，拼成ruby要求的格式，輸出到對應的DOM節點，然后在用css美化一下樣式就結束了。
