ruby标签在汉字听写网页中仅支持静态注音，必须严格使用rb+rt结构，否则导致浏览器渲染异常、拼音错位及tts失效；动态交互需改用aria-label等替代方案。
ruby 标签在汉字听写网页中不能直接用于动态交互或语音反馈，它只负责静态语义化注音；强行套用会导致拼音错位、TTS 朗读混乱、移动端换行断裂——核心问题在于结构误用和样式失控。
ruby 必须配 rb + rt 才能被浏览器识别为注音
很多听写页直接写 <ruby>汉<rt>hàn</rt></ruby>，结果 Safari 不渲染、Firefox 拼音贴底、Edge 完全忽略。这是因为现代浏览器（Chrome 115+、Safari 17.4+）已不再容忍缺失 rb 的“简写”结构。
-
rb必须显式包裹每个被注音汉字，不能省略，也不能用纯文本替代基字 -
rt必须紧跟对应rb，顺序颠倒或数量不等会直接导致错位（比如拼音跑到前一个字上） - 多字必须分层：正确是
<ruby><rb>听</rb><rt>tīng</rt></ruby><ruby><rb>写</rb><rt>xiě</rt></ruby>，错误是<ruby>听写<rt>tīng xiě</rt></ruby> - 若用 JS 动态生成，确保
rt是ruby的**直接子元素**，嵌套在span或div里会切断语义
听写场景下 ruby 的 CSS 必须重置，不能依赖默认
默认 rt 在 Chrome 中是小号灰色上标，在 Safari 中可能不缩放、不居中、垂直偏移异常——这对需要逐字校对的听写页是致命缺陷。
- 必须设
ruby rt { font-size: 0.65em; line-height: 1; text-align: center; }，否则不同字体下拼音高度浮动 - 加
ruby { display: ruby; }强制 Safari/WebKit 正确识别容器（Firefox/Chrome 也兼容） - 禁用
position: absolute或margin-top微调——缩放或换字体后立即错位 - 父容器设
white-space: nowrap防止拼音在窄屏中断行，破坏“字-音”对应关系
听写页真正需要的不是 ruby，而是可验证、可聚焦、可语音驱动的结构
ruby 本身不支持点击高亮、不触发 focus、不响应键盘操作，也无法让屏幕阅读器按字朗读拼音——这些才是听写功能的核心需求。
- 若需点击显示拼音，用
span+aria-label更可靠：<span aria-label="tīng">听</span>，配合 JS 控制显隐 - 若需 TTS 精准朗读单字读音，
ruby在多数读屏软件中会被跳过；改用span role="text" aria-roledescription="pinyin"显式声明 - 自动生成拼音时，优先用
pinyin-pro输出带 class 的结构，再套 CSS，避免手写漏掉rb或错位 - 测试时务必在 Safari iOS 17+ 和 Chrome Android 上真机验证：连续多个
ruby在小屏下是否挤成一行、拼音是否被截断
最易被忽略的是：听写页往往要支持“显示/隐藏拼音”切换，而 ruby 的 rt 一旦设 display: none，降级环境（如邮件客户端、旧 WebView）里拼音就彻底消失，只剩光秃秃的汉字——此时 rp 括号兜底机制反而成了关键保底手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
