必须用 rb+rt 成对结构，多字需分 ruby；rt 用固定像素字号、ruby-position: over、line-height: 1；禁用 display/position/vertical-align；兼容需 rp 包裹括号；极简即拒绝破坏性妥协。
直接用 ruby 标签加拼音，不套框架、不写 JS，就能在极简风网页里干净呈现注音——前提是结构合法、CSS 极简且不破坏语义流。
必须写全 rb + rt，不能省略 rb
很多人以为 <ruby>汉<rt>hàn</rt></ruby> 能跑通，实际多数浏览器会忽略整个 rt，或把拼音平铺在汉字后面。浏览器只认 rb（base text）和 rt（ruby text）成对出现的结构。
-
rb必须包裹每个被注音字，不可用普通文本替代； - 多字必须拆开：用两个
<ruby><rb>中</rb><rt>zhōng</rt></ruby><ruby><rb>国</rb><rt>guó</rt></ruby>，而非一个ruby套两个rb； - 漏掉
rb或顺序颠倒（如rt在rb前），会导致拼音错位甚至整段失效。
rt 的样式控制要绕过 font-size 百分比
给 rt 设 font-size: 70% 看似合理，但不同浏览器对 rt 的默认字号基线计算不一致，容易导致上下偏移或被截断。极简风追求稳定排版，就得放弃“相对缩放”思路。
- 统一用固定像素值：
rt { font-size: 12px; }； - 配合
ruby { ruby-position: over; }显式声明位置，避免竖排时跑到右侧； - 设
line-height: 1防止rt内部额外留白； - 禁用
vertical-align，它会干扰浏览器内置排版逻辑。
极简页面里别碰 display: inline-block 和 position: absolute
极简风常靠纯流式布局撑起结构，而 ruby 天然是内联元素。一旦给它加 display: inline-block 或 position: absolute，就会切断与基字的定位关系，拼音飘走、屏幕阅读器读不出语义，降级后还可能直接消失。
立即学习“前端免费学习笔记（深入）”；
-
ruby容器外层可加white-space: nowrap防止换行撕裂字-音对应； - 需要整体居中？用父容器
text-align: center，别动ruby自身 display； - 想微调间距？用
gap（如果父容器是 flex）或margin-inline-end，别用margin-right混淆方向语义； - 绝对定位、浮动、
visibility: hidden这三类 CSS 对ruby是硬伤，极简 ≠ 少写代码，而是少写破坏性代码。
兼容老环境时，rp 不是可选项，是必选项
像 Outlook Desktop、旧版 Safari、Android 4.3 WebView 这类环境，会直接忽略 rt 标签，但里面的文字仍作为普通文本渲染。没 rp 包裹的话，“汉hàn”就变成连在一起的乱码，可读性归零。
- 写法必须是：
<ruby><rb>汉</rb><rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>； -
rp只能含括号字符，不能有空格或文字，否则部分读屏工具会误读； - 服务端渲染时若拼音为空，宁可不输出整组
ruby，也别留空<rt></rt>——TTS 会念出“空白注音”。
最易被忽略的点：极简不是删东西，而是拒绝所有“看起来差不多”的妥协。一个没 rb 的 ruby，一段用 % 控制 rt 字号的 CSS，一次随手加的 position: absolute，都会让注音在某个设备上突然错位或失声——而这恰恰是极简风最不能容忍的失控。
