文字設計和視覺文化

用印刷品的態度來做 Web 排版

Hero of Han.css

CSS 是近代最重要的排印革新之一。只要文檔以足夠「語意化」的結構保存,便可以利用不同的樣式規則呈現不同的樣貌。我們不再需要手動地排列、拉扯文字,而是透過 CSS 下指令,讓排版引擎遵守。

也許因為媽媽字寫得美,我從小便嚴格自我要求書寫的規矩,就算是課堂的筆記,沒寫幾個字,發現前一行的字稍有不對齊或大小不一,便偏執地想把整張紙撕了重寫。也因此,在我初了解了 Web 的運作方式時,帶來的震撼和共鳴是非常強烈的——文字居然可以不帶樣式地保存,再利用「標記」為不同層級、不同意義的文本來設計相應的樣式——從此解脫了我們這些字寫得不好但又完美主義的偏執狂。

長得丑沒關係,有 CSS 就能搞定一切。

在瀏覽器上hack複雜排版

漢字,或者說各種語言、文字,自古而今或獨立或相互影響地發展出了其獨特的書寫和排印方式。現時的萬維網標準,甚或專業的排版軟體,尚無法完好、正確地支援這些特性。

深入研究CSS及JavaScript後,我發現在Web瀏覽器上也能實現一些複雜的排版功能。Web標準尚有不足,瀏覽器開發曠日廢時,為了能讓更多人早日在Web上使用高級的排版特性,我將自己實現的排版功能集成並開源為「漢字標準格式」。

起的標語是「印刷品般的漢字排版框架」,正是希望用對待印刷品的嚴謹態度在瀏覽器上排版。但並非全然模仿印刷品的排印方式,比如網頁以捲軸呈現內容,當然更加適合以空行而非段首縮進來區分段落。

雖然不可避免有點骯髒的hack,「漢字標準格式」總體還是可以使用的。較大的項目,比如《萌典》,較小的比如日本推友的部落格都使用了漢字標準格式。若你的項目涉及中文排版,無論繁簡,請考慮嘗試它。

最近,我又為漢字標準格式加入了兩個我認為最重要的功能——行首/行尾標點擠壓行尾點號懸掛。實作的方式與現有的百度閱讀、多看閱讀等電子書閱讀器的Web版本很不一樣,有興趣的開發者可以在GitHub上參考我的源代碼

這也是一種「政治」理念

《內核恐慌》節目錄音時,主持人李如一問我:「是否希望藉由漢字標準格式這個框架傳達個人在政治上的想法?」

當時我有點緊張,回答得太官腔。我本身很關注、也熱衷談論政治,我的Twitter內容十有八九與政治有關。但設計漢字標準格式時,我儘可能地避開爭議,包括示例節錄的文字都「自我審查」。這個排版框架預設提供了繁簡中文與日文的排版樣式,便是希望最大程度地符合各種使用者的閱讀習慣(只是礙於個人精力,無力維護多個語言文字的使用手冊)。避開了個人的政治偏好,尋求更加政治正確的、求同存異的政治理念,這也是一種政治理念。

同時,這個框架也包含對當前官方規範的不足所進行的補充和微小的抗議。許多簡體漢字用戶也會同意,來自英文的彎引號並不那麼適合漢字。又比如我儘可能不去使用為許多繁體漢字用戶所不滿的楷體化「國字標準字體」(字形)。

台灣教育部的《標點符號手冊》過去規定波浪底線(﹏)作為書名號。但近期的修訂版中,加入了(但並非以之取代)大陸的尖角引號(《》〈〉),稱作書名號乙式,並訂立了更細微的語意劃分。台灣官方突然認可了大陸的標點規範嗎?真正的原因是這樣的——這個符號最早由台灣的出版業自簡體書籍中引入,被大量使用、無所不在,除了教科書都在使用它,最後才為台灣教育部所接納。

我們骨子底都樂見規範的出現,希望做事有跡可尋。當人們激生了新的需求,規範也相應地需要改進;當規範不那麼完美時,請顛覆它,創造更好的規範。

是「規範」還是「需求」?

我有幸參與了CLReq的編寫。對於CLReq的主要目標受眾——「萬維網標準制定者」來說,這是一分中文排版的需求書。它詳舉了各種漢字獨特或不獨特的排版需求,以便未來的排版語言能以正確的處理方式支援中文。

但其實過去一年編寫這分文件的時間裡,我一直以「中文排版規範」稱呼它,後來才更正為「中文排版需求」。用了不確切的名稱,希望大家見諒。然而回想起來,我們每位參與的編輯,一直是以「需求整理」為方針在撰寫這分文件。整分文件幾乎看不到幾個「必須」,多是用「可以」來指導讀者,遇到各類狀況適用的處理方式。

對於排版或Web初學者來說,要稱CLReq為規範其實也沒有太大問題,比如JLReq因其完善的內容成為日文排版的教科書。但此處要注意,CLReq推薦的作法,並非要強制遵守的。

在不違背易讀性的原則下,排版更多是一種對品味的追求,對讀者關懷的展現。參照CLReq,是因為你認同它,而不是因為它是(在空氣中打兔子引號的)規範或標準。[1]

繁簡之爭

蔡志浩老師曾說過,無論是簡體中文還是繁體中文,二者都是當代的、有效的、正在被無數人使用的文字,毋須爭論何者為正統。

繁、簡中文很相似,但又有不同的問題和需求。CLReq通用於繁簡漢字,對於二者不同之處,我們儘可能詳細地描述;相同的地方,便不刻意區別。[2]

