多音字必须逐字拆分为独立+对，禁止共用；因W3C要求严格一对一绑定，否则语义断裂、屏幕阅读器跳过、浏览器渲染不可控且无法CSS精细控制。
多音字必须拆成独立 <rb></rb> + <rt></rt> 对，不能共用一个 <rt></rt>，否则语义断裂、屏幕阅读器跳过注音。
为什么<ruby>重<rt>chóng/zhòng</rt></ruby>是错的
这种写法把两个读音塞进同一个 <rt></rt>，浏览器无法判断哪个音对应哪个语境，语音合成器会朗读为“chóng/zhòng”，失去注音意义；更严重的是，W3C 规范要求 <rt></rt> 必须与单个基字（即 <rb></rb>）严格一对一绑定，结构不合规会导致 Safari 和旧版 Chrome 完全忽略注音。
- 语义失效：辅助技术（如 VoiceOver、NVDA）只识别标准
<rb></rb>–<rt></rt>对，混排拼音会被跳过 - 渲染不可控：不同浏览器对斜杠分隔的拼音解析方式不一，有的截断、有的重叠、有的直接不显示
- 无法 CSS 精确控制：比如想给“zhòng”标红、“chóng”标蓝，但共用
<rt></rt>就没法加 class 区分
<rb></rb> 不能省，哪怕单字也要包
写成 <ruby>重<rt>chóng</rt></ruby> 看似简洁，但在 Safari 16 及更早版本、部分 iOS WebView 中，<rt></rt> 会失去基线锚点，导致拼音左飘、右偏甚至垂直错位一整行——因为浏览器只有在 <rb></rb> 明确包裹基字后，才能计算宽度和基线位置，进而居中对齐 <rt></rt>。
- 正确写法：
<ruby><rb>重</rb><rt>chóng</rt></ruby>（单字也必须套<rb></rb>） - 多音并列时：
<ruby><rb>重</rb><rt>chóng</rt><rb>重</rb><rt>zhòng</rt></ruby> - Vue/React 中注意：
<rt></rt>必须是<ruby></ruby>的**直接子节点**，中间不能插<fragment></fragment>或空格，否则结构断裂
动态生成时最容易漏掉的三件事
用 pypinyin 或前端框架批量生成注音 HTML 时，90% 的问题出在结构松散或字符归一化缺失，不是拼音算错了，而是标签没对齐。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 非汉字字符（数字、英文、标点）必须原样保留，且不能被
<rb></rb>包裹——用正则切块：re.findall(r'[\u4e00-\u9fff]+|[^\u4e00-\u9fff]+', text)，只对汉字块调lazy_pinyin() - 每个汉字字符都得走一遍
<rb>字</rb><rt>音</rt>，不能靠字符串替换偷懒，否则 emoji 或组合字符（如「ā」）会导致索引错位 - 必须显式设
ruby { ruby-align: center; }，Safari 16 及更早版本不实现默认居中，不声明就会左贴字，尤其在窄容器里特别明显
轻声、儿化、变调怎么标才靠谱
ruby 不处理语义，只呈现。所有“音变”必须由人工或上下文词典确定后，再填进 <rt></rt>，不能指望自动规则。
- 轻声不标调号：如“妈妈”标为
<rb>妈</rb><rt>mā</rt><rb>妈</rb><rt>ma</rt>（第二个ma无声调） - 儿化音只加
r，不标“儿”字音节：如“花儿”是<rb>花</rb><rt>huār</rt>，不是huā ér - 多音字必须按上下文选：如“重庆”的“重”读
chóng，“重要”的“重”读zhòng，不能共用一套拼音输出
最常被忽略的其实是 <rb></rb> 的强制存在性和 ruby-align 的显式声明——这两项不落实，再多的拼音数据也白搭，注音要么看不见，要么读不准。
