ruby标签：对中文添加拼音显示

做前端开发时间长了，还是能遇到一些没学过的知识点，今天分享个最近用到的功能：对文字显示拼音。
按照一般思路，就是对中文上方加一个span，然后通过定位等操作移动到文字上方。但是这个操作太麻烦了，代码也多。
后来看到，在HTML标签里面，有一个ruby标签，就是用来解决这个问题的。

ruby

举例，我们要对下面的文字做一个拼音显示，代码怎么写呢：

写代码的浩(xiědàimǎdehào)

效果如图:

我们会发现，拼音是完全贴着的，是因为代码中的rt内容就是贴着的。我们加空格试试。

拼音加空格

代码如下：

写代码的浩(xiě dài mǎ de hào)

效果如下：

好多了， 但是好像没有对齐，拼音比文字更靠左。我试了一些方法，都改变不了这个对齐问题。于是，我想着能不能把每一个字都单独做拼音。说干就干。

每一个字单独做拼音

代码如下：

写(xiě)
代(dài)
码(mǎ)
的(de)
浩(hào)

效果如下：

完美。下一步就是解决文字变化的问题了。根据文字自动获得拼音。我在网上找了一个库：pinyin-pro来解决这个通过文字识别拼音的问题。 pinyin-pro官网：http://pinyin-pro.cn/

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]} (${gzhPy[i]})`;
  containerEl.appendChild(rubyEl);
}

逻辑就是把文字和对应的拼音，拼成ruby要求的格式，输出到对应的DOM节点。
效果如图：

会发现这个的DOM节点虽然和上面的一样，但是文字间距很小，没有前面固定文字时美观。于是我就又对ruby增加了一个样式：

#gzh ruby {
  margin-right: 4px;
}

效果如下：

这样一来就完美了。最后，弄一个输入框试试输入任意中文的效果。

输入框输入任意中文

这个代码就不放了，直接看结果：

最后

有人知道为什么这个功能的标签叫ruby吗？

结束

好了，本文到此结束，希望本文对你有所帮助 :-)
最近新弄了一个公众号：写代码的浩，求关注 。后面会逐步把掌握的前端知识以及职场知识沉淀下来。
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。