值得紀念的日子,中文網際網路終於有排版規範

2022-01-31 愛範兒

瀏覽中文網站的時候,心情往往不會太好,擠在一起的字,忽閃忽閃的小動畫,無處不在的連結,影響著閱讀體驗。就「排版」這件事情而言,無論紙質書,還是中文網絡,都遠遠落後於同樣書寫方塊字的日本、韓國。

CatchChat 的 CEO 周楷雯此前跟我感嘆網絡上,中文排版規範的缺失。此前他內測新作品,縱版日記 app 「小記」,在開發過程發現找不到相關的標準可以參考,結果只好先參考了日文的網絡排版規範。

不過,昨天早上有名的關於文字設計和視覺文化的網站 Type is Beautiful 發了一條微博說,「W3C『中文排版規範草稿出爐』。編輯包括特邀專家董福興、陳奕鈞、梁海。」

W3C 是 1994 年由「全球資訊網之父」蒂姆·伯納斯-李發起,於麻省理工學院計算機科學實驗室成立,是 技術領域最具權威和影響力的國際中立性技術標準機。由它所制定的 HTML、XML、CSS 等等。根據 W3C 中國官網,2006 年 W3C 也正式來到中國,在北京航空航天大學成立辦事處,推動新興 Web 標準在國內的推廣、應用。——由 W3C 撰寫的《中文排版規範(草稿)》,是中文網際網路世界對中文網頁排版的權威參考標準。

這份《規範》著重解決中文網絡排版的那些不夠標準的問題?可以參考 W3C 的《在 Web 和數字出版中優化文字排版》文檔:

分別文字和詞語的邊界;

斷行;

斷字;

對齊和定位;

原始碼格式的空格和縮進;

字母轉換;

字母空格;

段落特性;

首字母樣式;

雙向文字;

基準線;

豎排文字;

豎排文字和橫排文字混排;

Ruby 標音;

Line Decoration;

著重標記;

字體;

計數器,列表,等等;

筆記,腳註,等等;

頁碼,頁眉,等等;

頁面布局;

其它「文化-規範」問題。

中文排版問題可能要比上述所表明的問題更加複雜。由於歷史發展原因,中文被分成繁體(在港臺地區又稱正體)、簡體兩種書寫規範,標點符號規範也分為兩套,而中國大陸以外的地區還保持豎版排版的古風,若要用一套標準全部兼容,這的確是浩繁的工程。

根據 W3C 中國成員吳小倩在「HTML5 中文興趣小組」的郵件列表所發布的郵件,W3C 中文排版規範(草稿)的撰寫時間將近一年時間。

而根據吳小倩發送的「中文排版規範編寫計劃和進展」郵件可知,W3C 中文排版規範(草稿)由 2014 年 3 月 5 日開始編撰。根據郵件內容「過去幾個月中,我們非常榮幸邀請到以下的專業人士參與這份規範的編寫」,可見《規範》從籌備到出爐,耗時或者長達一年半。該郵件還表明,W3C 中文排版規範是通過 GitHub 寫作,共同撰寫完成。

特邀專家董福興是臺灣「汪達數位出版所」的創始人,臺灣數字出版的先鋒人物。2014 年 9 月 21 日,他在個人博客上發表了一篇題為《如果你在乎中文》的文章,闡述中文網頁排版當下所遭遇的問題,以及向網友募捐,籌集資金前往美國加州 Santa Clara 參加 W3C 的年度專家大會 TPAC 2014,以及由 Internet Archive 舉辦的「Books in Browser」研討會,繼續跟進「中文排版規範」的進度,以及通過實際交流的方式,解決中文在網頁排版上遭遇的技術困難。

陳奕鈞的公開資料不多,他開發了名為「漢字標準格式,一個提供漢字網頁排版框架,支持各種印刷效果包括相鄰文字裝飾線跳脫、漢字標音、著重號、標點符號修正、中英文混排間隙、漢字擠壓以及章節調整。根據 GitHub 上的提交記錄,最新修改在 2015 年 3 月 26 日。梁海是知乎上的名人,在字體排印的專題下貢獻了許多高質量的回答,他也參與了這次《規範》的撰寫。

W3C 的《中文排版規範》對於中文網絡世界有著重要的意義。它可為將來的創業者、產品開發人員提供一份權威性的參考性文件,保證中文網頁、中文 app 基本的美感。

然而,W3C 出具一份《中文排版規範》,不代表中文網際網路世界的排版水平就有所提升。與霍炬一同幫助重建 FT 中文網系統,以及幫助紐約時報中文版設計了數據和信息架構設計師西喬說,「國內(中文排版)情況糟糕主要是因為對這事不在乎。」大陸地區無論是產品開發者,還是產品使用者,多年來對「排版規範」的無視,才是中文網頁、中文 app 排版質量糟糕的根本原因。

