html ruby 標籤與亞洲語系標音
因為想要在 markdown 上面寫日文，希望在漢字上面標上假名，所以來研究一下如何實作
查了一下，發現了平常很少用到的 <ruby> 標籤
關於 html ruby 標籤
Section titled “關於 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 的範圍
Section titled “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 與範例
Section titled “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 語言的相關資訊 😂
標音功能在我網頁開發近兩年的時間裡（菜逼八），完全沒有用到過，多國語言就算有日文，八成不會有標音吧。如果我是在出版社或教育界工作的話，那還比較有可能呢
- Ruby Markup
- <ruby>: The Ruby Annotation element - HTML: HyperText Markup Language | MDN
- All about the HTML <ruby> element (in 2016)
- ぼくがかんがえたさいきょうの Hugo Shortcodes | text.Baldanders.info
- Escaping Hugo shortcodes
Footnotes
Section titled “Footnotes”-
我不懂韓文，所以這是參考子瑜的維基百科，若有標音斷句錯誤再麻煩糾正我，謝謝 🙏 ↩
