关于前端:ruby标签对中文添加拼音显示

做前端开发工夫长了，还是能遇到一些没学过的知识点，明天分享个最近用到的性能：对文字显示拼音。
依照个别思路，就是对中文上方加一个 span，而后通过定位等操作挪动到文字上方。然而这个操作太麻烦了，代码也多。
起初看到，在 HTML 标签外面，有一个 ruby 标签，就是用来解决这个问题的。

ruby

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

<ruby> 写代码的浩 <rp>(</rp><rt>xiědàimǎdehào</rt><rp>)</rp></ruby>

成果如图:

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

拼音加空格

代码如下：

<ruby> 写代码的浩 <rp>(</rp><rt>xiě dài mǎ de hào</rt><rp>)</rp></ruby>

成果如下：

好多了，然而如同没有对齐，拼音比文字更靠左。我试了一些办法，都扭转不了这个对齐问题。于是，我想着能不能把每一个字都独自做拼音。说干就干。

每一个字独自做拼音

代码如下：

<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>hào</rt><rp>)</rp></ruby>

成果如下：

完满。下一步就是解决文字变动的问题了。依据文字主动取得拼音。我在网上找了一个库：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]} <rp>(</rp><rt>${gzhPy[i]}</rt><rp>)</rp>`;
  containerEl.appendChild(rubyEl);
}

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

会发现这个的 DOM 节点尽管和下面的一样，然而文字间距很小，没有后面固定文字时好看。于是我就又对 ruby 减少了一个款式：

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

成果如下：

这样一来就完满了。最初，弄一个输入框试试输出任意中文的成果。

输入框输出任意中文

这个代码就不放了，间接看后果：

最初

有人晓得为什么这个性能的标签叫 ruby 吗？

完结

好了，本文到此结束，心愿本文对你有所帮忙 :-)
最近新弄了一个公众号：写代码的浩，求关注 😄。前面会逐渐把把握的前端常识以及职场常识积淀下来。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。