日文的音調標示與 HTML 的 Ruby

日文的音調，有一種用線段表達的形式，就像下面這樣：

至於具體該怎麼發音，可以看下面這部片，講的很清楚明白：

那麼這樣的音調標示要怎麼不靠手工製圖做出來呢？我們可以用 <ruby> 搞定它。

Ruby

Ruby 是 HTML 設計用來標示發音的標籤，一般是用來標示注音、日文漢字的發音，當然也可以拿來標示音調啦。

用法很簡單 <ruby> 包住要標注的文字塊，裡面的 <rt> 再填入標注即可，像下面的例子：

<ruby><span>え</span><rt>━━┓</rt></ruby>
<span>き</span>

え━━┓ き

可是在瀏覽器預設的排版下，線段和文字的距離太遠了，而且用各種正規的 CSS 語法都改不了，於是救星 StackOverflow 上就有人提出把 display 設成 inline-flex 的作法，果然有效：

<style>
ruby {
    display: inline-flex;
    fliex-direction: column-reverse;
}

ruby > span {
    display: inline;
    line-height: 1;
}

rt {
    display: inline;
    line-height: 1;
}
</style>

<body>
    <ruby><span>え</span><rt>━━┓</rt></ruby>
    <span>き</span>
</body>

え━━┓ き

あか━━┓ し

ぎん━━ こ━━┓ ういん

字距還是沒那麼完美，不過看來日文的學習者應該很適應這種狀況，畢竟對學習者來說，能學習到正確的發音才是重點，例如下面是某個 app 的發音標注：

不可能把「watashi」這麼長的英文硬擠成「私」的寬度，不僅更不美觀，而且也完全失去了學習發音的主要目的。

另一種思路

用 HTML Ruby 來處理只能說堪用，不同的排版引擎可能呈現出不同的結果，想要保證一致的外觀，可以改用程式處理，例如做一支能畫文字和線段的 API，像這樣：

ぎんこういん

具體這支 API 是如何實現的，日後有機會再分享吧。

文章寫到這邊，應該都會唸日文的高低音了吧，祝大家學習愉快。

Ruby

另一種思路

Share