ruby 注音必须配 rt 才生效，单独 ruby 无效；多字需逐字包裹，rt 必须紧贴被注字且不可用 span 替代；rp 需成对紧邻 rt 以兼容旧浏览器；拼音须用半角小写 unicode 声调，禁用中文标点与空格；line-height 等属性会破坏排版。
ruby 必须配 rt，否则注音不生效
单独写 <ruby>汉</ruby> 看起来结构完整，实际完全无效——浏览器既不渲染拼音，也不暴露给屏幕阅读器。<rt></rt> 不是可选装饰，而是语义必需的子元素。漏掉它，等于没写注音。
常见错误包括：把拼音直接塞进 <ruby></ruby> 里、用 <span></span> 替代 <rt></rt>、或在 <ruby></ruby> 外面另起一行写拼音。这些写法在任何现代浏览器中都不会触发注音排版逻辑。
-
<ruby>汉<rt>hàn</rt></ruby>是最小合法单元，缺一不可 - 多字必须逐字拆开：
<ruby>北<rt>běi</rt></ruby><ruby>京<rt>jīng</rt></ruby>，不能写成<ruby>北京<rt>běi jīng</rt></ruby> -
<rt></rt>必须紧贴被注音字之后，中间不能有空格、换行或块级标签（如<p></p>）
rp 不是摆设，是旧浏览器 fallback 的开关
<rp></rp> 的作用非常具体：在不支持 <ruby></ruby> 的环境（如 IE8–、Android 4.3 WebView、部分定制内核）中，让拼音至少能以括号形式可读。没有它，那些浏览器会直接丢弃 <rt></rt>，只留下裸汉字，或者把拼音堆在后面变成「你好nǐ hǎo」这种混乱格式。
标准写法必须成对出现，且推荐紧邻 <rt></rt>：<ruby>汉<rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>。现代浏览器会自动隐藏 <rp></rp> 内容，只显示拼音；老浏览器则渲染为「汉(hàn)」。
-
<rp></rp>必须严格成对，顺序不能颠倒（左括号在前，右括号在后） - 括号不限于
( )，也可用【】或〔〕，但前后必须一致 - 若项目明确不需兼容 Android 4.x 或 IE，可省略
<rp></rp>，但不要误以为它是“可有可无的样式辅助”
拼音输入要守规矩，不然排版会错位
拼音不是自由文本——浏览器对 <rt></rt> 的排版依赖纯 ASCII 字符流。混入全角空格、中文标点、大写字母或未转义引号，轻则导致拼音挤出基字范围，重则整个 <rt></rt> 被截断或忽略。
Safari 尤其敏感：换行、缩进、多余空格都可能引发横排时拼音偏左/偏右，竖排时错位到行外。Chrome 和 Firefox 相对宽容，但不意味着可以随意写。
- 拼音必须用半角小写字母，声调优先用 Unicode 符号（如
zhōng），避免数字标调（如zhong1）——后者需额外 CSS 对齐，且移动端字体支持不稳定 - 禁用中文逗号、顿号、空格分隔多音节；多个字的拼音应各自独立包裹，不拼接
- 动态生成时（如 Ruby/Python 模板），注意字符串转义：单引号拼音（如
d'après）需处理引号冲突
别碰 line-height 和 vertical-align，那是排版雷区
浏览器对 <ruby></ruby> 的注音位置（横排居中上标、竖排右对齐）是硬编码实现的，不是 CSS 可控的常规 inline 元素。强行设置 line-height、vertical-align、transform 或 display: inline-flex，会导致不同浏览器偏移方向不一致：Chrome 往上飘，Safari 往右滑，Firefox 可能截断。
想调整拼音大小或颜色？可以，但仅限安全属性：font-size（用 em 或 rem）、color、letter-spacing。其他一律保持默认。
- 不要给
<ruby></ruby>或<rt></rt>设font-size: 70%—— 百分比值在不同浏览器中基准不同，极易错位 - 避免用
margin或padding推挤注音位置，基字与拼音的间距由浏览器内置逻辑控制 - 竖排场景下，Safari 存在已知
<rt></rt>错位 bug，目前无通用 CSS 修复方案，只能靠逐字<ruby></ruby>+ 严格单行书写规避
<ruby></ruby>」和「<rp></rp> 成对紧邻 <rt></rt>」这两条。前者影响换行与缩放稳定性，后者决定旧环境是否还能读得懂。其他问题大多能靠校验工具或简单预览发现，唯独这两处，往往上线后才在特定设备上暴露。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
