For English readers, If you are i18n Engineer, Input Method developer, and Font Engineer. In this repo we provide a detailed document as a reference included:
In this document, we use registered OpenType feature and applied GSUB way that is working on modern font engine like HarfBuzz and CoreText. So that the sample font is immediately usable for web content that is well-marked with ruby tag with correct code points sequence.
Feel Free to use the font under Open Font License. If you have any suggestion and feedback, please add issue in this repo. Glad to know your usage on Web content and applications, please let me know: bobbytung.
本計畫主要目的是:尋求讓中文注音符號,在Web以及其他數位環境下,能以更符合數位化需求的方式呈現的方法。
(攝於國語日報社展示櫥窗)
活字印刷時代,注音符號於印刷上使用將漢字及注音符號鑄於一體銅膜來製作鉛字。若一字有多種讀音,則鑄造多種鉛字備用。
當轉到電腦字體時代時,依然保持相同的作法。將注音符號與漢字造於電腦字型的同一個字符(Glyph)中,並且按照教育部一字多音審訂表造成多組字型檔案。注音字型由於能夠確實重現國語注音符號手冊上對印刷排版注音符號比例的需求,而成為主流的數位排版印刷採用的方式。
但注音字型在廣泛應用於數位環境時,會遇到多種問題,如:
缺乏語義資訊
缺少無障礙支援
缺少擴充性
(詳細請讀「從注音字體談資訊設計」)故以並不適宜用於數位內容的顯示。
聲調 | 符號 | Unicode代碼 | Unicode名稱 |
---|---|---|---|
輕聲 | ˙ | U+02D9 | DOT ABOVE |
平聲 | ˉ | U+02C9 | MODIFIER LETTER MACRON^1 |
二聲 | ˊ | U+02CA | MODIFIER LETTER ACUTE ACCENT |
三聲 | ˇ | U+02C7 | CARON |
四聲 | ˋ | U+02CB | MODIFIER LETTER GRAVE ACCENT |
符號 | Unicode代碼 | Unicode名稱 |
---|---|---|
ㄅ | U+3105 | BOPOMOFO LETTER B |
ㄆ | U+3106 | BOPOMOFO LETTER P |
ㄇ | U+3107 | BOPOMOFO LETTER M |
ㄈ | U+3108 | BOPOMOFO LETTER F |
ㄉ | U+3109 | BOPOMOFO LETTER D |
ㄊ | U+310A | BOPOMOFO LETTER T |
ㄋ | U+310B | BOPOMOFO LETTER N |
ㄌ | U+310C | BOPOMOFO LETTER L |
ㄍ | U+310D | BOPOMOFO LETTER G |
ㄎ | U+310E | BOPOMOFO LETTER K |
ㄏ | U+310F | BOPOMOFO LETTER H |
ㄐ | U+3110 | BOPOMOFO LETTER J |
ㄑ | U+3111 | BOPOMOFO LETTER Q |
ㄒ | U+3112 | BOPOMOFO LETTER X |
ㄓ | U+3113 | BOPOMOFO LETTER ZH |
ㄔ | U+3114 | BOPOMOFO LETTER CH |
ㄕ | U+3115 | BOPOMOFO LETTER SH |
ㄖ | U+3116 | BOPOMOFO LETTER R |
ㄗ | U+3117 | BOPOMOFO LETTER Z |
ㄘ | U+3118 | BOPOMOFO LETTER C |
ㄙ | U+3119 | BOPOMOFO LETTER S |
ㄚ | U+311A | BOPOMOFO LETTER A |
ㄛ | U+311B | BOPOMOFO LETTER O |
ㄜ | U+311C | BOPOMOFO LETTER E |
ㄝ | U+311D | BOPOMOFO LETTER EH |
ㄞ | U+311E | BOPOMOFO LETTER AI |
ㄟ | U+311F | BOPOMOFO LETTER EI |
ㄠ | U+3120 | BOPOMOFO LETTER AU |
ㄡ | U+3121 | BOPOMOFO LETTER OU |
ㄢ | U+3122 | BOPOMOFO LETTER AN |
ㄣ | U+3123 | BOPOMOFO LETTER EN |
ㄤ | U+3124 | BOPOMOFO LETTER ANG |
ㄥ | U+3125 | BOPOMOFO LETTER ENG |
ㄦ | U+3126 | BOPOMOFO LETTER ER |
ㄧ | U+3127 | BOPOMOFO LETTER I |
ㄨ | U+3128 | BOPOMOFO LETTER U |
ㄩ | U+3129 | BOPOMOFO LETTER IU |
符號 | Unicode代碼 | Unicode名稱 |
---|---|---|
ㄪ | U+312A | BOPOMOFO LETTER V |
ㄫ | U+312B | BOPOMOFO LETTER NG^2 |
ㄬ | U+312C | BOPOMOFO LETTER GN |
ㄭ | U+312D | BOPOMOFO LETTER IH |
符號 | Unicode代碼 | Unicode名稱 |
---|---|---|
ㄫ | U+312B | BOPOMOFO LETTER NG |
ㆠ | U+31A0 | BOPOMOFO LETTER BU |
ㆡ | U+31A1 | BOPOMOFO LETTER ZI |
ㆢ | U+31A2 | BOPOMOFO LETTER JI |
ㆣ | U+31A3 | BOPOMOFO LETTER GU |
ㆤ | U+31A4 | BOPOMOFO LETTER EE |
ㆥ | U+31A5 | BOPOMOFO LETTER ENN |
ㆦ | U+31A6 | BOPOMOFO LETTER OO |
ㆧ | U+31A7 | BOPOMOFO LETTER ONN |
ㆩ | U+31A9 | BOPOMOFO LETTER ANN |
ㆪ | U+31AA | BOPOMOFO LETTER INN |
ㆫ | U+31AB | BOPOMOFO LETTER UNN |
ㆬ | U+31AC | BOPOMOFO LETTER IM |
ㆭ | U+31AD | BOPOMOFO LETTER NGG |
ㆮ | U+31AE | BOPOMOFO LETTER AINN |
ㆯ | U+31AF | BOPOMOFO LETTER AUNN |
ㆰ | U+31B0 | BOPOMOFO LETTER AM |
ㆱ | U+31B1 | BOPOMOFO LETTER OM |
ㆲ | U+31B2 | BOPOMOFO LETTER ONG |
符號 | Unicode代碼 | Unicode名稱 |
---|---|---|
˪ | U+02EA | MODIFIER LETTER YIN DEPARTING TONE MARK |
˫ | U+02EB | MODIFIER LETTER YANG DEPARTING TONE MARK |
ㆴ | U+31B4 | BOPOMOFO FINAL LETTER P |
ㆵ | U+31B5 | BOPOMOFO FINAL LETTER T |
ㆷ | U+31B7 | BOPOMOFO FINAL LETTER H |
ㄍ | U+31BB | BOPOMOFO FINAL LETTER G [^3] |
[^3]: U+31BB於2018年6月提交至ISO/IEC JTC1 WG2,將於未來加入Unicode標準之中,詳細請見提案文件。
早在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 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;
}
本字體使用OpenType的功能來調整調號位置,詳細說明如下:
ruby
來調整位置vert
來調整座標位置。聲調 | Unicode代碼 | 取代符號 | Unicode代碼 |
---|---|---|---|
ˊ | U+02CA | ́ | U+0301 |
ˇ | U+02C7 | ̌ | U+030C |
ˋ | U+02CB | ̀ | U+0300 |
詳細請見完整的Font Feature規格。
測試字體(BopomofoGPOS.otf)使用SIL Open Font License (OFL-1.1)授權。
注音符號測試案例有七,皆使用注音調號字體來作為顯示:
vert
的更新版)相容於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版,請於這裡下載安裝/更新