部分僅適用於其中一方的需求若佔了較大篇幅,僅僅是因為它們更加複雜、更加「難搞」。絕非編輯的個人或地緣偏好。(秘辛:寫行間注注音符號一節的編輯其實最討厭注音符號了。)

我們只是打上引號的專家

多數CLReq的編輯們不是W3C會員組織的成員,更不受雇於W3C。為了便於為W3C提供CLReq的工作成果,才冠上了「特約專家」的「頭銜」,並非我們個人的經歷或專長受到W3C的推崇。[3]

編輯們因為興趣聚到一起工作,我們只是打上引號的專家,研究成果還需要真正的專家來檢驗。有任何問題,都歡迎到CLReq的GitHub專案上討論。

本文在Type is Beautiful網站上以「漢字標準格式」對排版進行優化,包括中西文間隙、標點擠壓、標點懸掛以及着重號等特殊樣式。

註:

  1. CLReq當前(2015年)仍是分草案,許多內容及圖例尚未完成,盡信書不如無書,請以閱讀維基百科的方式來閱讀它。
  2. 許多朋友很關心有沒有簡體版本的問題,事實上,目前CLReq草案是繁簡併存的,由於整體架構由董福興起草,繁體字較簡體為多,且當前文件的內容也一直在增補,不適合在這個階段區分多個版本。待今年(2015年)年中大致完成定稿,便會發布繁、簡二個版本,這完全是計畫中的事,請不必擔心。
  3. Invited Expert and Collaborator Agreement – W3C 

尊重原創:關於轉載

我們希望在中文環境中建立一種健康的 TrackBack 和鏈接機制,保證原創,並不影響傳播。因此對於譯文和原創文章,我們歡迎您在網站上推薦我們的文章,包括文字和圖片片段,但不贊成任何形式的全文轉載。
參與討論或通過 TrackBack 推薦:Trackback URL.

9 個相關討論

  1. alsacegustav
    2015/05/08 at 4:20 pm | Permalink

    就“草案”所提及的規範,現在是否有合適或者推薦的編輯器來實現?
    比如着重號,在常見的web editor都難見其蹤。

  2. realfish Q.
    2015/05/08 at 5:36 pm | Permalink

    CLReq 提出的主要是中文排版「需求」,目前通過平面設計工具(例如 Adobe InDesign)大多能很好地實現。

    但 CLReq 這個「需求集合」中的很大一部分,當下的主流 web 瀏覽器都還無法通過 CSS 來完整地實現。因此以 web 技術來實現的「所見即所得」(WYSIWYG)編輯器,通常很少去自主實現它們——一方面實現它們的複雜度較高,瀏覽器兼容性則可能相對較差;另一方面或許是因為市場需求暫時還不夠強烈,開發者沒有足夠的驅動力。

    陳奕鈞開發的 Han.css 是一個很好的 polyfill,理論上,其中的一部分特性也都有可能集成到一些成熟的 WYSIWYG web 編輯器中。

  3. Chen Yijun
    2015/05/10 at 8:42 am | Permalink

    讓W3C標準製定者能夠知曉中文的需求,從而在CSS或HTML中加入相應的屬性,使瀏覽器得以統一實作,最後讓網頁開發者可以使用——《CLReq》是為這個目的編寫的。

    如realish所述,現今CSS Text Level 4尚在修訂,各語言的排版需求也仍在編寫。着重號直至目前為止仍只在WebKit系的瀏覽器上有實作,當然更別提所見即所得類的編輯器了。

  4. 2015/05/12 at 7:36 am | Permalink

    注 2 中有別字,“計畫”應為“計劃”。

  5. Chen Yijun
    2015/05/12 at 8:43 am | Permalink

    畫與劃(畫與劃)多數時候通用,寫作「計畫」亦可,請見:

    http://www.zdic.net/c/1/f0/248723.htm
    https://www.moedict.tw/%E8%A8%88%E7%95%AB

  6. 2015/05/12 at 3:39 pm | Permalink

    原來如此,長見識了,多謝!

  7. LIU feng
    2015/07/20 at 3:37 pm | Permalink

    太好了~終於看到web上有跟印刷一樣精美的排版~ 作為一個使用中文的人來說,這是一件多麼重要的事情!感謝你們的努力,讓這個中文世界變的更加美好~

  8. lalala
    2017/02/07 at 2:44 pm | Permalink

    “整分” ?還是 “整份” ?

  9. 陳奕鈞
    2017/02/08 at 12:03 am | Permalink

    @lalala

    表示「整體中的一個單位」時,分、份互通,請見:

    https://www.moedict.tw/分
    http://www.zdic.net/z/15/js/5206.htm

5 個Trackbacks

  1. […] https://www.thetype.com/2015/05/9230/ […]

  2. […] 〈用印刷品的態度來做 Web 排版〉,Ethan 撰於《中文排版需求》第一版編輯草案發布後 […]

  3. […] 〈用印刷品的態度來做 Web 排版〉,Ethan 撰於《中文排版需求》第一版編輯草案發布後 […]

  4. […] 陳奕鈞:用印刷品的態度來做 Web 排版 […]

  5. […] 用印刷品的態度來做 Web 排版 […]

參與討論

你的Email地址將不會被發布或透漏。 標記*的項目為必填項目。

*
*

作者 / 譯者

Avatar photo
「漢字標準格式」開發者,W3C《中文排版需求》特邀編輯。
Twitter
最近文章