文字设计和视觉文化

用印刷品的态度来做 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

4 个Trackbacks

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

  2. […] 〈用印刷品的态度来做 Web 排版〉,Ethan 撰于《中文排版需求》第一版编辑草案发布后 […]

  3. […] 〈用印刷品的态度来做 Web 排版〉,Ethan 撰于《中文排版需求》第一版编辑草案发布后 […]

  4. […] 陈奕钧:用印刷品的态度来做 Web 排版 […]

参与讨论

你的Email地址将不会被发布或透漏。 标记*的项目为必填项目。

*
*

作者 / 译者

陈 奕钧

「汉字标准格式」开发者,W3C《中文排版需求》特邀编辑。
Twitter

最近文章