ruby标签必须包含rt才能显示注音，仅写<ruby>汉</ruby>无效；rt必须是ruby的直接子元素且需配合rb显式包裹基字，多字须逐字独立嵌套，rp仅用于降级括号且内容须为纯括号字符。
ruby 标签必须包含 rt 才能显示注音
只写 <ruby>汉</ruby> 是无效的——浏览器把它当普通内联容器，拼音根本不会出现。<rt> 是唯一被识别为“注音内容”的子元素，缺它就等于没写注音。常见错误包括：<ruby>汉</ruby><rt>hàn</rt>（<rt> 脱离父容器）、或把 <rt> 套在 <rb> 外面。正确结构必须是 <ruby><rb>汉</rb><rt>hàn</rt></ruby>，且 <rt> 必须是 <ruby> 的**直接子元素**。
rb 标签不能省略，否则 Safari 和 WebView 易错位
虽然部分旧文档说 <rb> 可选，但现代 Safari 16.4+、Android WebView、以及多数 Chromium 新版本都要求显式声明 <rb>，否则会把拼音贴到字右侧、压字、甚至整段不渲染。原因在于：没有 <rb>，浏览器无法准确定位基字语义锚点，<rt> 就失去对齐依据。多字场景下尤其明显：<ruby>汉字<rt>hàn zì</rt></ruby> 表面出效果，但实际是靠浏览器“猜”，结果不可控。必须拆成：<ruby><rb>汉</rb><rt>hàn</rt></ruby><ruby><rb>字</rb><rt>zì</rt></ruby>。
rp 标签位置和内容有硬约束，Chrome 和 Safari 渲染不一致
<rp> 不是装饰，它的作用是在 IE10 或老旧邮件客户端等不支持 <ruby> 的环境里显示括号包裹的降级文本（如“汉(hàn)”）。但它必须严格嵌套在 <rt> 内部，且内容只能是纯括号字符：<rt><rp>(</rp>hàn<rp>)</rp></rt>。任何空格、换行、字母都会导致 fallback 失效。更关键的是：Chrome 120+ 默认渲染 <rp>，结果变成“汉(hàn)”，而 Safari 隐藏它，只显示上方小字“hàn”。上线前必须实测。最稳做法是服务端根据 UA 判断是否为 Blink/WebKit 内核，直接移除 <rp>；次选用 CSS 强制隐藏：ruby rt rp { display: none !important; }。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
rt 样式不能依赖百分比缩放，固定像素 + line-height 才可靠
给 <rt> 设 font-size: 70% 看似合理，但不同浏览器计算基准不同（有的按 <ruby>，有的按根字体），容易导致偏高、截断或与基字错位。推荐用固定像素：rt { font-size: 12px; line-height: 1; vertical-align: text-top; }。同时要控制 <ruby> 自身的 line-height（建议设为 1.2），避免整行被撑开。别用 position: absolute 或 margin-top 微调——字体切换、缩放、换设备时极易失准。真正可靠的对齐方式是启用标准属性：ruby { ruby-position: over; } 和 rt { ruby-align: center; }。
立即学习“前端免费学习笔记（深入）”；
