小時候經常看日本漫畫，由於看不懂日文，所以多是看圖自己腦補故事的發展。不過雖然當時日文對我來說，基本跟火星文沒有兩樣，但是卻注意到一個很奇怪的現象，就是漫畫裡凡是看得懂的中文字(其實是日本漢字)，上面都有一個小小的奇怪的符號？後來才知道這些位在漢字上方的小小的讀音標註，日本稱之為振假名(振りふり仮名がな)。

現在時不時的會看一些日文的網站，卻很少發現振假名(振りふり仮名がな)的存在，咦？那到底要怎麼樣才能把假名放到漢字的上面呢？相信很多朋友都有這樣的疑問？原本認為這個格式，是無法用 HTML 來書寫的，像日本 NHK 的官方 APP，裡面的內文幾乎都是以振りふり仮名がな方式書寫，但是 NHK 的官網，卻完全只有正常的日文，やっぱ無理むりゲーじゃん、これ...(這個技巧果然是很難實現吧)！

但事實上，其實很早很早以前，HTML 就已經把這個振假名模式加進標準語法了喔！這個標籤就是：<ruby>。
所以今天我們就來跟大家聊聊這個跟紅寶石無關的 RUBY 標籤。

• 什麼是 <ruby> 標籤？
• 常見印刷字體尺寸對照表
• <ruby> 標籤的基本結構
• <ruby> 標籤跨語言的應用範圍
• 這個 <ruby> 標籤很厲害，但如果假名太長怎麼辦？
• 如果要細部調整這些假名小字的樣式呢？
• 當然！怎麼能錯過台灣人最愛的諧音哏
• 結語：小標籤，大作用

振假名據說最早可以追溯到日本平安時代，由於當時中國古文(漢字)是主流的書寫語言，為了幫助日本人讀懂漢文而加的讀音提示，後來到了明治時代，隨著教育普及，振假名正式成為日本的國語教育一部分，用來幫助學童認字。除了幫助兒童或外國人識字，也常用來解決漢字的多音歧義，或為外來語、地名人名等難字標示讀音，甚至在小說漫畫中用來加強語氣或創造雙重含意。

什麼是 <ruby> 標籤？

<ruby> 是 HTML 用來顯示主文字與註音的標籤。最常見應用包括日文漢字加假名，以及中文拼音。

那麼為什麼這個標籤會被命名為 ruby 呢？其實和「紅寶石」一點關係也沒有。

這個詞源來自於西方印刷業的排版術語。在傳統鉛字排印中，"ruby" 是一種用來顯示註釋或註音的極小字體，約為 5.5pt，用途正是為了在主文字旁標示輔助資訊。
這個詞後來被 W3C 借用，成為 HTML 中註音功能的標籤名稱。

常見印刷字體尺寸排版單位對照表

字體名稱	點數（pt）	常見用途
Canon	48pt	大型招牌、海報
Double English	28pt	副標、章節開頭
Great Primer	18pt	雜誌大標題
English	14pt	中標題
Pica	12pt	一般正文
Long Primer	10pt	小說、報紙內文
Brevier	8pt	法律文件、書籍細節註解
Minion	7pt	備註文字
Nonpareil	6pt	報紙腳註、分類廣告
Ruby	~5.5pt	註音、字旁註釋（也就是我們現在說的 ruby text）
Agate	5pt	財經報表、證券資訊

<ruby> 標籤的誕生靈感來自日文的「振假名」排版需求。 為了支援日文的「振假名」和中文的注音符號等東亞語言，W3C 在 1997 年的 HTML 4.0 草案中引入了 <ruby> 標籤，專門用來在文字上方加上讀音。這項技術後來在 HTML5 正式標準化，成為網頁國際化的重要一環，雖然這是由 W3C 制定的 HTML 標準，但日本社群對這項功能的推動至關重要，是全球化網頁排版的一大貢獻。

<ruby> 標籤的基本結構：

在 HTML 中，與 <ruby> 搭配使用的子標籤包含：

• <ruby>：外層容器，包住主文字與註音，是整組註音結構的核心。
• <rb>（ruby base）：主文字，即要被註音的字。這個標籤是可省略的，瀏覽器會自動把非 <rt> 的內容當作 <rb>。
• <rt>（ruby text）：註音文字，通常出現在主文字上方（或部分語言是下方），這是不可省略的標籤。
• <rp>（ruby parentheses）：提供給不支援 ruby 的舊瀏覽器，在註音前後加上括號，例如顯示為「(がく)」，不過現代的瀏覽器幾乎100%支援，所以直接忽略也不會有什麼影響。

