html5标签 ruby 及其子元素 rt

马黑黑

最近接到一个需求：汉字文本每一行上方都标注拼音。

这不难实现，使用基于html5的 <ruby> 标签即可，它专为东亚文字标注注音而创建，格式如下：

<p>
    <ruby>你<rt>nǐ</rt>好<rt>hǎo</rt>玛<rt>Mǎ</rt>丽<rt>Lì</rt>！</ruby>
</p>

<p>标签负责分行。这不是重点，重点在 <ruby> 标签：ruby 标签包裹着汉字和拼音，其中拼音需要使用 rt 标签包裹，每一个字的具体结构是 字+<rt>拼音</rt>，这样就可以在p标签里面将汉字的拼音标注在其上方。

可以定义 ruby 和 rt 标签字的大小。一般而言，汉字要大一些，拼音要小一些，可以按接近 2:1 的比例设置汉字和拼音大小，css代码如下：

ruby { font-size: 1.6em; }
rt { font-size: 0.8em; padding: 2px 0; }

上面的 rt 选择器还设置了内边距 padding 属性，主要是拼音和汉字垂直方向拉开一点距离，实际使用时应视情况做调整。

一个字一个字地去弄的确太繁琐，可以考虑用JS完成这些工作。

如果觉得拼音输入是一件更为繁琐的工作，那么，有一个好消息是使用 pinyin-pro.js 可以帮上忙，使用它不需要输入拼音，甚至不需要手动去组织 ruby 标签，一切都给包办了——它有一个 html() 函数，专干这个事情，将汉字意义给出拼音标注并组织 rubby 标签代码：

var pyStr = html('你好玛丽');

就这么简单。当然，在智能检索多音字的拼音方面，它不一定做得完美，如果有出入，使用者可以加入自定义拼音予以纠正，加在调用函数之前。下面只是举个与上例不相关的示例，实际应用根据情况而设置多少个自定义拼音：

customPinyin({
    饮马: 'yìn mǎ',
    李茜: 'Lǐ Qiàn',
});

这样，html() 函数碰上“饮马”、“李茜”就会使用自定义拼音。自定义拼音支持单字和多字。

杨帆

哇，拼音可以这样加呀，谢谢马老师经典讲授，祝您元旦快乐~

祝zhù您 nín 元Yuán旦 dàn快 kuài乐lè

花飞飞

代码给汉字加拼音，太厉害了。。

也曾年轻

这功能好啊！

马黑黑

也曾年轻 发表于 2025-12-31 16:43
这功能好啊！

的确很不错

马黑黑

花飞飞 发表于 2025-12-31 16:24
代码给汉字加拼音，太厉害了。。

有空我演示一个更牛叉的例子，基于 pinyin-pro 库。该库没有 ES6 模块输出功能，需要改造一下

马黑黑

杨帆 发表于 2025-12-31 15:05
本帖最后由 杨帆 于 2025-12-31 16:44 编辑 哇，拼音可以这样加呀，谢谢马老师经典讲授，祝您元旦快乐~

...

不错吧

杨帆

马黑黑 发表于 2025-12-31 17:53
不错吧

是，挺好玩呢

花飞飞

马黑黑 发表于 2025-12-31 17:53
有空我演示一个更牛叉的例子，基于 pinyin-pro 库。该库没有 ES6 模块输出功能，需要改造一下

好哒，这是高端局，超级期待

马黑黑

花飞飞 发表于 2025-12-31 18:21
好哒，这是高端局，超级期待

你教语文的话，这个会很有用，至少自己做笔记时很方便

马黑黑

杨帆 发表于 2025-12-31 18:17
是，挺好玩呢

有时间有兴趣可以了解一下 pinyin-pro.js 库

花飞飞

马黑黑 发表于 2025-12-31 19:29
你教语文的话，这个会很有用，至少自己做笔记时很方便

我扫地的。。不会教书

也曾年轻

杨帆 发表于 2025-12-31 15:05 本帖最后由 杨帆 于 2025-12-31 16:44 编辑 哇，拼音可以这样加呀，谢谢马老师经典讲授，祝您元旦快乐~ ...

马黑黑

花飞飞 发表于 2025-12-31 19:49
我扫地的。。不会教书

你不教书可惜了，干错行了

花飞飞

马黑黑 发表于 2025-12-31 20:44
你不教书可惜了，干错行了

男怕入错行，我又不是男的

马黑黑

花飞飞 发表于 2025-12-31 21:26
男怕入错行，我又不是男的

嫁错郎说的是嫁给入错行的蝈蝈

杨帆

马黑黑 发表于 2025-12-31 19:30
有时间有兴趣可以了解一下 pinyin-pro.js 库

好的，谢谢老师

花飞飞

马黑黑 发表于 2025-12-31 23:05
嫁错郎说的是嫁给入错行的蝈蝈

蝈蝈错，蛐蛐就不错了。。

马黑黑

花飞飞 发表于 2026-1-1 08:53
蝈蝈错，蛐蛐就不错了。。

错，错上加错

马黑黑

杨帆 发表于 2026-1-1 00:43
好的，谢谢老师