老站重构时,ruby 注音的渲染散落在各浏览器的默认样式里,同一页码在不同终端字号飘忽、行高错乱。重构阶段需要一份显式的标准化定义,把默认值全部接管过来。

字号
rt { font-size: 0.65em; }
用 em 而不是固定像素,注音随正文缩放。0.65 到 0.7 之间阅读舒适度较好,低于 0.5 小屏上难以辨认。
行高
ruby { line-height: 1; }
rt { line-height: 1.2; }
ruby 默认行高会把整行撑高,段落的行距被注音行带乱。收紧 ruby 自身的行高,正文节奏才能保持。
位置
ruby { ruby-position: over; }
横排中文注音固定在上方。竖排场景另算,混排文档不要依赖默认值。
结构与语义
多字注音拆成独立的 ruby 单元,一个词一个,对齐与换行都更可控。rp 括号只放标点,嵌在 rt 外侧。多语言混排时给 ruby 标 lang,混排方向异常的段落用 bdi 隔离,读屏工具的发音依赖这两处信息。
验收清单
- 双端抽查注音字号与正文比例。
- 含注音段落的行距与纯文本段落一致。
- 长注音换行不断字。
- 读屏抽听一条注音。