不過,隨著中國網際網路、移動網際網路產業競爭日益激烈,大眾審美意識的增強,產品設計將越來越受重視——這其中就包括了影響基礎閱讀體驗的中文網絡排版。國內不少人都注意到這個問題,不約而同開發了相對應的漢字網頁排版框架。除了陳奕鈞開發的外,包括業內有名的前端開發者 Sofish 開發 Typo.css,另一前端工程師 MZhou 開發的 Entry.css,均為靈活、遵循中文排版規範,兼顧閱讀體驗的中文樣式庫。

除此之外,越來越多網站注重中文排版的視覺效果,簡書是其中一例,中文排版美觀、大方,閱讀體驗上佳。創始人林立本身十分注重排版的體驗,曾在《我對深度閱讀、專注寫作和自出版的看法》(連結已失效)寫道:

我們精心設計了這個頁面所選用的字體,以及各種格式的排版。很多人問我,為什麼簡書的正文選用了宋體,標題選用了楷體?確實,中文網際網路中的主流字體是黑體系,但黑體系是偏現代氣息的,而宋體和楷體是具有古老的文化氣息的,更顯優雅,所以簡書採用了宋體和楷體而不是黑體。

另外也不得不提 Type is Beautiful,這大概是國內第一個專注介紹中英文字體、排版知識的網站,網站本身的排版足以成為中文其它網站的教科書。

實際上,從林立的回覆來看,中文網頁排版的美觀與否,與中文字體有很大的關係。西喬說,「我覺得(中文網絡排版)的平靜是缺少足夠的中文 WebFont。英文的字體已經有上百種了,算上變體有近千種選擇。所以(英文網頁)表現上完全沒有限制,即使最簡潔的設計,單通過字體的組合已經能夠表現得很好的層次感和設計理念。中文的話,除非花點代價嵌入字體,不然基本是沒什麼選擇。」

WebFont 「是一種讓網站能夠使用更多字體的雲服務,當訪問調用了此服務的網站時,瀏覽器會自動在後臺下載相應的字體並顯示到網站上,使網站的設計可以不再局限於乏味的系統預裝字體。」

以中文 WebFont 來看,較為成熟商業化運作的項目,有臺灣的 JustFont,只可惜它在大陸之外。
回過頭來,W3C《中文排版規範》的出爐對於網際網路業界始終是一件意義深遠的事情,這是中文網絡排版從 0 到 1 的跨越,而從 1 到 100,則看後來者的努力了。

補充:以下是陳奕鈞對愛範兒的回覆,引用部分為提問

W3C 《中文排版規範》是從何時開始起草,誰是主要推動者?

《中文排版規範》從去年三月開始,由 W3C 的吳小倩負責組織,找來了各路的排版專家及開發瀏覽器的程式設計師共同討論,確立了方向後便在 Hackpad 上開設帳號,用共筆的方式討論、撰寫正文,最後才收入GitHub 專案中管理。很感謝 Hackpad 這個強大的工具,讓分散各地的我們都能無時差地共同編輯,實時看到彼此熒幕上的修改,避免了許多重覆的工作。

繁體中文的部分源自董福興的《tCLReq》(說是繁體中文,其實整個《中文排版規範》都是「fork」自這分作品),因為某些原因無法作為標準在臺灣推行,董福興便放棄了版權,將其提交給 W3C,成了 CLReq 最初的架構。

你覺得 W3C 《中文排版規範》主要解決中文網絡排版的什麼問題?

這裡的「網絡」應該改作「全球資訊網」,這才是 W3C 組織主要管理的核心。

實務上,這分文件暫時應該解決不了什麼問題。它主要的目的,是將過去出版社裡的美編及排版師傅「口頭」傳授的、可能是 de facto 的排版規則整理起來,好讓新的入門者能有完整、得以參照的「書面」資料;再來,是讓 HTML、CSS 等技術的標準制定人及瀏覽器開發者們,能透過這分文件知曉中文有什麼排版上的需求尚未被滿足,從而改進;最後,讓內容編輯者可以使用一行 CSS 屬性,實現標點擠壓、漢字標註拼音(我們叫它「行間注」)等目前在網頁上還有困難、但印刷品上已使用多年的效果。

除了網頁、電子郵件外,使用 EPub 格式的電子書最終都能因這分文件受益。當然,任何傳統媒介的排版,如紙書等,都可以參照《中文排版規範》。

請問一下你的職業是什麼?因何而參與到 W3C《中文排版規範》中去?

我過去幾年一直關注網頁及瀏覽器的文字設計(typography)與排版問題,後來開發了漢字網頁排版框架「漢字標準格式」(Han.css),對這個議題算是小有研究,被真正的專家梁海及小倩拉入編輯《中文排版規範》。

