HTML拼音注释ruby怎么做_HTML东亚文字注音结构-html教程-PHP中文网

现代浏览器渲染拼音必须显式使用标签包裹每个被注音字符；仅用和会导致降级为平铺显示，多字需逐字拆分并独立包裹，非汉字字符也须纳入。

html拼音注释ruby怎么做_html东亚文字注音结构

直接用 <ruby></ruby> + <rb></rb> + <rt></rt> 三件套，缺一不可；现代浏览器（Chrome 120+、Firefox 125+、Safari 17+）已强制要求显式 <rb></rb>，漏掉就当纯文本渲染。

核心原因是没写 <rb></rb>。只写 <ruby>汉<rt>hàn</rt></ruby> 在当前主流浏览器中会被降级为“汉hàn”平铺显示，不是上标拼音。

<rb></rb> 必须包裹每个被注音的汉字，不能省略，也不能用空格或换行隔开
正确结构是：<ruby><rb>汉</rb><rt>hàn</rt></ruby>
多字必须逐字拆：「北京」要写成 <ruby><rb>北</rb><rt>běi</rt></ruby><ruby><rb>京</rb><rt>jīng</rt></ruby>，不能合在一个 <ruby></ruby> 里共用一个 <rt></rt>
父容器若设了 line-height: 1 或 overflow: hidden，<rt></rt> 很容易被裁掉

用 lazy_pinyin() 逐字调用没问题，但常见翻车点不在拼音逻辑，而在 HTML 结构拼接。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

禁用 errors='ignore'：遇到英文字母或数字时会跳过，导致 <rb></rb> 和 <rt></rt> 数量不一致
非汉字字符（如 emoji、全角标点）也要原样包进 <rb></rb>，不能只处理汉字块——否则结构断裂
别手动字符串拼接 <ruby>...</ruby>，用 enumerate() 对齐索引更稳：for i, char in enumerate(text): html += f"<ruby><rb>{char}</rb><rt>{pinyin[i]}</rt></ruby>"

<rp></rp> 不是装饰，是 fallback 机制：老浏览器（IE11、旧安卓 WebView）不识别 <ruby></ruby> 时，会把 <rt></rt> 当普通文本，而 <rp></rp> 里的括号能让它显示成 “汉(hàn)” 这种可读格式。

如果目标环境明确是 Chrome/Firefox/Safari 最新版，<rp></rp> 可省，但结构仍要合法：<ruby><rb>汉</rb><rt>hàn</rt></ruby>
需要兼容旧环境时，<rp></rp> 必须严格嵌套在 <rt></rt> 内，且只含括号：<rt><rp>(</rp>hàn<rp>)</rp></rt>
<rp></rp> 不能出现在 <rb></rb> 外或 <rt></rt> 外，否则被忽略