多音字词语必须逐字拆解标注，不能整体标注；HTML ruby 标签仅支持 rb 与紧随其后的 rt 一对一绑定，否则导致拼音错位、换行断裂、屏幕阅读器朗读错误。

多音字词语不能“整体标注”，必须逐字拆解

HTML 的 ruby 标签不支持“一个 rt 对应多个汉字”的语义映射——所谓“整体标注”是常见误解，强行这么做会导致拼音错位、换行断裂、屏幕阅读器朗读错乱。浏览器只保证「每个 rb 与紧随其后的 rt」形成一对一绑定，这是渲染和无障碍访问的底层逻辑。

为什么重庆chóng qìng会出问题

这种写法看似省事，实际踩中三个硬伤：

• 视觉上：拼音 chóng qìng 会整体浮在“重庆”两字正上方，无法对齐单个字，尤其在窄屏或字号缩放时明显偏移
• 换行时：“重”在行尾、“庆”被挤到下一行，但拼音仍固守第一行顶部，彻底脱节
• 语义上：语音合成器（如 VoiceOver、NVDA）无法判断 chóng 属于“重”、qìng 属于“庆”，可能连读为 /tʂʰʊŋ tɕʰiŋ/ 或跳过第二个音

正确做法：用 rb 显式包裹每个字，rt 紧跟其后

以“重庆”为例，必须写成：

<ruby><rb>重</rb><rt>chóng</rt><rb>庆</rb><rt>qìng</rt></ruby>

关键点：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• rb 不可省略——Safari 和旧 Edge 依赖它计算基线，没 rb 就没有对齐锚点
• rt 必须紧贴对应 rb 后面，中间不能有空格、换行或其它标签
• 多音字由人工根据上下文确定，比如“重”在“重要”中读 zhòng，不能塞进 chóng/zhòng
• 若需保留多音提示（如教学场景），用 data-pinyin 备用：重，不破坏主结构

动态生成时最容易漏掉的细节

用 pypinyin 或 pinyin-pro 生成时，别直接拼字符串。要确保：

• 输入字符串按 Unicode 码点逐字符遍历，不是按字节数或视觉长度（避开 emoji、组合字符陷阱）
• 对每个汉字调用 lazy_pinyin(char, tone=...)，拿到单字拼音数组再一一配对
• 非汉字字符（数字、英文字母、标点）原样保留，不套 ruby，否则 rb/rt 数量错位
• 禁用 errors='ignore'，否则遇到生僻字返回空，导致 rt 缺失

真正难的不是生成结构，而是守住「字—音—rb—rt」四者严格等长这一条线；一旦断开，所有样式和可访问性就全盘失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！