HTML中ruby汉字注音 HTML中ruby标签rt与rp标签配合-html教程-PHP中文网

ruby必须与rt成对使用，单独ruby无效；多字需每个汉字独立包裹ruby；rp用于旧浏览器降级，须成对紧邻rt；禁用破坏对齐的css；safari竖排存在rt错位问题。

html中ruby汉字注音 html中ruby标签rt与rp标签配合

ruby 必须包裹 rt，不能单独存在

浏览器只认 ruby + rt 的组合结构，ruby 本身不渲染任何内容，只是语义容器。漏掉 rt 就等于没写注音，且会导致无障碍阅读器无法识别发音信息。

常见错误写法：<ruby>汉</ruby> —— 看似结构完整，实则无效；正确必须是：<ruby>汉<rt>hàn</rt></ruby>

每个汉字应独立套一层 ruby，多字如“汉语”要写成 <ruby>汉<rt>hàn</rt></ruby><ruby>语<rt>yǔ</rt></ruby>，不能合并在一个 ruby 里配一个 rt
换行或字体缩放时，跨字合并的写法极易导致拼音错位，尤其在移动端 Safari 中更明显
ruby 不支持 CSS 的 display: inline-flex 等布局干预，强行修改会破坏基字与注音的对齐逻辑

rp 标签不是装饰，而是降级兜底的关键

rp 的唯一作用是在老浏览器（如 IE8 或某些定制内核 WebView）中显示括号，让 rt 内容至少可读。它本身不参与现代渲染，但省略后，不支持 ruby 的环境会直接丢弃整个 rt 块。

标准写法：<ruby>汉<rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>。现代项目可省略 rp，但若需兼容 Android 4.3 WebView 或旧版 QQ 浏览器，建议保留。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

rp 必须成对出现，且紧邻 rt 前后，顺序不能颠倒
括号内容不限于 ( )，也可用【】或〔〕，但需保证前后一致
Chrome 90+、Firefox 88+、Safari 15+ 已完全忽略 rp 的视觉渲染，仅作 DOM 存在

中文注音对齐依赖默认样式，不要重置 line-height 或 vertical-align

浏览器对 ruby 的排版是硬编码逻辑：横排时 rt 固定居中上标，竖排时右对齐。一旦用 CSS 强行干预 line-height、vertical-align 或 transform，极易造成基字和拼音偏移，且不同浏览器偏移方向还不一致。

如需微调间距，唯一安全方式是改 rt 的 font-size（建议设为基字的 60%–70%），或用 ruby-position: over（仅 Safari 支持）控制上下位置。

避免给 ruby 设 margin 或 padding，它会影响行高计算，引发段落错行
不要用 position: relative 包裹 ruby，否则 rt 的定位基准会丢失
在 flex 容器中使用 ruby 时，确保父容器未设 align-items: center，否则 rt 会被强制垂直居中而覆盖基字

浏览器兼容性已足够好，但要注意 Safari 的竖排 bug

目前所有主流桌面/移动浏览器（Chrome 12+、Firefox 3.5+、Safari 5+、Edge 12+）均支持 ruby，IE9 是最后一个支持它的 IE 版本。真正需要警惕的是 Safari 在竖排文本（writing-mode: vertical-rl）中，rt 有时会错位到基字左侧而非右侧。