注音符號數位化顯示計畫

本計畫主要目的是：尋求讓中文注音符號，在Web以及其他數位環境下，能以更符合數位化需求的方式呈現的方法。

傳統的做法：注音字型

（攝於國語日報社展示櫥窗）

活字印刷時代，注音符號於印刷上使用將漢字及注音符號鑄於一體銅膜來製作鉛字。若一字有多種讀音，則鑄造多種鉛字備用。

當轉到電腦字體時代時，依然保持相同的作法。將注音符號與漢字造於電腦字型的同一個字符（Glyph）中，並且按照教育部一字多音審訂表造成多組字型檔案。注音字型由於能夠確實重現國語注音符號手冊上對印刷排版注音符號比例的需求，而成為主流的數位排版印刷採用的方式。

為什麼不建議使用注音字型

但注音字型在廣泛應用於數位環境時，會遇到多種問題，如：

• 缺乏語義資訊

• 缺少無障礙支援

• 缺少擴充性

（詳細請讀「從注音字體談資訊設計」）故以並不適宜用於數位內容的顯示。

注音符號使用的字元

國語注音符號 | Mandarin Bopomofo Symbols

一般注音符號 | General Bopomofo Symbols

聲調符號 | Tone Marks

注音符號 | Bopomofo Sympol

罕用注音符號 Rare Use Bopomofo Symbol

注音符號延伸 | Bopomofo Extended

方音注音符號 | Bopomofo Symbols for Dialect

方音聲調符號 | Tone Mark Symbol for Dialect

Web使用HTML Ruby標註

早在2001年網頁標準的測定中，就已經將注音符號納入Ruby規範之中，但標註方式以及顯示方式，直到2012年HTML 5規格確立以後才底定。

注音符號標注方式

請參照W3C HTML Ruby Markup Extensions以及W3C i18n Ruby Markup。

原則上在HTML中標註方式如下，每一字使用Mono Ruby方式標注：

• 二三四聲置於注音符號之後

<ruby>我<rt>ㄨㄛˇ</rt></ruby>

• 輕聲置於注音符號之前

<ruby>呢<rt>˙ㄋㄜ</rt></ruby>

另外，Tabular ruby markup model目前瀏覽器支援性較低，不建議使用，標注方式如下：

<ruby><rb>你<rb>好<rb>嗎<rt>ㄋㄧˇ<rt>ㄏㄠˇ<rt>˙ㄇㄚ</ruby>

與注音符號相關的CSS語法

請參照CSS Ruby Layout Module Level 1。

基本上需注意點如下：

• 在<rt>元素內指定Ruby文字尺寸，建議為基字的30%

rt {font-size: 30%;}

• 當要將注音於橫排時至於基字右側時，使用ruby-position: inter-character;

• 注音直排時，由於目前Unicode中調號於直排中（請見UTR#50）並非直立文字，所以需要強制直立，如：

rt {text-orientation: upright;}

• 注音排列建議使其與基字居中對齊

rt {text-align: center;}

使用注音調號字體

在CSS中宣告本專案提供的字體檔案即可

@font-face {
 font-family: BopomofoPro;
 src: url("BopomofoPro-Regular.ttf");
}
body {
 font-family: BopomofoPro, serif;
}

標注注意事項

• Chrome的Ruby接受對齊語法，所以需要在rt元素中加入text-align: center讓注音符號居中對齊。
• 注音字體指定若僅套用在ruby標籤時，會因為Fallback在Chrome上加寬與被標註漢字間的距離，所以須在body使用font-family: BopomofoGPOS, serif 來調整。
• 由於BopomofoGPOS中包含英文字，建議在 font-family: BopomofoPro; 前指定其他英文字體來取代。

注音調號字體OpenType規格

本字體使用OpenType的功能來調整調號位置，詳細說明如下：

• 當基字橫排，注音置放於基字上方時，調號使用ruby來調整位置
• 當基字橫排或直排，注音直立置放於基字右方時，將調號更換為組合符號（如下表）後，使用GPOSvert來調整座標位置。

詳細請見完整的Font Feature規格。

字型授權方式

測試字體（BopomofoGPOS.otf）使用SIL Open Font License (OFL-1.1)授權。

注音符號版面呈現測試

注音符號測試案例有七，皆使用注音調號字體來作為顯示：

1. 基字橫排，注音置於基字上方
2. 基字直排，注音置於基字右方
3. 基字橫排，注音使用ruby-position: inter-character置於基字右方
4. 注音出現於內文
5. 基字直排，注音置於基字右方（舊版）
6. 基字直排，注音置於基字右方（使用vert的更新版）
7. 五種狀況的組合顯示
8. 五種狀況的組合顯示，使用思源黑體2.000版

其他測試與相容性

相容於LibreOffice

更新事項

• 2018/3/22更新字體 詢問Adobe Dr.Ken Lunde，建議使用OpenType GPOS 'vert'，But提供新版字體，追加Case 6。

• 2018/8/13更新字體授權

• 2018/8/19更新字體規格

• 2018/9/27更新Case 8，使用Dr.Ken Lunde提供的思源黑體2.000測試版

• 2018/11/20更新Case 8，CSS指定思源黑體2.000版，請於這裡下載安裝/更新