與日文、韓文相比,為何 W3C 的《中文排版規範》直到今年才有草稿出來?

韓文部分我不太清楚,但《日文排版規範》已起草多年,它基於日本相應的國家標準 JIS X 4051,這分國家標準最後修訂於 2004 年,W3C 的《日文排版規範》應該也是眾多語言中最早的一分排版相關文件。

中文方面,如前所述,無論在大陸或臺灣,都沒有相應的國家標準,連參考書目都很少,許多設計師的口頭規則可能都來自日文排版規則(尚在使用漢字的地區中,日本的排版應屬最講究的)。外加中文還有繁、簡二大分支要處理,可能因為這些原因,使得中文的腳步稍慢了些。

有朋友提過,中文 WebFont 的缺乏是中文網頁缺乏表現的原因,你覺得是不是這樣呢?

我認為扯到中文 Web Font 是言之過早了。各個作業系統上,幾乎都沒什麼高質量的中文字體。「全部的西文網頁都用 Helvetica 是設計師太無趣的問題,全部的中文網頁都用中易宋體則是電腦的問題」——我想應該是這個道理。首先應該要求蘋果與微軟等公司在桌面、手機平臺上提供好的中文字體,並改進字體渲染技術。 Google 與 Adobe 合作開發的 Noto Sans CJK/Source Han Sans 是個好的示範和開始,希望未來會有更多種類的平臺預裝字體讓設計師和使用者來選擇,如宋體、楷體等等。

PS:

關於網頁的中文排版,推薦大家看董福興的這篇《簡單做好中文排版:十項讓長文章更容易閱讀的原則》。

