PHP小码农

Appearance

ruby 注音 ​

<ruby> 标签用于为东亚文字添加注音标注。它常用于中文拼音标注、日文假名注音等场景。<ruby> 与 <rt>（ruby text）和 <rp>（ruby fallback parenthesis）配合使用。

前置知识

阅读本节前，建议先了解：time 时间

基础概念 ​

<ruby> 是 HTML5 引入的语义标签，用于在文字上方添加注音标注。它的名字来自排版术语 "ruby"，指的是印刷在文字上方的小号注释。<ruby> 主要用于中文拼音标注、日文假名注音等场景。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>ruby 注音示例</title>
</head>
<body>
  <!-- 基本用法：中文拼音标注 -->
  <p><ruby>汉<rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>字</p>

  <!-- 完整标注 -->
  <ruby>中<rp>(</rp><rt>zhōng</rt><rp>)</rp></ruby>
  <ruby>华<rp>(</rp><rt>huá</rt><rp>)</rp></ruby>
  <ruby>人<rp>(</rp><rt>rén</rt><rp>)</rp></ruby>
  <ruby>民<rp>(</rp><rt>mín</rt><rp>)</rp></ruby>
  <ruby>共<rp>(</rp><rt>gòng</rt><rp>)</rp></ruby>
  <ruby>和<rp>(</rp><rt>hé</rt><rp>)</rp></ruby>
  <ruby>国<rp>(</rp><rt>guó</rt><rp>)</rp></ruby>
  </p>
</body>
</html>

详细说明 ​

ruby 的组成结构 ​

标签全称作用
<ruby>ruby注音容器，包裹基础文字和注音
<rt>ruby text实际的注音内容，显示在文字上方
<rp>ruby fallback parenthesis不支持 ruby 时的回退内容（括号）
html
<ruby>
  基础文字       <!-- 被注音的文字 -->
  <rp>(</rp>      <!-- 回退：左括号 -->
  <rt>zhùyīn</rt> <!-- 注音内容 -->
  <rp>)</rp>      <!-- 回退：右括号 -->
</ruby>

不支持 ruby 时的回退 ​

在不支持 <ruby> 的浏览器中，页面会显示为：汉字(hàn)字(zì)

中文拼音标注 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>中文拼音标注</title>
</head>
<body>
  <h1>中文拼音标注</h1>
  <p>
    <ruby>中<rp>(</rp><rt>zhōng</rt><rp>)</rp></ruby>
    <ruby>华<rp>(</rp><rt>huá</rt><rp>)</rp></ruby>
    <ruby>人<rp>(</rp><rt>rén</rt><rp>)</rp></ruby>
    <ruby>民<rp>(</rp><rt>mín</rt><rp>)</rp></ruby>
  </p>
</body>
</html>

ruby 的 CSS 样式控制 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>ruby 样式控制</title>
  <style>
    ruby { ruby-align: center; }
    rt { font-size: 0.65em; color: #d32f2f; font-weight: normal; }
  </style>
</head>
<body>
  <ruby>注<rt>zhù</rt></ruby><ruby>音<rt>yīn</rt></ruby>
</body>
</html>

实战示例 ​

儿童识字卡片 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>识字卡片</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; text-align: center; }
    .char {
      display: inline-block;
      font-size: 4rem;
      margin: 1rem;
      padding: 1rem 1.5rem;
      border: 2px solid #ddd;
      border-radius: 8px;
    }
    rt { font-size: 0.3em; color: #e53935; }
  </style>
</head>
<body>
  <h1>基础汉字</h1>
  <div class="char"><ruby>山<rp>(</rp><rt>shān</rt><rp>)</rp></ruby></div>
  <div class="char"><ruby>水<rp>(</rp><rt>shuǐ</rt><rp>)</rp></ruby></div>
  <div class="char"><ruby>天<rp>(</rp><rt>tiān</rt><rp>)</rp></ruby></div>
  <div class="char"><ruby>地<rp>(</rp><rt>dì</rt><rp>)</rp></ruby></div>
</body>
</html>

注意事项 ​

  • 始终使用 <rp> 提供回退内容
  • <rt> 中的注音应简短
  • ruby 对中文拼音特别有用，但不应用于英文注释

最佳实践 ​

  1. 使用 rp 回退：为不支持 ruby 的浏览器提供括号回退
  2. CSS 调整样式：控制注音的字号和颜色
  3. 用于教育场景：拼音标注、识字教学

下一节

继续学习：bdi 与 bdo 文本方向

参考链接 ​