<ruby>标签不能自动注音，因它是纯语义容器，需手动逐字添加<rt>拼音；多字须分拆包裹，声调用预组合字符，兼容旧浏览器需<rp>，自动转音须依赖pinyin-pro等JS库。
直接用 <ruby> 标签给生僻字注音是可行的，但必须手动写拼音，它本身不识别汉字、不查字典、也不自动转音——这是最常被误解的一点。
为什么 <ruby> 不能自动出拼音
<ruby> 是纯语义容器，和 <div> 一样不带逻辑。浏览器只按结构渲染：把 <rt> 里的内容浮在 <ruby> 里汉字上方，仅此而已。
常见错误现象：
- 写成
<ruby>饕餮</ruby>→ 页面没变化，以为标签失效 - 写成
<ruby>饕餮<rt>tāo tiè</rt></ruby>→ 拼音显示了，但“饕”和“tāo”没对齐（因字宽 ≠ 音节宽度） - 用搜狗/微软拼音直接打“tāo tiè”，粘贴进
<rt>→ 声调字符（如 ā）被当成普通文本，但部分旧系统或编辑器会乱码或截断
生僻字注音必须一字一 <ruby>
多字连写会导致拼音堆叠、错位，尤其“龘”“靐”这类超长字或“叕”“燚”等重复结构字，浏览器无法智能拆分。必须逐字包裹，才能保证每个拼音严格对应一个字形。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<ruby>龘<rt>dá</rt></ruby><ruby>靐<rt>bīng</rt></ruby><ruby>齉<rt>nàng</rt></ruby>
要点：
- 不要合并：❌
<ruby>龘靐齉<rt>dá bīng nàng</rt></ruby> - 声调建议用预组合字符（如
ā），而非组合符（ā），后者在 Safari 或某些字体下易偏移或丢失 - 若需兼容 IE11 或极老安卓 WebView，必须加
<rp>(</rp><rt>...</rt><rp>)</rp>降级括号
想自动转拼音？绕不开 JavaScript 库
纯 HTML 解决不了“输入‘彧’→输出‘yù’”这件事。目前稳定可用的是 pinyin-pro，它支持生僻字（基于 Unicode 15.1 + 扩展汉字库），且 html() 方法直接返回带 <ruby> 结构的字符串。
实操建议：
- 安装：
npm install pinyin-pro - 基础调用：
import { html } from 'pinyin-pro'; const str = html('彧', { toneType: 'symbol' });→ 返回<ruby>彧<rp>(</rp><rt class="pinyin">yù</rt><rp>)</rp></ruby> - 注意：默认不处理异读字（如“叶公好龙”的“叶”读 yè，非 shè），需手动传
polyphonic: true并配合词典校准 - 服务端渲染时慎用：该库依赖运行时环境，SSR 中需确保 Node.js 版本 ≥ 18，且启用
globalThis.TextEncoder
容易被忽略的排版细节
即使结构和拼音都对了，生僻字注音仍可能视觉失真——因为 <rt> 默认样式在不同浏览器中差异明显：
- Chrome / Edge：
<rt>字体大小约 50%，行高紧贴汉字顶部 - Safari：默认更小，且对组合字符（如
ü）渲染偏高，需额外vertical-align: top - 移动端 iOS 微信内置浏览器：偶尔忽略
<rp>，导致括号不隐藏
最小必要 CSS 修复：
ruby rt { font-size: .6em; line-height: 1.2; vertical-align: top; }<br>ruby rp { display: none; }<br>@supports not (display: ruby) { ruby rp { display: inline; } }
真正麻烦的不是写法，而是验证：每个生僻字得人工核对《通用规范汉字表》附录或《汉语大字典》读音，库再快，也替代不了这一步。
