多音字拼音错位的根源在于HTML结构错误、CSS样式缺失及文本分词不当。必须用包裹每个汉字，显式声明ruby-align: center并兼容WebKit，统一设置line-height和font-size，并严格分离汉字与非汉字块处理。
多音字拼音标注错位，根本不是拼音标错了，而是<ruby></ruby>结构没写对、样式没压住、浏览器默认行为不一致——哪怕拼音本身完全正确，<rt></rt>照样会飘在字左边、上下偏移、甚至整行错格。
rb元素漏写导致rt完全失锚
写成<ruby>重<rt>chóng</rt></ruby>是常见错误。没有<rb></rb>包裹汉字，<rt></rt>就失去基线锚点，ruby-align: center直接失效。Safari 和旧版 Edge 中，拼音大概率贴左或垂直偏移一整行。
- 必须每个汉字都套
<rb></rb>：正确写法是<ruby><rb>重</rb><rt>chóng</rt></ruby> - 多音字如「重庆」要拆开处理：
<ruby><rb>重</rb><rt>chóng</rt><rb>庆</rb><rt>qìng</rt></ruby> - 用正则分块 +
pypinyin.lazy_pinyin()生成后，务必在插入<rt></rt>前，为每个汉字字符补上<rb></rb>标签，不能靠字符串替换偷懒
ruby-align不显式声明，Safari直接回退到start
Safari 16 及更早版本根本不实现ruby-align: center的默认值，未声明时自动回退到start，导致所有拼音左对齐；Chrome/Firefox 在text-align: right或 RTL 环境下也容易被覆盖。
- 全局 CSS 第一行必须加：
ruby { ruby-align: center; } - 兼容 Safari 15.6（macOS 12.5）建议补：
ruby { -webkit-ruby-align: center; } - 别只给某个 class 设，避免组件间样式污染；
ruby是语义化标签，应统一重置
font-size 和 line-height 不协同，ruby-align就是摆设
ruby-align: center只管水平对齐，但拼音被截断、上下错位、行距撑开——90% 出在这两个属性没配对调。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 统一设：
ruby { line-height: 1.2; }，防止继承外部段落过大行高 -
rt必须用font-size: 0.6em（不用百分比，因各浏览器缩放比例不同），再加line-height: 1防自身行高干扰 - 移动端 Safari 会忽略
ruby-position: under，只支持over（即默认上方），别白费劲试
混排文本中非汉字字符破坏结构完整性
像「第1章:Python入门(2024版)」这种文本，数字、英文、标点若也被塞进<ruby></ruby>，pypinyin.lazy_pinyin()对它们返回空列表，导致<rb></rb>和<rt></rt>数量错位，整个结构断裂。
- 用正则分块：
re.findall(r'[\u4e00-\u9fff]+|[^\u4e00-\u9fff]+', text)，把文本切为“汉字块”和“非汉字块” - 汉字块走
pypinyin逐字生成<rb><rt></rt></rb>，非汉字块原样插入，不调用lazy_pinyin() - 禁用
errors='ignore'，否则非汉字字符被静默丢弃，加剧错位
真正难的不是生成拼音，而是让每个<rb></rb>和<rt></rt>在所有浏览器里都稳稳咬合——这需要结构、样式、分词三者同步校准，漏掉任意一环，错位就藏在看似正常的渲染结果里。
