ruby标签无美学功能，仅负责语义与基础排版；必须显式使用rb和rt成对包裹、紧邻同级，禁用百分比字号、rp需成对嵌入rt内，方能保障跨浏览器及无障碍兼容。
ruby 标签本身不提供“美学”，它只负责语义和基础排版逻辑；所谓“好看”全靠结构合规 + CSS 精准干预，否则 Safari 错位、Firefox 截断、Chrome 换行脱节是常态。
ruby 必须带 rb 和 rt 才能被现代浏览器识别
写成 <ruby>汉</ruby><rt>hàn</rt> 或 <ruby>汉<rt>hàn</rt></ruby> 都会失效——前者 rt 脱离父容器，后者缺 rb 导致基字语义丢失。Safari 16.4+、Chrome 115+、Firefox 115+ 已明确要求 rb 显式包裹被注音字。
-
rb是锚点，rt是注音，二者必须一一对应、紧邻、同级 - 多字必须拆开：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>，不能合并为一个rb - 空格、换行、注释都会打断匹配，
<rb>汉</rb> <rt>hàn</rt>中间那个空格就足以让 Firefox 忽略注音
rt 字体大小别用百分比，固定像素最稳
font-size: 70% 在 Safari 里可能缩到看不见，在 Chrome 里又偏大压字，根源是各引擎对 rt 的默认字号继承逻辑不一致。用百分比等于把排版交给浏览器猜。
- 给
ruby设font-size: 1em重置基准 - 单独设
rt { font-size: 12px; line-height: 1; }，避免上下留白失控 - 配合
ruby { line-height: 1.8; }防止拼音贴底或与下一行文字重叠 - 禁用
vertical-align，浏览器内置的 ruby 对齐已足够精准
连续多个 ruby 在 iOS Safari 上有微小间距异常
不是 bug，是 Safari 对连续 inline 元素的 baseline 渲染策略导致的视觉错位，尤其在小字号或细字体下明显。不加干预时，“重庆”两个字的拼音看起来左右不对齐。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 父容器加
font-size: 0;，再给每个ruby单独设font-size: 16px; - 或统一用
white-space: nowrap;包裹整组，防止断行撕裂字-音关系 - 别用
display: inline-flex强行对齐——它会切断屏幕阅读器对rb/rt的语义识别 - 如果项目需导出 PDF（如 wkhtmltopdf），
rt几乎必然消失，得提前准备降级文案
rp 不是装饰，是降级时的可读性底线
没 rp 的 ruby 在 Outlook Desktop、旧版安卓 WebView、部分邮件客户端里会变成“汉hàn”平铺，用户根本分不清哪是字哪是音。这不是视觉问题，是信息结构崩溃。
-
rp必须成对、必须嵌在rt内部：<rt><rp>(</rp>hàn<rp>)</rp></rt> -
rp内容只能是(、)、[、]，多一个空格或字母，fallback 就失效 - Chrome 会渲染括号（可见），Safari 默认隐藏，生产环境建议加
rp { display: none; }统一行为 - 服务端若拼音为空，跳过整个
rt，别输出<rt></rt>——屏幕阅读器可能读作“空白注音”
真正难的不是写对标签，而是让同一段 HTML 在 Safari 的 baseline、Firefox 的 line-height、Chrome 的缩放逻辑、Outlook 的降级渲染、以及屏幕阅读器的语义解析中，全都保持字音不脱节、不误读、不丢信息。结构松一毫，样式就偏一分，兼容性就掉一档。
