Skip to content

cmex-30/Bopomofo_on_Web

Repository files navigation

Bopomofo Layout with OpenType features

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:

  1. Bopomofo and Bopomofo extension(for Taiwanese and Hakka) layout samples.
  2. Code points designated to use for input method.
  3. Code points sequence for each tone marks.
  4. OpenType features we want to use for Bopomofo layout.
  5. Sample font that use features and GSUB function for layout adjestment.

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)中,並且按照教育部一字多音審訂表造成多組字型檔案。注音字型由於能夠確實重現國語注音符號手冊上對印刷排版注音符號比例的需求,而成為主流的數位排版印刷採用的方式。

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

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

  • 缺乏語義資訊

  • 缺少無障礙支援

  • 缺少擴充性

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


注音符號使用的字元

國語注音符號 | Mandarin Bopomofo Symbols

一般注音符號 | General Bopomofo Symbols

聲調符號 | Tone Marks

聲調 符號 Unicode代碼 Unicode名稱
輕聲 ˙ U+02D9 DOT ABOVE
平聲 ˉ U+02C9 MODIFIER LETTER MACRON1
二聲 ˊ U+02CA MODIFIER LETTER ACUTE ACCENT
三聲 ˇ U+02C7 CARON
四聲 ˋ U+02CB MODIFIER LETTER GRAVE ACCENT

注音符號 | Bopomofo Sympol

符號 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

罕用注音符號 Rare Use Bopomofo Symbol

符號 Unicode代碼 Unicode名稱
U+312A BOPOMOFO LETTER V
U+312B BOPOMOFO LETTER NG2
U+312C BOPOMOFO LETTER GN
U+312D BOPOMOFO LETTER IH

注音符號延伸 | Bopomofo Extended

方音注音符號 | Bopomofo Symbols for Dialect

符號 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

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

符號 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

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來調整座標位置。
聲調 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)授權


注音符號版面呈現測試

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

  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版,請於這裡下載安裝/更新

Footnotes

  1. 雖有文字編碼,但僅用於輸入法選字對應等,不會用於顯示。

  2. U+312Bㄫ同時為方音注音常用符號

  3. U+31BB於2018年6月提交至ISO/IEC JTC1 WG2,將於未來加入Unicode標準之中,詳細請見提案文件

About

本計劃嘗試透過Web與OpenType字體技術來顯示注音符號。

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages