ruby 标签必须配合 rb 和 rt 才能正确渲染注音，rb 是语义必需的被注音字容器，rt 是对应读音，二者须一一紧邻配对；省略 rb 或错用结构会导致排版错乱、无障碍失效；rtc 支持多层注音但仅 Firefox 原生支持；尽管 W3C 标记 rb 为弃用，当前所有主流浏览器仍强制要求显式书写 rb。

ruby 必须配 rb + rt 才能生效，单独写 ruby 标签没用

浏览器不会把空的 ruby 当成注音容器，它只是个语义包装壳。真正起作用的是里面的 rb（被注音字）和 rt（拼音/读音）。没有 rb，rt 就像没靶子的箭——渲染时直接忽略或错位。

常见错误现象：

• 写了 zhōng，结果拼音跑到了段落开头或换行了
• 用 替代 rb，比如 中zhōng，拼音完全不贴合文字

正确结构只有一种核心模式：rb 和 rt 必须一一对应、紧邻出现，且都在同一层 ruby 内。

rb 不是可选标签，多字必须每个字独立套 rb

rb 是语义必需的，不是“为了规范才加”。它告诉浏览器：“这段文本是注音对象的基本单位”。省略 rb 或用一个 rb 包多个字（如 重庆zhòng qìng），会导致：

• 拼音横向压缩，声调挤在一起，zhòng qìng 可能渲染成类似“zhòngqìng”无空格形式
• 响应式缩放时，汉字和拼音字号比例失衡，小屏下拼音糊成一团
• 部分屏幕阅读器无法正确关联发音与单字，影响无障碍访问

实操建议：哪怕只是两个字，也拆开写：

<ruby><rb>重</rb><rt>zhòng</rt><rb>庆</rb><rt>qìng</rt></ruby>

这样每个 rb 和 rt 都有明确归属，排版引擎才能按字对齐。

多级注音（如汉字+拼音+英文释义）要用 rtc，不能堆 rt

想在同一行实现“上英文、中汉字、下拼音”，只靠多个 rt 会失败——浏览器只认一个 rt 为默认注音层，其余被忽略或错位。真正支持多层的是 rtc（Ruby Text Container）。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

注意：rtc 不是 rt 的复数，而是独立容器，一个 ruby 中可含多个 rtc，每个 rtc 下可放一组 rt（或 rb + rt 组合）。

典型结构示例：

<ruby><rb>中</rb><rb>国</rb><rtc><rt>China</rt></rtc><rtc><rt>zhōng guó</rt></rtc></ruby>

关键点：

• rtc 必须在 rb 之后（顺序不能颠倒）
• 目前仅 Firefox 原生支持 rtc 渲染；Chrome / Safari 会忽略 rtc，退化为仅显示第一个 rt
• 若需全浏览器兼容，得用 CSS 模拟（例如 display: inline-flex + 定位），但会丢失语义和无障碍能力

rb 已被标准标记为“不推荐使用”，但实际仍需写

W3C 文档里写着 rb “已弃用（deprecated）”，原因是理论上浏览器可自动切分 ruby 内纯文本为原子单位。但现实是：所有主流浏览器（Chrome、Firefox、Safari、Edge）至今仍要求显式写 rb，否则 rt 无法准确定位。

所以现状很明确：你得写 rb，尽管它被标黄；不写，注音就不可靠。这不是过渡期的权宜之计，而是当前事实标准。

容易被忽略的地方：

• rb 标签可以自闭合（）？不行。HTML 规范要求它必须有结束标签或至少是开始标签显式存在，否则解析失败
• rp 标签（括号 fallback）只在浏览器不支持 ruby 时显示，现代浏览器基本不用，加了反而增加 DOM 复杂度
• 如果用 JS 动态生成拼音，务必确保每个字都包裹 rb，别图省事用 textContent 直接塞进 ruby

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！