前端文字实现拼音标注

示例地址

  • https://github.com/superBiuBiuMan/duyi_study

使用ruby标签

  • 使用ruby标签进行标注
<ruby><rt>hàn</rt>
</ruby>

  • 当遇到不兼容此标签的时候,可以添加一个rp标签,正确情况下是不显示rp标签的
<ruby><rp>(</rp>
    <rt>hàn</rt>
    <rp>)</rp>
</ruby>

使用拼音库

  • https://pinyin.js.org/
  • https://www.npmjs.com/package/pinyin
  • 安装
npm install pinyin@alpha --save
  • 使用看官网
  • 示例
import pinyin from "pinyin/lib/pinyin-web";
pinyin('你')
  • 效果

未经允许不得转载:肥猫博客 » 前端文字实现拼音标注

赞 (0)
分享到: 更多

评论 0