ruby是唯一原生支持拼音标注的HTML标签，必须包含rt才能显示拼音；rb可选，rp用于老浏览器降级为“汉(hàn)”；多字须逐字包裹，禁用全角空格，需统一rt样式确保跨浏览器一致。
ruby 是唯一原生支持拼音标注的 HTML 标签，不用 JS、不靠 CSS 模拟就能让拼音浮在汉字上方——但结构错一点，就直接退化成平铺文本。
ruby 标签必须包含 rt 才能显示拼音
rt 是注音内容的唯一载体，没它就等于没标注。浏览器只识别 <ruby>汉<rt>hàn</rt></ruby> 这种写法；漏掉 rt、或把 rt 放在 ruby 外面，拼音根本不会上浮。
-
rb是可选的：现代写法常省略，直接写<ruby>汉<rt>hàn</rt></ruby>更简洁，语义和渲染效果一致 -
rp不是摆设：老浏览器（如 IE9 或旧安卓 WebView）不识别ruby，会把rt当普通文本渲染。加上<rp>(</rp><rt>hàn</rt><rp>)</rp>，就能降级为「汉(hàn)」，阅读不中断 - 别用空格或换行分隔多个字：写成
<ruby>你好<rt>nǐ hǎo</rt></ruby>会导致拼音整体浮在两个字上方，视觉错位且语义错误
多字必须逐字包裹 ruby，不能合并
一个 ruby 元素默认对应一个注音单元。中文讲究“一字一音”，尤其是多音字（如「长」「行」「重」），合并处理必然出错。
- 错误示例：
<ruby>长度<rt>cháng dù</rt></ruby>—— 浏览器无法拆分「长度」，拼音会整体上浮、对不齐 - 正确做法：每个字独立
ruby，<ruby>长<rt>cháng</rt></ruby><ruby>度<rt>dù</rt></ruby> - 遇到「一会儿」「巧克力」这类词，也要按 Unicode 字符拆分（用
Array.from('一会儿')，别用.split('')），否则组合字符或 emoji 可能导致数量错位
真实文本混排时怎么保留数字、英文和标点？
实际内容从来不是纯汉字。「第1章：Python入门（2024版）」里只有「第」「章」「入」「门」需要拼音，其余字符必须原样保留，且不能破坏 ruby 结构。
立即学习“前端免费学习笔记（深入）”；
- 用正则切块：
re.findall(r'[\u4e00-\u9fff]+|[^\u4e00-\u9fff]+', text)，把文本分成「汉字块」和「非汉字块」分别处理 - 汉字块走
pypinyin.lazy_pinyin()，逐字生成拼音；非汉字块直接插入，避免对数字或英文调用拼音函数（它会返回空列表，引发索引错误） - 拼音内禁用全角空格、中文括号、顿号等——
<rt>nǐ hǎo</rt>可以，<rt>nǐ hǎo</rt>（全角空格）会导致排版偏移
Chrome/Firefox/Safari 渲染差异怎么统一？
各浏览器对 rt 的默认缩放比例不同：Safari 约 50%，Chrome 约 60%，Firefox 则依赖父级 font-size 继承。更麻烦的是，若父容器设了 line-height: 1，rt 常被顶部裁切。
- 强制统一样式：
<rt style="font-size: 0.6em; line-height: 1.2;">hàn</rt>，别依赖外部 CSS 类，富文本场景容易冲突 - 移动端 Safari 忽略
ruby-position: under，只支持over（即默认上方），无需额外设置 - 加
white-space: nowrap到包裹容器，防止换行打断「字—音」对应关系 - IE 完全不支持
ruby，fallback 方案只能是「汉(cháng)」这类括号写法，无法模拟上标效果
最易忽略的其实是声调字符的字体支持——ā、ě 等 Unicode 声调符必须由页面所用字体覆盖，否则可能显示为空心方块或 fallback 到系统默认字体，破坏一致性。