相關焦點

  • 基於 Markdown 的中文文檔排版規範
    0 前言 相信閱讀本文的讀者一定有被 Markdown 靈活的寫作風格搞懵過,不知道怎麼寫更優雅、更規範,那麼本文就是來幫您梳理 Markdown 寫作過程中常見的一些問題,然後給出一個建議的應用規範。通過閱讀本文,相信你一定可以基於 Markdown 寫出更加優雅的中文文檔。
  • 回顧《中文排版需求》
    — 2013 年 IPDF EPUB3 東京會議我大致上花了一年的時間,從把《中文排版需求》翻譯成中文開始,加上整理在郵件群組裡的討論,再到圖書館確定過去鉛字時代書籍排版的作法,加上詢問老貓等老編輯的意見,終於整理出針對繁體字排版的初稿
  • 寫給大家看的中文排版指南
    本文旨在幫助普及、提升大家對文字排版的認識,讓大家在平時的學習工作中能有更專業的文字排版素養。必看人群:設計師、編輯、作家、撰稿人、教師、學生目錄:1.中文排版1.1 引號1.2 省略號與破折號1.3 行首行尾禁則2. 西文排版基礎2.1 西文撰寫基礎2.2 西文標點相關2.3 斜體的用法2.4 大小寫的區別3.
  • 微信公眾號編輯排版規範
    導讀:本文整理髮布「微信公眾號編輯排版規範」,力求幫新手編輯最大程度加快入門速度,提高工作效率。來源|插坐學院(ID:chazuomba)優秀的公眾號,既要會做內容,還要懂如何編輯。編輯工作就是把文章打磨成適合讀者的產品,用合適的方式,呈現給讀者。
  • 公眾號排版規範手冊
    對於運營者個人來說,排版是工作考核指標,是每天編寫文章時必須要配套掌握的技能,提升了排版技能可以立竿見影地提高工作質量和效率,在領導和同事那兒效果非常明顯,還能幫你每天可以節約半個小時以上時間,所以值得專門學習提升一下。
  • 這裡有一些CSS中文排版技巧,值得收藏!
    在CSS網頁布局中,排版是一個麻煩的問題。作為一個優秀的網頁設計師和Web前端開發人員,掌握一些簡單的中文排版技巧是不可或缺的。所以今天小編特意整理了一些簡單實用的技巧,希望對大家有所幫助。我們可以使用css樣式為網頁中的文字設置字體、字號、顏色等樣式屬性。
  • 公眾號排版規範手冊(2019版)
    對於運營者個人來說,排版是工作考核指標,是每天編寫文章時必須要配套掌握的技能,提升了排版技能可以立竿見影地提高工作質量和效率,在領導和同事那兒效果非常明顯,還能幫你每天可以節約半個小時以上時間,所以值得專門學習提升一下。
  • 中文排版標準指南
    很遺憾,中文網際網路充斥著大量排版醜陋的文章。希望大家能把以下這些基礎的中文排版技術應用在實際的工作與生活當中,從微小處改善混亂的中文排版現狀。標準化的中文排版可以提高公眾號或博客的美觀度與可閱讀性,也能減少排版的用時。
  • 不會排版?先弄懂這些基礎規範(入門須知)
    經常有童鞋在後臺發截圖文「插坐菌,這張圖裡的版式是那個編輯器的?」「多大的行間距比較好哇?」既然大家都願意在排版上花費工夫了,那今天咱們就從最基礎的排版細節來和大家聊一聊這事兒,希望大家在工作或者學習中有更加專業的排版素養。必看人群:設計師、編輯、作家、撰稿人、教師、學生1.
  • 一個美觀實用的中文排版開源項目
    關注我的兄弟中,有不少人的博客是直接用
  • 中文排版的最大迷思——標點懸掛
    LIU 在上篇文章《「中西之別」重考》的導語裡,筆者曾插了一句「中文排版不僅僅是『標點懸掛』那樣的小技巧」而沒有具體展開。其實,正如導語所述,中文排版需要的是一個有設計邏輯的系統,而標點懸掛僅僅是其中的一項,頂多只能算是優秀中文排版裡的一個「充分非必要」條件。近年來,隨著電子閱讀的發展,中文排版再次引起眾人的關注,其中也包括一些非設計行業的工程師和愛好者。
  • 英文的編排規範有哪些
    英文的編排規範有很多,其中有些規範並不規範,但在業內普遍接受。這些看似簡單的小細節,卻也不能忽視。一、排版的版式英文排版的版式有多種,這裡主要介紹以下兩種。1、段首頂格排版式樣。段與段間要空一行,以示另段。
  • 好的排版,一定是順應人性的排版(一篇看懂微信排版)
    導讀:現在無論是微信文章還是其他場景,面對沒有排版的文字,都會瞬間失去閱讀興趣。這篇文章將從文字、留白、圖片、引導幾部分來寫。先來說說排版的作用。前段時間我發了條朋友圈:有哪些東西是你一旦知道,生活就從此回不去了的?審美。
  • 移動端文字與排版設計的六個原則
    在印刷與桌面端Web的傳統領域我們有很成熟的文字排版經驗,在移動時代,這些經驗很多依然有效,但因顯示設備與使用環境發生了變化,也給帶來了不少變化
  • 中文排版的最佳實踐
    Requirements for Hangul Text Layout and Typography 倒還好。我本人還在編寫 Requirement for Chinese Text Layout 的草稿。在我完成這個文檔之前,先給大家十條法則,幫助你更好地做中文排版。1.
  • 『Win』排版必備神器,論文、標書、報告、公文等規範文檔
    一、軟體介紹小恐龍公文排版助手:一款支持word、wps的排版插件,論文、標書、報告、公文等這些文檔,使用這個插件非常的方便。支持對文字的快速排版,中文首行縮進2字符、刪除空白,斷句重排等。支持對文檔蓋章、可以在文檔同目錄下生成 PDF/ doc /圖片 格式的副本,可廣泛用於各類規範文本的排版。一鍵排版,排頁碼完全免費。根據《黨##政##機##關##公文格式國家標準》(GB/T 9704—2012)的格式要求,快速設置頁面版式、快速設置常用文字格式、插入常用符號、版頭、版記、公文頁碼、紅##線等。
  • 優秀的中文文案排版應該注意哪些
    這是一篇關於講述中文文案排版規範的文章,來自作者的優秀案例參考和日常總結。統一中文文案、排版的相關用法,降低團隊成員之間的溝通成本,增強網站氣質。目錄-ms-text-autospace to the rescue?
  • 動感時尚方正規範的中文字體-卓健橄欖簡體
    該套字體含有共計7050個中文漢字,52個英文字母,139個阿拉伯數字及常用標點符號。字體特點「卓健橄欖簡體」整體接近方形,長寬比例約為1:1,使得字體在視覺效果上方正穩重,大小相同且方正規範的字形讓字體更利於排版。
  • 有了這些「小符號」,讓你的排版 6 到爆 ~
    02  文字使用規範(版權所有©A1ter)很多人長這麼大了,都還搞不懂什麼是聲母韻母。這文字使用規範,就好比文字的編排基礎,文字的使用要遵從的官方標準。用好了,會讓你的文字看起來特別舒服,要是沒掌握好,就會導致你的文字不倫不類。哼哼(裝腔做調狀),下面公子就好好地給大家講一下這文字使用規範。
  • 回顧2016最值得紀念的相機
    但好在也有不少驚喜和讓大家喜聞樂見的產品出現,特別是微單市場又迎來一次新的洗牌,讓戚其偉老師帶我們一起回顧2016最值得紀念的相機。戚其偉尼康D500五軸防抖就是由奧林巴斯首創,從此只要你有奧林巴斯相機的機身就帶有防抖功能,而且PRN F的復古設計日本相機無人能及,歷來江湖就有奧巴無狗頭的說法,拿到奧林巴斯也就知道了什麼是精緻的代名詞。哈蘇和富士中畫幅無反相機