ruby标签必须配rb和rt才生效，单独<ruby>汉</ruby>无效；<ruby>汉<rt>hàn</rt></ruby>在Safari中错位因缺失rb导致基字锚点丢失；正确结构为<ruby><rb>汉</rb><rt>hàn</rt></ruby>。
ruby 标签必须配 rt 才能生效，单独写 <ruby>汉</ruby> 不会显示任何注音；现代浏览器（Chrome 110+、Firefox 115+、Safari 17+）已基本放弃对无 rb 结构的兼容，漏掉 rb 很可能直接降级为平铺文本。
为什么 <ruby>汉<rt>hàn</rt></ruby> 在 Safari 里错位？
因为 Safari（尤其 16.4+ 及 iOS 版）要求显式声明基字容器 rb，否则无法可靠匹配 rt。它不把 ruby 内的纯文本当作隐式 rb 处理，而是忽略或错位渲染。
- ✅ 正确结构：
<ruby><rb>汉</rb><rt>hàn</rt></ruby> - ❌ 错误结构：
<ruby>汉<rt>hàn</rt></ruby>（Safari 中拼音可能贴到前一个字、偏左、或不缩放） -
rb必须是ruby的直接子元素，且不能与rt之间插入空格、换行或其它标签 - 若用构建工具自动注入，注意模板引擎是否保留空白——
<rb>汉</rb><rt>hàn</rt>和<rb>汉</rb> <rt>hàn</rt>渲染结果可能不同
如何让拼音在所有浏览器里都居中、不截断？
靠默认样式不行。Chrome 和 Firefox 对 rt 的 font-size 计算逻辑不一致，Safari 更倾向保持原字号；不加控制时，常见问题包括拼音过小、上下留白过大、被父容器 overflow: hidden 截断。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须重置
rt的基础样式：rt { font-size: 0.7em; line-height: 1; text-align: center; } - 给
ruby加ruby-position: over;（而非用margin-top模拟上标），确保触发浏览器内置排版引擎 - 禁用
vertical-align: super或text-top——它们基于行高计算，易随字体变化偏移 - 父容器若设了
line-height，建议同步设ruby { line-height: 1; }，避免注音区域被撑开
多字、多音、地名怎么写才不出错？
ruby 不解析语义，也不支持上下文选音。你写什么，就渲染什么；结构松动，就错位什么。
立即学习“前端免费学习笔记（深入）”；
- 每个字必须独立包裹：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>，不能合并成一个ruby块 - “长”在“长度”和“生长”中读音不同，需手动拆开并分别指定：
<ruby><rb>长</rb><rt>cháng</rt></ruby>度vs生<ruby><rb>长</rb><rt>zhǎng</rt></ruby> - 连续多个
ruby在 iOS Safari 中可能出现微小字间距异常，可用font-size: 0父容器 + 子元素重设字号缓解 - 声调符号（如
ā á ǎ à）需手动输入或由 JS 库（如pinyin-pro）生成，ruby本身不处理变调规则
真正难的不是写对结构，而是在 CMS、邮件模板、SSR 渲染链路中保证 rb/rt 严格一一对应——一旦后端返回空拼音却仍输出 <rt></rt>，屏幕阅读器可能播报“空白注音”，这比视觉错位更隐蔽、更难排查。
