古诗词注音必须逐字拆解并人工校对读音，因浏览器不解析中文变调规则；需为每个汉字单独设置字拼音结构，标点亦须包裹，且CSS须重置ruby-align、font-size与white-space。
古诗词注释排版不能靠ruby自动识别语义，必须逐字拆解、人工校对拼音与声调，否则“一”“不”变调、“儿”化音、轻声等全会错——浏览器不解析中文朗读规则，只按你写的rt内容机械渲染。
为什么ruby直接套整句古诗会失效
常见错误是把整行诗塞进一个ruby里：<ruby>山高水长<rt>shān gāo shuǐ zhǎng</rt></ruby>。这违反两个硬性前提：
-
rb缺失：现代浏览器（Firefox 125+、Safari 17+）要求每个被注字必须显式包裹在rb中，否则rt被当普通文本平铺 - 字-音非一一对应：“山高水长”4个字，但
rt里写的是4个音节的连写字符串，浏览器无法切分定位，换行或缩放时极易脱钩 - 声调与轻声丢失：
shān gāo shuǐ zhǎng没体现“长”在此处读zhǎng（生长），更无法表达“一去二三里”中“一”读yí
正确结构：每个汉字独立ruby + 显式rb + 按口语习惯写rt
以王之涣《登鹳雀楼》首句“白日依山尽”为例，必须拆成5个独立ruby块：
<ruby><rb>白</rb><rt>bái</rt></ruby> <ruby><rb>日</rb><rt>rì</rt></ruby> <ruby><rb>依</rb><rt>yī</rt></ruby> <ruby><rb>山</rb><rt>shān</rt></ruby> <ruby><rb>尽</rb><rt>jìn</rt></ruby>
-
rb不可省：哪怕单字也必须<rb>白</rb>，否则 Safari 中拼音左贴、Firefox 中完全不渲染 -
rt内容要带声调、空格、按实际读音写：如“一”在“一行白鹭”中读yì，不是yī；“了”在句尾读le（轻声），不是liǎo - 标点符号也要进
rb：句号、顿号、问号等全角符号需原样包裹，否则rb/rt数量错位，整行注音链断裂
CSS 必须重置的三项关键样式
默认渲染下，Chrome 的rt缩到 60%，Safari 缩到 50%，Firefox 则继承父级字号——不统一就错位。以下三行是底线配置：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
ruby { ruby-align: center; -webkit-ruby-align: center; line-height: 1.3; }
rt { font-size: 0.65em; line-height: 1; }
ruby { white-space: nowrap; }
-
ruby-align: center必须显式声明：Safari 16 及更早版本默认为start，不写就左对齐 -
line-height: 1.3设在ruby上：防止父容器line-height: 2撑开注音间距；rt自身line-height: 1避免内部行高干扰居中 -
white-space: nowrap禁用换行：古诗常窄列排版，不加这个，ruby可能在字和拼音之间断行
动态生成时最易忽略的三个细节
用pypinyin或pinyin-pro自动生成 HTML，结构对了也不代表能用：
- 非汉字字符必须保留并包裹：
“白日依山尽。”里的句号。要进rb，不能跳过，否则rb数比rt多 1 个，后续所有拼音偏移 - 多音字必须人工干预：
pypinyin.lazy_pinyin("长")默认返回['cháng']，但“山高水长”的“长”得手动替换成zhǎng - 组合字符要归一化：
ā（带声调的 a）是单个 Unicode 字符，但部分拼音库会误判为 ASCII + 装饰符，导致遍历时索引错位
真正麻烦的从来不是写对标签，而是确认每个字在具体诗句中的实际读音——ruby只是画布，笔还在你手上。
