HTML5中Ruby注音需rb与rt成对嵌套于ruby容器内，单独使用或结构错误会导致错位；CSS须设font-size、line-height等触发浏览器内置排版逻辑，并禁用破坏流式布局的样式。

如果您在网页中为汉字添加拼音时发现注音错位、被截断或根本不显示，则可能是由于 HTML 结构不完整或 CSS 缺失导致。以下是实现正确注音排版的极简操作步骤：

一、确保使用标准 ruby 结构

浏览器仅识别 rb + rt 成对嵌套在 ruby 容器内 的结构，单独使用或遗漏会导致降级为普通文本流，拼音平铺在汉字后方。

1、为每个汉字分别包裹标签，不可将多个字放入同一个中。

2、每个后立即紧跟对应的标签，内容为该字拼音。

立即学习“前端免费学习笔记（深入）”；

3、可选添加标签包裹括号，用于不支持 ruby 的浏览器回退显示。

4、示例代码：<ruby><rb>汉</rb><rt>hàn</rt><rp>(</rp></ruby>。

二、启用基础 CSS 渲染支持

默认情况下，元素字号与汉字相同且无垂直偏移，必须通过 CSS 显式声明才能触发浏览器内置的注音排版逻辑。

1、为设置 font-size: 0.5em，确保拼音尺寸缩小至基字一半。

2、为包含 ruby 的父容器设置 line-height: 1.8，避免行高挤压导致拼音被截断。

3、添加 ruby-align: center，显式声明拼音水平居中对齐（部分旧浏览器需此声明）。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

4、对整组 ruby 添加 white-space: nowrap，防止换行破坏字-音对应关系。

三、使用 pinyin-pro 库自动生成合法结构

手动编写 ruby 结构易出错，pinyin-pro 可自动输出语义正确、带 class 的 HTML 字符串，规避 rb/rt 错位风险。

1、安装库：npm install pinyin-pro。

2、在 JavaScript 中调用：import { html } from 'pinyin-pro'; const str = html('汉字');。

3、输出结果自动包含、、，并附带默认 class 如 py-chinese-item 和 py-pinyin-item。

4、配合 CSS 规则：.py-pinyin-item { font-size: 12px; color: #666; }，实现开箱即用的样式控制。

四、验证浏览器兼容性与回退机制

所有现代浏览器（Chrome 110+、Firefox 115+、Safari 17+、Edge 110+）均原生支持 ruby，但需确认是否启用中文排版特性。

1、检查页面是否声明了 lang="zh-CN" 属性，有助于激活东亚文字排版引擎。

2、在不支持 ruby 的环境（如 IE11 或老旧移动 WebView）中，内容应正常显示为括号包裹拼音，例如“汉(hàn)”。

3、禁用 position: absolute 等破坏流式布局的 CSS，否则会切断屏幕阅读器对 ruby 语义的识别。

4、避免对设置 display: block 或 float，这将导致注音脱离基字定位。