使用 pinyin-pro 和 ruby 标签为汉字添加拼音

在现代网页开发中，为汉字添加拼音是一个常见的需求。本文将介绍如何使用 pinyin-pro 库以及 HTML5 的 <ruby> 和 <rt> 标签来实现这一功能。

什么是 <ruby> 和 <rt> 标签？

<ruby> 标签是 HTML5 中专门为东亚文字设计的语义化标签，用于表示注音或注解。它通常包含：

• 基础文本（如汉字）

• <rt> 标签，用于显示注音（如拼音）

• 可选的 <rp> 标签，用于在不支持 ruby 的浏览器中显示括号

<ruby>
  汉 <rt>hàn</rt>
</ruby>

在支持 ruby 的浏览器中，拼音会显示在汉字上方；在不支持的浏览器中，会显示为"汉(hàn)"的形式。

使用 pinyin-pro 库

pinyin-pro 是一个功能强大的汉字转拼音库，它提供了 html() 方法来生成带有拼音的 HTML 字符串。

基本用法

import { html } from 'pinyin-pro';

const htmlString = html('汉语拼音');

生成的 HTML 结构如下：

<span class="py-result-item">
  <ruby>
    <span class="py-chinese-item">汉</span>
    <rp>(</rp>
    <rt class="py-pinyin-item">hàn</rt>
    <rp>)</rp>
  </ruby>
</span>
<!-- 其他汉字类似 -->

自定义样式

可以通过 CSS 类名自定义拼音和汉字的样式：

.py-chinese-item {
  color: blue;
  font-size: 24px;
}

.py-pinyin-item {
  color: red;
  font-size: 12px;
}

高级选项

pinyin-pro 提供了丰富的选项来自定义输出：

const htmlString = html('汉语拼音', {
  resultClass: 'custom-result',      // 自定义最外层标签类名
  pinyinClass: 'custom-pinyin',      // 自定义拼音标签类名
  chineseClass: 'custom-chinese',    // 自定义汉字标签类名
  wrapNonChinese: true,              // 是否包裹非汉字
  nonChineseClass: 'custom-non-chinese', // 非汉字标签类名
  toneType: 'none',                  // 拼音不带音调
  customClassMap: {                  // 为特定汉字应用特定样式
    'red-item': ['汉'],
    'blue-item': ['音']
  }
});

 

更多使用技巧可查看pinyin-pro官网：https://pinyin-pro.cn/

本文灵感参考：https://www.cnblogs.com/zangbotao/p/19239663