簡單的 ruby 結構只需 <ruby> 與 <rt> 就能運作。但當你需要更多控制（例如 CSS 美化主文字、做分音註音等），就建議加上 <rb>。

最標準寫法（含 <rb>）：

<ruby>
  <rb>主文字</rb><rt>註音</rt>
</ruby>

預覽：主文字註音

可簡化寫法（省略 <rb>，瀏覽器會自動判斷）：

<ruby>
  主文字<rt>註音</rt>
</ruby>

預覽：主文字註音

範例展示

日文振假名：

<ruby>学校<rt>がっこう</rt></ruby>

預覽：学校がっこう

中文注音：

<ruby>台<rt>ㄊㄞˊ</rt>灣<rt>ㄨㄢ</rt></ruby>

預覽：台ㄊㄞˊ灣ㄨㄢ

中文拼音：

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

預覽：漢hàn字zì

英文語音教學：

<ruby>thought<rt>θɔːt</rt></ruby>

預覽：thoughtθɔːt

韓文漢字音：

<ruby>大學<rt>대학</rt></ruby>

預覽：大學대학

<ruby> 標籤跨語言的應用範圍

語言	用途
日文	振假名
中文	拼音 / 注音
韓文	漢字音註解
越南文	漢喃讀音
英文	音節、IPA 音標輔助

這個 <ruby> 標籤很厲害，但如果假名太長怎麼辦？

對，這是個問題。
畢竟不是每個日本漢字對應的假名都很短，有時候會非常長，往往好幾個音節，若直接套上ruby標籤，看起來很容易顯得混亂，不過這套格式早就經過長時間的實務驗證，自然也發展出對應的解決方法。

方法 1：整詞註音（推薦）

<ruby>考える<rt>かんがえる</rt></ruby>

預覽：考えるかんがえる

方法 2：用 CSS 美化 <rt>

rt {
  font-size: 0.6em;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
}

預覽效果會讓註音更集中不擁擠：考かんえがるえる

方法 3：教學用途分音節

<ruby>考<rt>かん</rt>え<rt>が</rt>る<rt>える</rt></ruby>

預覽：考かんえがるえる

如果要細部調整這些假名小字的樣式呢？

要控制這些振假名（註音文字）的樣式，基本的語法，就是使用 CSS 來設定。例如：

• 針對整個 <ruby> 元素，可以使用 line-height 調整主文字（rb）與假名（rt）之間的距離，或使用 ruby-position 控制假名的位置（顯示在上方或下方）。
• 針對 <rt>，可以使用 font-size 改變假名的字體大小，color 改變顏色，或透過 margin-top / margin-bottom 增加假名與主文字之間的距離。

不過需要特別留意的是，rt 與主文字（rb）之間的距離，會受到不同瀏覽器的預設行為影響。 例如在 Chrome 中，對 <rt> 使用 margin-top，其實會增加 <rt> 與前一行文字的距離(與line-height的作用幾乎一樣)，而不會直接縮短假名與主文字的間距。 因此調整時，建議結合 line-height 和 font-size，並在不同瀏覽器中測試效果。

以下是範例程式碼：

<style>
  ruby {
    line-height: 1.8;        /* 調整主文字與假名的行距 */
    ruby-position: under;     /* 假名改為顯示在下方(預設是上方) */
  }

  rt {
    font-size: 0.8em;        /* 縮小假名字體 */
    color: #666;             /* 改變顏色 */
    margin-top: 0.3em;       /* 增加與前一行的距離（非直接影響主文字） */
  }
</style>

預覽：無理むり

當然！怎麼能錯過台灣人最愛的諧音哏

除了語言學習，其實 <ruby> 標籤還有一個極具娛樂性的用途——製作台語諧音梗！

這種寫法常見於社群梗圖或搞笑貼文中，透過日文或假名讀音，諧音模仿台語或中文發音，搭配 <ruby> 標註後更有戲劇效果。

舉幾個經典範例：

• 免っがわ来じっ套不要給我來這套：「不要給我來這套」，讀音模仿發音增加喜感。
• りかわ惦惦你給我閉嘴：「りかわ」接近「你給我」的發音，「惦惦」是台語「安靜」的意思。
• 但じれね等一下捏：使用日文片假名與平假名混搭，形聲模仿台語。

這種玩法讓 <ruby> 不只是語言工具，更是一種創意展現。

結語：小標籤，大作用

HTML 的 <ruby> 看似微小，卻是語言學習與排版的橋樑。它幫助學習者閱讀陌生語言，也讓設計師能更精準地控制排版細節。