网页汉字上方加拼音：Ruby 与 RT 标签实用排版指南

分类：中文排版

内容整理：ZhuanPinyin 编辑组 · 发布：2026-07-20 · 更新：2026-07-20

编辑说明：依据本站工具的实际输出测试、公开语言文字规范与网页标准整理，并接受读者纠错。

网页中把拼音放在汉字上方，最合适的基础结构通常不是绝对定位，也不是用多个空格对齐，而是 HTML 的 ruby 与 rt 元素。它们表达的是“正文及其注音”的语义关系，浏览器也能据此进行行高和换行处理。

最小可用结构

<ruby>
  汉<rt>hàn</rt>
  字<rt>zì</rt>
</ruby>

ruby 包住需要注音的正文，rt 放对应读音。逐字注音时，应让每个汉字紧跟自己的 rt，这样比把整词拼音放在末尾更容易保持对应关系。

如果需要兼顾极旧或特殊的阅读环境，可以加入 rp 作为括号回退；现代主流浏览器通常可以直接显示 Ruby 注音。MDN 将 rt 描述为用于标示东亚字符发音的元素，并给出了浏览器兼容信息。

为什么复制到不同编辑器后会变样

网页、Word、微信公众号编辑器和纯文本框处理富文本的方式不同。复制时常见三种结果：完整保留 Ruby；只保留汉字和拼音但改变位置；直接丢失标签只剩纯文本。

因此本站提供两类复制方式：纯拼音复制适合聊天、表格和不支持 Ruby 的系统；高级排版复制尝试保留汉字与注音关系。粘贴后仍需要检查以下项目：

• 拼音是否仍位于对应汉字上方；
• 行距是否足以容纳 rt，避免上下行重叠；
• 长拼音是否挤压相邻汉字，例如专名或儿化形式；
• 字体是否包含 ü、声调字母和注音符号所需字形；
• 移动端窄屏是否出现不自然的断行。

一套更稳定的 CSS 起点

ruby {
  ruby-align: center;
  line-height: 2.2;
}

rt {
  font-size: 0.55em;
  color: #475569;
}

line-height 需要根据正文字号和阅读场景调整。儿童材料可适当放大正文和注音；长篇文章则不宜给每个常用字都加注音，否则页面会变得拥挤，阅读者也容易把注意力全部转向拼音。

整词拼写与逐字对齐的取舍

汉语拼音正词法通常以词为拼写单位，而网页注音常要求逐字对齐。两者目标不同：前者强调规范拼写，后者强调视觉对应。例如“图书馆”作为词语可整体理解，但逐字 Ruby 需要分别给“图、书、馆”放置读音。

用于正式出版或语言教学时，应先确定材料目标：如果训练词语拼写，优先保留词间空格与大小写规范；如果帮助儿童认字，逐字注音更直观。不要把视觉上方便的逐字分隔误当成所有场景下的正词法写法。

用本站生成后怎样检查

输入一段包含标点、多音字和中英文混排的短文，先完成读音校正，再复制排版结果。建议至少在目标编辑器和一部手机上各检查一次。本站输出是排版起点，不承诺所有第三方编辑器完整保留 HTML 样式。

参考资料

• MDN：ruby 元素
• MDN：rt 元素
• 教育部：GB/T 16159—2012 汉语拼音正词法基本规则