直接对 rt 加 display: none 不可靠，因屏幕阅读器可能播报空内容、浏览器基线错乱、移动端样式失效；应改用 visibility 隐藏整组 ruby 或服务端条件渲染。
ruby 标签本身没有内置的「隐藏/显示」开关，浏览器不会因 class、hidden 属性或 CSS display: none 的局部应用而选择性隐藏注音却保留基字——它要么整体渲染，要么（在不支持时）退化为纯文本。真要控制可见性，必须绕开原生行为，用结构或样式做干预。
为什么直接对 rt 加 display: none 不可靠
多数人第一反应是「把 rt 隐藏掉就行」，但实际会出问题：
-
rt是语义核心，设display: none后，部分屏幕阅读器仍可能尝试播报空内容，或触发「空白注音」提示 - Safari 16.4+ 和 Chrome 120+ 对
ruby内部 display 计算敏感，rt被隐藏可能导致整块ruby基线错乱，甚至基字也被轻微偏移 - 移动端 WebKit（尤其 Android 旧 WebView）可能完全忽略对
rt的样式覆盖，导致隐藏失效
用 class 控制整组 ruby 的显隐更稳妥
真正可控的方式，是把显隐逻辑放在 ruby 容器层级，并配合预设 CSS 规则：
- 给需要动态控制的
ruby加统一 class，例如ruby--toggle - 在 CSS 中写：
ruby.ruby--toggle { visibility: hidden; }<br>ruby.ruby--toggle rt { visibility: hidden; }——用visibility而非display，确保基字位置不变 - 若需彻底移除视觉与语义影响，JS 操作时应直接
remove()或replaceWith(textNode)，而不是仅加 class
服务端或构建时做条件渲染才是终极方案
前端 JS 切换显隐总有延迟和兼容盲区，对 SEO、邮件客户端、静态快照等场景也不友好：
- 若业务明确区分「教学模式」和「阅读模式」，建议服务端根据用户角色或 URL 参数，直接输出不同 HTML：
— 教学页：完整ruby+rt+rp
— 阅读页：只输出纯文本，或用span包裹基字并跳过所有注音标签 - 构建工具（如 Vite 插件、Webpack loader）可扫描 HTML 中的
data-ruby="off"属性，自动剥离rt和rp，比运行时 JS 更干净 - 切记：不要在 SSR 输出中留空
rt（如<rt></rt>），这会让屏幕阅读器读作「空白」
最易被忽略的一点：iOS Safari 在快速滚动时，ruby 的重绘偶尔会短暂闪现未对齐状态；如果页面有大量注音且需频繁切换显示，优先考虑服务端降级而非前端 toggle。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
