#HTML(HTML5):文字標音

本來是沒特別想寫這篇,不過想想這功能在最近已經被廣泛支援了,故就想說一定要好好來介紹一下!
大家在打入中文、日文的時候,有時候應該會想加入標音吧!正好以前IE有個標籤叫做ruby標籤可以做到這樣的事情,而在HTML5終於把ruby標籤做為標準加入了!

本來是沒特別想寫這篇,不過想想這功能在最近已經被廣泛支援了,故就想說一定要好好來介紹一下!

大家在打入中文、日文的時候,有時候應該會想加入標音吧!正好以前IE有個標籤叫做ruby標籤可以做到這樣的事情,而在HTML5終於把ruby標籤做為標準加入了!

標音

底下一樣先用一個範例來解釋:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>標音</title>
  </head>
  <body>
    <ruby>踏<rt>ふ</rt></ruby>まれた<ruby>花<rt>はな</rt></ruby> <br />
    被<ruby>踐<rt>ㄐㄧㄢˋ</rt>踏<rt>ㄊㄚˋ</rt></ruby>的花朵
  </body>
</html>

ruby01.png
上面的排版有點亂,不過為了不要讓文字中間出現空白,只好擠成一行了,底下列一下通用式用法的解說:

<ruby>
  [欲加上標音的字詞1] <rt>[標音1]</rt>
  [欲加上標音的字詞2] <rt>[標音2]</rt>
  ...
</ruby>

大體上就是如此,整個標音群組用ruby標籤包住,打上要標音的詞彙後,加上rt標籤去做標音,就可以達到標音的效果了!

rb標籤:早期的寫法會把[欲加上標音的字詞]包在<rb>...</rb>內,但是收錄進HTML5標準的時候,去除了rb標籤,所以目前的標準是要省略rb標籤的唷!

不支援標音之瀏覽器的表現方法

假設今天要讓不支援標音的瀏覽器上看起來也要至少正常一點,可以將要多餘顯示的文字用rp標籤包住。這樣的話,有支援標音的瀏覽器會忽略rp標籤裡的內容,而不支援標音的瀏覽器就會顯示rp標籤裡的內容。底下看個範例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>標音</title>
  </head>
  <body>
    <ruby>踏<rp>(</rp><rt>ふ</rt><rp>)</rp></ruby>まれた<ruby>花<rp>(</rp><rt>はな</rt><rp>)</rp></ruby> <br />
    被<ruby>踐<rp>(</rp><rt>ㄐㄧㄢˋ</rt><rp>)</rp>踏<rp>(</rp><rt>ㄊㄚˋ</rt><rp>)</rp></ruby>的花朵
  </body>
</html>

ruby02.png
左邊Google Chrome可以使用標音功能,故就直接顯示其標音,rp標籤裡之內容不管;而右邊Firefox不能使用標音功能,故就把rp標籤內的內容也一併顯示出來。

  1. 與w3schools.com裡的內容不同:rp標籤我是放在rt標籤外才能讓有標音功能的瀏覽器顯示正常,但w3schools.com內的卻放在rt標籤內。
  2. Firefox支援Ruby否?根據w3schools.com的內容是說已經支援了,但我的Firefox還是沒有。如果你的Firefox沒有標音功能,可以到這裡(HTML Ruby)下載套件安裝一下就支援了!

參考資料

  1. w3schools.com > HTML <ruby> Tag:http://www.w3schools.com/tags/tag_ruby.asp
  2. w3schools.com > HTML <rp> Tag:http://www.w3schools.com/tags/tag_rp.asp
  3. Re: <rb> as part of HTML5 ruby? from Dean Lee on 2011-12-29 (public-html-ig-zh@w3.org from December 2011):http://lists.w3.org/Archives/Public/public-html-ig-zh/2011Dec/0021.html
  4. 日文歌詞標音編輯器:http://but.lolicom.org/tool/