從注音字體談資訊設計
為什麼在資訊結構上，我們得做得更多？
進行注音符號在Web上顯示的工作已經第五年了[1]，在許多朋友的協助下，現在已經接近完成階段[2]。但在這過程中，有一些挑戰的意見，像是：「為什麼不繼續使用注音字體？」從有電腦以來，注音字體不是很好的方法嗎？
我未曾整理過對這問題的答案，但我覺得這是值得討論的一件事。關係到如何對資訊結構以及顯示做到通用設計，需要整理成一篇文章來做為參考。這是寫這篇文章的主要原因。
首先，從背景開始說明，什麼是注音字體。
什麼是注音字體？
教育部在2000年發行了《國語注音符號手冊》，作為從印刷到數位環境，注音符號排印的規範手冊。其中包括了單一漢字標注注音時，漢字與注音符號，聲調的比例。
而後來字型公司等按照這一份規範推出了注音字體產品。注音字體就是將符合上述手冊規範的漢字與注音做成顯示字符的字型檔案。
但漢字有破音字，又要如何透過注音字體來處理呢？
教育部曾發布〈國語一字多音審定表〉，注音字體就透過這份審訂表上的破音順序，將破音字分別造到第二到第六組字[3]。當要顯示破音字時，就切換使用的字型，即可顯示。
注音字體在從印刷轉到數位的時代滿足了大多數的需求。像是製作教材、處理考卷等都沒有問題。但這還是在「數位作為印刷排版工具」的思維下的產物。當注音要直接在數位環境顯示時，注音字體就有一些明顯的缺點。
三加一個需要注意的要點
問題在哪兒？從印刷媒體轉到數位媒體時，為什麼不能使用相同的方法處理？我整理出了三加一個原因。
一，缺乏語意（Semantic）結構
注音字體可以在網頁上使用，可以透過CSS來指定，並且在HTML中透過Selector來切換使用的字型。同樣也可以使用Webfont技術來擷取使用到的字，不需要下載安裝整套字。
但是問題在於，這六套字型按照〈一字多音審定表〉來製作，顯示出來後人讀沒有問題，但機器卻只知道哪些字該切換字型顯示，無法取得實際上的讀音資訊。（字體檔案裡頭沒有，CSS與HTML也無法提供）
對於數位媒體而言，就是相當重大的缺陷，與第二點無障礙環境（Accessibility, a11y）有直接關係。
這裡舉個HTML裡處理圖說的案例來作輔助說明。
過去在HTML內容中插入一張圖片，會是這樣的結構。
<img src="picture.jpg" class="picture" alt="手機改變了這世界" />由於視障者看不到這張圖片，所以習慣上會將圖說寫到img元素的alt屬性裡頭。在輔助功能上，遇到圖片就會以圖說來替代圖片，以點字或者語音讀出。
但在HTML 5中，採用了figure與figcaption元素來做到更完整的語意標記。
<figure>
<img src="picture.jpg" class="picture" alt="這是人在使用手機的圖片" />
<figcaption>手機改變了這世界</figcaption>
</figure>這麼一來更有效的分離「圖片的說明」與圖說「想要傳達的概念」。讓內容更具結構[4]。
二，無法提供無障礙（Accessibility）功能
承上，在沒有語意資訊的狀況下， 若要透過輔助功能來讓視障者閱讀的話，就不知道該字指定的讀音。
以上面的「了解了」為例，在macOS/iOS的朗讀功能（Text-to-Speech, TTS）下，雖然可以使用字典輔助，做到「了解（ㄌㄧㄠˇㄐㄧㄝˇ）・了（˙ㄌㄜ）」的斷詞與朗讀。但除非字典可以窮舉詞彙並且做到正確斷詞，不然就無法100%正確朗讀出所有的破音字。而要做到這一步，所需要的成本絕對不少。
所以，注音字體對無障礙環境並不友善。
談到無障礙，無論在實體空間或者數位環境下，很多人覺得多此一舉。如果你工作與空間或者網頁架設相關，更可能會痛恨政府的〈建築物無障礙設施設計規範〉以及〈網站無障礙規範〉[5]。
但無論公共空間或者數位環境，都應該要兼顧「所有人」的使用權利。所以在設計之初，就應該當作基本條件來進行思考。[6]。
過去在印刷時代，印出的紙本書無論如何都無法讓視障者閱讀，而需要製作成點字書或者有聲書。但在數位環境下，電子書可以透過輔助功能來轉成點字或者語音。意思就是不需要做額外的成本與時間，就可以達到通用性。
這裡提到「額外的成本與時間」，在台灣的語境下往往被當作「做愛心」、「社會福利」的一環。不過在數位環境下，這些「額外」的事都應該化為基礎，在執行初期就應該納入考量。
三，無法擴張，無法顯示錯誤或者不同的讀音
這是一個真實的案例：
一位國小國語教師，要出一張注音考卷。其中一題組希望讓學生找出錯誤的拼音。他就得以Word內建的注音標註功能（或者使用注音字體，印出後修改）來製作考卷。
假設要將這樣的考卷或者練習題轉換到網頁上頭時，就會遇到麻煩了。一來Word的注音標註無法輸出到網頁上，二來使用注音字體時無法修改預設的注音。
而實際的讀音也可能不在教育部的〈一字多音審定表〉上頭，這是注音字體的侷限。
另外則是現在的流行文化，日文的輕小說中有標音與漢字不同的狀況，用來說出心裡的本音。這樣的運用法也傳到台灣，例如：
你真是熱（ㄕㄚˇ）心（ㄍㄨㄚ）。
像這樣的內容也無法透過注音字體顯示，得要做成圖片來處理。
對於資訊顯示來說，注音字體不具備擴張性。[7]
＋１：注音字體很難開源！
最後，現在的注音字體，完整可用的幾乎都是字型公司的產品。無論印刷或者應用在網頁上，都需要授權。
雖然有一套「王漢宗注音字體」，但實際上未覆蓋到所有破音字。而如果要讓開源社群去產出、維護一套完整的注音字體，更是難上加難。（現在在字數與技術上完善，並且使用開放字體授權的思源黑/宋體，也是在Adobe與Google的合作下完成。）
所以需要尋找更好的處理方法
目前使用HTML / CSS Ruby，並且配合OpenType字型功能來處理網頁及電子書的注音呈現，可以有效處理以上的問題。以上面的例句來說明標註方式：
<p>您真是<ruby>熱<rt>ㄕㄚˇ</rt></ruby><ruby>心<rt>ㄍㄨㄚ</rt></ruby>可以達到這樣的顯示：
讓我們檢視上面三加一個問題，都能夠得到解決：
一，缺乏語意結構
使用ruby標記將漢字與注音合為一組，機器讀取時可以知道漢字與讀音的關係。
二，無法提供無障礙功能
現在使用macOS的TTS功能來朗讀Ruby，可以得到漢字與注音兩方的讀音。這部分尚未標準化，未來應可選擇優先朗讀Ruby內的注音或者漢字，或者兩方。
三，無法擴張
我想不需要多說明了😂。
＋１：注音字體很難開源
HTML與CSS都是開放標準，而OpenType字型目前我們也以開源釋出。
結論
這篇文章說了這麼多要點與技術細節，並不是想要表示「注音字體已經過時了，所以應該用web標準來處理」。而是希望提醒：在做資訊（甚至不止於資訊領域）設計時，需要預先思考其前提。
注音字體的誕生有其時代脈絡。在電腦普及的時代，印刷製作流程由活字、照相排版移到電腦上。注音字體可以迅速地適用於文字處理（如Word等）以及印前排版（如PageMaker、InDesign等）軟體上頭。在當時是完善且實用的處理方式。
但真正改變的是內容從印刷載體轉換到數位環境上頭，如Web、App。
在數位環境上，除了「人讀」，還要在乎「機讀」，而需要具有語意結構。因為數位工具提供的輔助功能，製作內容上使得語意結構為必須。同時必須考量在過去物理環境下可以透過額外修改（例如剪貼、使用立可白）做到的呈現結果，如何在數位環境中透過機制來提供擴張性。
最後，如何讓這機制能夠開放地供所有人使用。
我覺得這是在數位時代所需要的思維。僅供各位參考。
[1]: 從2013年6月4日參與W3C在東京舉辦的數位出版工作坊開始算起。這裡有當年提出需求的投影片。
[2]: 請見Github Repo：Bopomofo on Web
[3]: 舉個中文破音最多的字「和」，發音有「ㄏㄜˊ」、「ㄏㄜˋ」、「ㄏㄢˋ」、「ㄏㄨㄛˋ」、「˙ㄏㄨㄛ」、「ㄏㄨˊ」。
[4]: 想了解更多，可參考：HTML5 Accessibility Chops: the figure and figcaption elements
[5]: NCC的網站無障礙規範來自W3C的WCAG: Web Content Accessibility Guide，但對於Web上的無障礙還有更多規範，請見WAI。
[6]: 可參考Wikipedia上的通用設計條目。
[7]: 這個想法來自維基協會理事張正一在推動漢字動態組字時的討論。除了將漢字編碼到Unicode之外，還有顯示「誤字」與「自造字」的需求。
