HTML Ruby 教學：日文漢字上方標註平假名（振假名／ふりがな）的標準寫法

在網頁上，如果想把日語漢字上方標註平假名，最標準、最乾淨的作法，就是使用 HTML 的 <ruby> 標記。

<ruby> 是專門為東亞文字的注音、註解所設計的標籤。 瀏覽器會自動把文字排成「上方小字、下方正文」的形式。

舉個例子來說：

<ruby>幻<rt>まぼろし</rt></ruby>

呈現出來的效果就是：

幻まぼろし

【進階】如果是整段漢字呢？

如果想要一次標註一整段漢字，也可以直接這樣寫：

<ruby>高温多湿<rt>こうおんたしつ</rt></ruby>

呈現出來的效果就是：

高温多湿こうおんたしつ

這種寫法很簡潔，不過平假名會整段對應整段漢字。 如果你想讓每個漢字都精準對齊各自的平假名，就可以一個字一個字標註。

<ruby>
  高<rt>こう</rt>
  温<rt>おん</rt>
  多<rt>た</rt>
  湿<rt>しつ</rt>
</ruby>

呈現出來的效果就是：

高こう 温おん 多た 湿しつ

【補充】舊瀏覽器的括號支援

少數很舊的瀏覽器可能不支援 <ruby>。 這時候可以搭配 <rp> 標籤，讓不支援的瀏覽器顯示括號。

<ruby>
  幻
  <rp>（</rp>
  <rt>まぼろし</rt>
  <rp>）</rp>
</ruby>

支援 <ruby> 的瀏覽器會自動忽略 <rp>； 不支援的瀏覽器，則會把平假名顯示成括號形式。

【排版微調】簡易 CSS

如果想要調整振假名的大小與顏色，可以針對 rt 寫 CSS。

ruby rt {
  font-size: 0.6em;
  color: #666;
}

這樣就可以讓平假名看起來更細緻，也比較不會干擾正文閱讀。

【重點整理】

漢字放在 <ruby> 裡，平假名放在 <rt> 裡， 就可以做出「漢字上方有平假名」的效果。