HTML中使用ruby标签和CSS实现高兼容拼音标注-html教程-PHP中文网

ruby标签必须显式包含rb和rt，缺一不可；rb提供基线锚点，缺失则ruby-align失效；多字须逐字拆分并一一对应；css需协同设置ruby-align: center、line-height: 1.2及rt font-size: 0.6em；rp必须成对出现以保障旧环境降级可读。

html中使用ruby标签和css实现高兼容拼音标注

ruby标签必须显式包含`rb`和`rt`，缺一不可

写成<ruby>汉<rt>hàn</rt></ruby>在 Safari 15–16、旧版 Edge 或部分安卓 WebView 中会失效——rt失去基线锚点，拼音可能左贴、右飘甚至垂直错位一整行。浏览器只有通过rb明确识别“被注字”，才能计算宽度与基线，进而让ruby-align生效。

必须为每个汉字单独包裹rb，即使单字也不省略：

<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby> ✅
<ruby>重庆<rt>chóng qìng</rt></ruby> ❌（语义不清，排版失控）
<ruby><rb>苹</rb><rb>果</rb><rt>píng</rt><rt>guǒ</rt></ruby> ✅（一一对应）

CSS必须协同设置`font-size`、`line-height`和`ruby-align`

只设ruby-align: center没用。Safari 16 及更早版本不实现默认值，Chrome/Firefox 在 RTL 或 text-align: right 下也会被覆盖；而没配font-size和line-height，ruby-align就只是摆设——拼音会被挤压、截断或上下偏移。

最小可行 CSS 规则：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

ruby { ruby-align: center; -webkit-ruby-align: center; line-height: 1.2; }
rt { font-size: 0.6em; line-height: 1; white-space: nowrap; }
避免在ruby上设overflow: hidden或过小line-height，否则拼音被裁切

兼容旧环境必须加`rp`，且成对出现

IE 8–11、Android 4.3 WebView、Outlook Desktop 等完全不解析ruby，但会把rt当普通文本渲染出来，导致“汉hàn”连排难读。rp不是装饰，是降级兜底的关键：它让不支持的环境显示“汉(hàn)”，而非裸露拼音。

正确写法必须成对、紧邻rt：

<ruby><rb>汉</rb><rp>(</rp><rt>hàn</rt><rp>)</rp></ruby> ✅（现代浏览器隐藏rp，只显拼音；旧环境显示括号包裹）
<ruby><rb>汉</rb><rt>hàn</rt></ruby> ❌（旧环境无括号，可读性崩坏）
不要只加一个<rp>(</rp>或漏掉闭合，否则 DOM 结构异常，影响 JS 操作

批量生成时别信“自动拆字”，要归一化+同步遍历

ruby不解析汉字，所有rt都得人工或脚本填。用 Python 的 pypinyin 或 JS 的 pinyin-pro 生成时，常见坑是：未处理组合字符（如“妳”“﨑”）、未归一化全角/半角空格、拼音数组未按字索引对齐rb。

安全做法：

先用 Unicode 归一化（unicodedata.normalize('NFC', text)）确保字形统一
逐字遍历字符串，对每个字符调用拼音库，再一对一生成<rb>${char}</rb><rt>${pinyin}</rt>
禁用CGI.escapeHTML或DOMPurify.sanitize直接处理含ruby的字符串——会转义破坏结构

真正麻烦的从来不是写对一行<ruby><rb>中</rb><rt>zhōng</rt></ruby>，而是当页面混用中英日韩、嵌套在contenteditable里、还要导出 PDF 时，rb是否被正确识别、ruby-position是否触发 GPU 渲染、rp括号在邮件客户端里有没有多出空格——这些细节不校验，上线后用户看到的就是乱码或错位。