前言

因為想要在 markdown 上面寫日文，希望在漢字上面標上假名，所以來研究一下如何實作

查了一下，發現了平常很少用到的 <ruby> 標籤

關於 html ruby 標籤

根據 MDN 的文件：

HTML <ruby>  元素的意思是旁註標記。旁註標記用於標示東亞文字的發音。

基本用法

包在 <ruby> 標籤內的字，就可以加上標音，以日文為例：

とある<ruby><rb>魔</rb><rt>ま</rt><rb>術</rb><rt>じゅつ</rt></ruby>の<ruby><rb>禁書目録</rb><rt>インデックス</rt></ruby>

とある<ruby><rb>科</rb><rt>か</rt><rb>学</rb><rt>がく</rt></ruby>の<ruby><rb>超電磁砲</rb><rt>レールガン</rt></ruby>

渲染出來的結果：

とある魔ま術じゅつの禁書目録インデックス

とある科か学がくの超電磁砲レールガン

<ruby> 裡面包含兩種元素：<rb> 與 <rt>

rb 是 ruby base 的意思，也就是要被標音的文字，像是日文漢字或中文字

rt 是 ruby text，也就是標音文字，像是平假名、片假名、注音等

一個 <rb>，後面接的 <rt> 就會標註在前面的 <rb> 上面

當然，中文的注音也可以：

<ruby><rb>紳</rb><rt>ㄅㄧㄢˋ</rt><rb>士</rb><rt>ㄊㄞˋ</rt></ruby>

<ruby><rb>球</rb><rt>ㄐ一ㄢˋ</rt><rb>評</rb><rt>ㄆㄢˊ</rt><rb>專</rb><rt>ㄗㄨㄟˇ</rt><rb>家</rb><rb></rb><rt>ㄆㄠˋ</rt></ruby>

結果：

紳ㄅㄧㄢ ˋ士ㄊㄞ ˋ

球ㄐ一ㄢ ˋ評ㄆㄢ ˊ專ㄗㄨㄟ ˇ家ㄆㄠ ˋ

也來試試韓文：1

<ruby><rb>周</rb><rt>저우쯔위</rt><rb>子瑜</rb><rt>조쯔위</rt></ruby>

結果：

周저우쯔위子瑜조쯔위

ruby tag 的範圍

我們可以把整段要標音的文字都放在 <ruby> 裡面，也可以以詞彙為單位分段：

<ruby><rb>賭</rb><rt>と</rt><rb>博</rb><rt>ばく</rt></ruby>
<ruby><rb>黙</rb><rt>もく</rt><rb>示</rb><rt>し</rt></ruby>
<ruby><rb>録</rb><rt>ろく</rt></ruby>
カイジ

結果：

賭と博ばく 黙もく示し 録ろく カイジ

基本上沒有特別規定，如何整理依個人喜好而異

Hugo 上的 ruby shortcode 與範例

Hugo 支援直接在 markdown 寫 html，所以上面的那些範例都可以正常地被渲染出來。但問題是寫法不友善，也不好閱讀

然後在網路上找到一位日本人 Spiegel 分享了一段關於 ruby 的 shortcode 之後，就新增進我的 shortcode 裡面：

layouts/shortcodes/ruby.html

<ruby><rb>{{ .Inner }}</rb><rp>(</rp><rt>{{ index .Params 0 }}</rt><rp>)</rp></ruby>

原本我們要這樣寫：

<ruby><rb>再起不能</rb><rt>リタイヤ</rt></ruby>

往後可以這樣寫：

{{<ruby "リタイヤ">}}再起不能{{</ruby >}}

結果：

再起不能(リタイヤ)

只需要寫最外層的 <ruby> ，而不用寫裡面的 <rb>、<rt> 了～

但用這個 shortcode 的寫法，就變成以一個 <ruby> 為標音單位了：

とある{{<ruby "ま">}}魔{{</>}}{{<ruby "じゅつ">}}術{{</ruby>}}の{{<ruby "インデックス">}}禁書目録{{</ruby >}}

結果：

とある魔(ま) 術(じゅつ) の禁書目録(インデックス)

科技始終來自於惰性啊 😎

後記

在 google 的時候，其實不太好搜尋，一方面資料本來就少，另一方面，跟 ruby 語言同名的關係，非常容易查到 ruby 語言的相關資訊 😂

標音功能在我網頁開發近兩年的時間裡（菜逼八），完全沒有用到過，多國語言就算有日文，八成不會有標音吧。如果我是在出版社或教育界工作的話，那還比較有可能呢

參考

  1. 我不懂韓文，所以這是參考子瑜的維基百科，若有標音斷句錯誤再麻煩糾正我，謝謝 🙏 ↩︎