Ruby标签本身不支持隐藏/显示拼音的交互控制，需通过CSS（如visibility: hidden）控制rt显隐，并用JavaScript切换类名实现点击切换，同时注意浏览器兼容性与无障碍访问。
ruby 标签本身不支持隐藏/显示拼音的交互控制
HTML 的 ruby 是纯语义化标签，用于标注汉字读音（如拼音），浏览器默认渲染为小号拼音在文字上方，但它没有内置的“开关”机制。想实现「点击显示/隐藏拼音」，必须靠 CSS 控制显隐 + JavaScript 绑定交互逻辑。
用 CSS 的 display 或 visibility 控制 ruby 内容可见性
最直接的方式是给 rt（拼音容器）加类，再用 CSS 切换显示状态。注意：display: none 会彻底移除布局空间，visibility: hidden 保留占位但不可见——后者更符合「隐藏拼音但不扰动排版」的需求。
示例：
<style>
.ruby-hidden rt { visibility: hidden; }
.ruby-hidden rt::before { content: ""; } /* 防某些 UA 仍透出 */
</style>
<p><ruby class="ruby-hidden">
<rb>汉</rb><rt>hàn</rt>
</ruby>关键点：
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
ruby-hidden类需作用于ruby元素本身，才能批量控制其内部所有rt - 避免只对
rt单独设类——多音字或复杂注音时维护成本高 - 部分旧版 Safari 对
visibility在rt上的支持不稳定，可降级用opacity: 0+pointer-events: none
用 JavaScript 切换类名实现点击切换
绑定点击事件到 ruby 或独立按钮，切换控制类即可。别直接操作 style.display——破坏 CSS 可维护性。
示例（简洁版）：
<ruby onclick="this.classList.toggle('ruby-hidden')">
<rb>字</rb><rt>zì</rt>
</ruby>注意事项：
- 如果页面有多个
ruby，需避免全局切换，建议用document.querySelectorAll('ruby')分别绑定 - 移动端要考虑
touchstart替代click防止延迟 - 不要用
innerHTML动态插入带ruby的 HTML——部分浏览器会丢弃rt节点
兼容性与语义陷阱要提前防住
IE 完全不支持 ruby，Edge 12+ 才开始支持；即使现代浏览器，屏幕阅读器对 ruby 的朗读行为也不统一（有的读汉字+拼音，有的只读汉字）。所以：
- 若拼音是辅助信息而非核心内容，确保关闭后用户仍能理解上下文
- 别把关键提示（如生僻字释义）只塞进
rt里——它可能被忽略或无法访问 - 测试时打开系统朗读功能，确认切换后语音输出是否符合预期
真正难的不是加个 class，而是让隐藏/显示行为在各种设备、辅助工具、缩放比例下都保持自然——这点常被跳过。
