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() 函数碰上“饮马”、“李茜”就会使用自定义拼音。自定义拼音支持单字和多字。
本帖最后由 杨帆 于 2025-12-31 16:44 编辑 <br /><br />哇，拼音可以这样加呀，谢谢马老师经典讲授，祝您元旦快乐~<br><br>
<style>
ruby { font-size: 3em; letter-spacing: 10px;color:red;white-space: pre-wrap;font-family: SimHei; cursor: pointer;user-select: none;}
rt { font-size: .6em; padding: 2px 0; letter-spacing: 1px;color:blue;}
#ppm{position: relative;
display: grid; place-items: center;margin: 30px 0; width: 1280px; left: calc(50% - 81px); transform: translateX(-50%);}
</style>
<p id="ppm"><ruby>祝<rt>zhù</rt>您<rt> nín </rt>元<rt>Yuán</rt>旦<rt> dàn</rt>快<rt> kuài</rt>乐<rt>lè</rt></ruby></p>
<audio id="aud" src="https://www.joy127.com/url/140965.mp3"loop></audio>
<script>
const ppm = document.getElementById('ppm');
const aud = document.getElementById('aud');
ppm.onclick = () => {aud.paused ? aud.play() : aud.pause();}
</script>
代码给汉字加拼音，太厉害了。。{:5_162:} 这功能好啊！ 也曾年轻 发表于 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
不错吧
是，挺好玩呢{:4_180:} 马黑黑 发表于 2025-12-31 17:53
有空我演示一个更牛叉的例子，基于 pinyin-pro 库。该库没有 ES6 模块输出功能，需要改造一下
好哒，这是高端局，超级期待{:5_162:} 花飞飞 发表于 2025-12-31 18:21
好哒，这是高端局，超级期待
你教语文的话，这个会很有用，至少自己做笔记时很方便 杨帆 发表于 2025-12-31 18:17
是，挺好玩呢
有时间有兴趣可以了解一下 pinyin-pro.js 库 马黑黑 发表于 2025-12-31 19:29
你教语文的话，这个会很有用，至少自己做笔记时很方便
我扫地的。。不会教书{:5_117:} 杨帆 发表于 2025-12-31 15:05
本帖最后由 杨帆 于 2025-12-31 16:44 编辑 哇，拼音可以这样加呀，谢谢马老师经典讲授，祝您元旦快乐~
...
<style>
ruby { font-size: 2em; letter-spacing: 10px;color:red;white-space: pre-wrap;font-family: SimHei; }
rt { font-size: .5em; padding: 4px 0; letter-spacing: 1px;color:blue;}
#showTxt {position: relative; margin: 30px 0; }
</style>
<p id="showTxt"></p>
<script>
var sf1 = document.createElement('script');
sf1.type = 'text/javascript';
sf1.src = "https://cccimg.com/down.php/c9b93d41dacbef140e704c7e43adbb9d.js";
sf1.charset = "utf-8";
document.body.appendChild(sf1);
sf1.onload = () => {
let {pinyin} = pinyinPro;
let pinyinArr = pinyin("您这是活学活用 , 立竿见影啊 !",{type:'array'})
let formStr = (str) => {
let rubyStr = '<ruby>';
for(i=0;i<str.length;i++) {
let chCode = str.charCodeAt(i);
let ch = str.charAt(i);
if(chCode >= 0x4e00 && chCode <= 0x9fa5) {
rubyStr += `${ch}<rt>${pinyinArr}</rt>`;
}
else rubyStr += `${ch}<rt></rt>`;
}
return `${rubyStr}</ruby>`;
}
showTxt.innerHTML = formStr("您这是活学活用 , 立竿见影啊 !");
}
</script> 花飞飞 发表于 2025-12-31 19:49
我扫地的。。不会教书
你不教书可惜了，干错行了 马黑黑 发表于 2025-12-31 20:44
你不教书可惜了，干错行了
男怕入错行，我又不是男的{:4_173:} 花飞飞 发表于 2025-12-31 21:26
男怕入错行，我又不是男的
嫁错郎说的是嫁给入错行的蝈蝈 马黑黑 发表于 2025-12-31 19:30
有时间有兴趣可以了解一下 pinyin-pro.js 库
好的，谢谢老师{:4_180:} 马黑黑 发表于 2025-12-31 23:05
嫁错郎说的是嫁给入错行的蝈蝈
蝈蝈错，蛐蛐就不错了。。{:4_173:} 花飞飞 发表于 2026-1-1 08:53
蝈蝈错，蛐蛐就不错了。。
错，错上加错
杨帆 发表于 2026-1-1 00:43
好的，谢谢老师
{:4_190:}
页:
[1]
2