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

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

這是專門為東亞文字的注音／註解設計的，瀏覽器會自動排版成「上小字、下正文」。

舉個例子來說：

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

呈現出來的效果就是：

幻まぼろし

【進階】如果同時包含漢字與假名的整段呢？

可以這樣寫：

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

呈現出來的效果就是：

高温多湿こうおんたしつ

或者想要精準的讓每個漢字對齊他的平假名，那就一個一個對吧！

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

呈現出來的效果就是：

高こう 温おん 多た 湿しつ

【補充】

少數很舊的瀏覽器不支援 ruby 時，可以用 <rp> 放「括號」。 支援 ruby 的瀏覽器會忽略 <rp>，不支援的才會顯示括號內容。

【排版微調】簡易 CSS

ruby rt {
  font-size: 0.6em;  /* 振假名大小 */
  color: #666;       /* 顏色 */
}

可以用這種方式修飾 rt 的顏色與大小。

【重點整理】

漢字放在 <ruby> 裡，平假名放在 <rt> 裡， 就可以呈現漢字上面有平假名的效果！