ruby标签需成对使用rb与rt，rb包裹汉字、rt包裹对应拼音，多字须逐字标注；兼容旧浏览器需降级方案；自动加拼音易出错，推荐用专业库并手动校对。
ruby 标签加拼音的基本写法
ruby 是 HTML5 原生支持的语义化标签，专为注音设计，适合给汉字（如古诗词）添加拼音。它本身不渲染样式，但浏览器默认会把 rt（注音）显示在 rb（基字）上方或右上角，符合中文注音习惯。
- 必须成对使用：
rb包裹汉字，rt包裹对应拼音，两者都嵌在ruby内 - 不要省略
rb：直接写<ruby>山<rt>shān</rt></ruby>是无效的（HTML 规范要求显式标注基字） - 拼音建议用小写、不带声调符号的格式（如
shan），避免字体渲染错位；若需声调，确保字体支持 Unicode 拼音扩展区（如 U+0101–U+010D）
<ruby><rb>山</rb><rt>shān</rt></ruby>
多字诗句怎么逐字标音
古诗词讲究字字对应，不能把整句拼音塞进一个 rt。必须每个字配一个 rb+rt 组合，否则语义混乱、屏幕阅读器无法正确朗读。
- 错误写法：
<ruby><rb>春风又绿江南岸</rb><rt>chun feng you lv jiang nan an</rt></ruby>（拼音和字数不匹配） - 正确做法：拆成多个独立
ruby，或用空格分隔的多个rb/rt对（推荐前者，语义更清晰）
<p><ruby><rb>春</rb><rt>chūn</rt></ruby><ruby><rb>风</rb><rt>fēng</rt></ruby><ruby><rb>又</rb><rt>yòu</rt></ruby>…</p>
IE 和旧版 Safari 不支持 ruby 怎么办
ruby 在 Chrome/Firefox/Edge 90+ 和 Safari 17+ 中表现稳定，但 IE 完全不支持，Safari 16 及更早版本对 rb/rt 的解析有偏差（可能忽略 rb，只显示 rt）。
- 不要用 CSS 模拟
ruby（比如position: relative+top: -1em），会导致可访问性失效、打印错位、响应式布局断裂 - 如果必须兼容 Safari 16–，可加简单降级：用
span包裹拼音并设font-size: 0.6em，再配合aria-label提供语音支持 - 更稳妥的做法是服务端预渲染 fallback（例如输出两套 DOM：有
ruby的现代版 + 纯文本拼音版），用@supports (display: ruby)控制显示
用 JavaScript 动态加拼音容易踩的坑
有人想用 JS 自动给 p.classic-poem 里的文字加拼音，这看似省事，实则风险高：
立即学习“前端免费学习笔记（深入）”；
没有权威分词和多音字判断逻辑，
长河落日圆的「长」可能标成cháng而非zhǎng直接 innerHTML 插入
ruby标签，若原文含<或&会被转义破坏批量操作时未考虑换行、空格、标点（如「，」「。」不该加拼音，但常被误包进
rb）推荐做法：用已验证的拼音库（如
pinyin-pro）配合正则提取汉字，跳过标点与空白；对每个汉字生成完整<ruby><rb>${char}</rb><rt>${pinyin}</rt></ruby>字符串，再用element.innerHTML = ...替换（注意先 escape 非汉字内容）
拼音这件事，核心不是“能不能标”，而是“标得准不准、读得对不对”。手动校对几行关键诗句，比依赖全自动脚本更可靠。
