185e611313692d2d566755bff64ff514
字体排印入门(下)- 简单做好中文排印

字体排印入门(下)- 简单做好中文排印

上周我们介绍了字体排印的入门知识,本周我们推荐一篇由台湾同胞董福兴写的〈简单做好中文排印〉。

董福兴是 WANDERER 数位出版创办人,W3C 邀请专家。目前正在撰写 W3C i18n 工作小组〈中文排版需求〉文件。也是 EPUB 3.0 格式之专家,提供电子书制作工具、编辑流程顾问与制作技术教学等服务。

我在原文的基础上做了部分翻译调整,以下为正文。


本文最初以英文发表于 Medium,主要是希望给外文圈的朋友在进行 Web 与 App 等内容服务中文地区化时,能够提供较好的文字排版呈现。在吴逸文、许翰文等设计圈的朋友催促下,以中文重新书写,删除部分“对外”的用语,并且加上一些额外的资讯,希望对中文圈也能有所助益。

东亚对于全球化的互联网服务来说,进入时会遇到几道墙壁隔离,第一道就是语言的屏障(然后你会遇到中国伟大的「墙」)。中文、日文、韩文有着不同的排版规则,目前在 W3C 的参考资料中,日文排版需求是最为完整的文件,但是大概长到很难读完;韩国的谚文文字排版需求则是份量刚刚好。至于中文,我目前还在撰写草稿。 在我写完前,先整理出十项简单的原则,作为做好中文排版的参考。

一、注意标点的不同

无论你有没有安装额外的字体,各操作系统中有汉字的字体数量不在少数,有些是简体、有些是繁体、有些是日文。感谢 Unicode 早期的中日韩越统一表意文字规划,这些字体大致上有着相当的共通性。

但问题在于,日文、繁体中文与简体中文的字形( Glyph )不同,加上每种字体只会造出针对该种语言常用的汉字,常会发生缺字而降级显示为( Fallback )其他字体的状况,会使得文内的字体不一致而打乱阅读。所以,从一开始就选对字体相当重要。

那么,要如何判断一个字体是简体与繁体呢?

很简单,输入一个全角的逗号与句号,套用你所要的字体,若这两个符号位于正中央,就是繁体中文;若像日文一样落到左下角,就是简体中文。若要进一步区分简体中文与日文字体,可以输入日文没有的汉字,例如「启( U+555F )」,若无法正常显示,就是日文字体。

最后,如果没有特别的原因,中文原则上都使用全角标点。

▲ 繁体与简体标点的位置不同

补充说明:有朋友来信询问这一段的叙述。标点符号位置只是用来判断简体字体与繁体字体的简单依据。并非繁体字一定要使用居中标点才正确。

二、使用正确的系统字体

更进一步,你可以在 App 的本地化设置或者 CSS 中指定对的系统字体。我常看到许多产品只做好日文的本地化,例如说仅使用 OS X 与 iOS 中的 Hiragino Mincho 来做正文的字体,这会产生许多问题:

  • 标点不符合繁体中文规则。
  • 前面所提缺字会让正文遇到一些字时显得坑坑疤疤,就像加密邮件一样。
  • 台湾、日本、香港、中国使用的字形不同,最好都能用该区域的标准字。

▲「角」字简繁之间有字形差

下面是 OS X / iOS / Windows 与 Android 系统中的中文字体,你可以据此选择正确的字体。某些字体只预装在新版系统上,而在 iOS App 上并没有,可能要做些额外的工作才能从Apple下载这些字体使用。

▲ 各操作系统中文系统字体列表

对于 Android 来说,Droid Sans Fallback 这套系统字无论对中日韩文来说都不大及格,如果希望达到较好的排版效果,建议使用开源的「思源黑体」但下载任何有汉字的字形都要花上不少时间,除非预先 Subset 来轻减。你也可以使用一些动态 Subset 的Webfont服务(如 iFontCloud ),或者干脆忽略 Android 系统😔。

补充说明:在 HTML5 中可以用 lang 属性设定网页语言,中文的代码是 zh,过去常用的是 zh-hant 与 zh-hans 来区分简繁体。但我更建议使用 zh-TW、zh-CN、zh-HK 来加上地区。虽然现在没有显著的差异,但香港的粤语造字未来可能从繁体中文中分离,加上地区描述未来可能会用得上,且向下兼容。

三、适当的行距

不只是行距,字号(字体大小)也是个问题。但我没办法告诉你字号要多大才是对的,毕竟现在屏幕尺寸与 DPI 差距颇大,但绝对不能以排英文的方式来排中文。活字印刷时代,正文常用的字号有两种,一种是五号字,就是10.5pt(3.7mm),另一种是新五号,就是 9pt(3.18mm)。正文字号尽量不要小于9pt。这里请以适当的大小自行计算,毕竟屏幕与书籍是不同的。

但是行距有着正确的数字,一般而言中文行距介于 1.5 到 2em 之间,通常只要指定:

p {line-height: 1.7em;}

就能得到适当的行距。

四、对齐是万能的

▲ 传统的活字印刷

这张图片是古老的中文活字印刷,从中可以显现出中文排版的重要原则:所有的文字都是方形的。

但是从二十世纪开始使用标点后,一直到了现代桌面排版时代,许多排版工具软件都直接套用来自日本的 prohibition rules「禁则处理」规则 — 即不允许句号、逗号等标点符号出现在行首;加上与西文混排的状况越来越多,以至于无法做到基本的横竖对齐。

但是至少段落的头尾还是需要对齐。这就是为什么对齐对电子书与长文来说十分重要的原因。

你可以使用以下CSS样式:

p { 
    text-align: justify; 
    text-justify: ideographic;
}

这会让中文排版瞬间变得漂亮许多。

五、不要用斜体

中文的书写、印刷历史中,从来都不存在「斜体」。拉丁文字中所称的「italic」主要是指「手写体」,但在中文传统中,手写体就是书法字,更贴近「Cursive」的定义,无论楷书、行书、草书都该属于这类别。

▲ 于右任草书

但到了数字时代,硬套用拉丁文字的 italic 到中文上才开始出现了斜体字,这斜体字称为 oblique ,也就是强制转斜。这并不是个好作法。但在HTML中,有许多标签默认就会强制把字转斜,若发生这种状况,就会需要利用CSS来更正:

em { font-style: normal; }

若你要使用<em>强调单字时,可以加粗、改成黑体、加底线或强调点,但就是不应该用斜体。

六、段落区隔

段落区隔对于中文而言相当重要,有着两种方法:

1. 书籍样式

在中文书籍中,一般段落之间除非有其用意,不然不会加入空行或者间隔来区分段落,而是使用两个全角空白(杂志等窄栏时使用一个)来缩排做出段落区隔。在分页的情形下,换页时也能轻易地看出段落区隔,CSS的写法是:

p { 
    margin: 0; 
    text-indent: 2em;
}

日本电子书业界则是常用全角空白(U+3000, ideographic space)来取代text-indent。这可以避免在不同环境下都能有相同的表现,并且对齐得更适当。遇到一些阅读工具,像是 Safari 浏览器的阅读器时,也不会因为CSS被取代而让缩排消失,这种方法可以保持。

2. 网页的样式

人们在网页上阅读速度较快,像书本一样版面会让字排得过于密集从而产生压力,通常使用 margin-after(或 margin-bottom )来分隔段落:

p { margin-after: 0.5em;}

虽然段落间要以多少空白区分没有定论,但建议介于 0.5 到 1em 间,不要加入太多空白为佳。

七、楷体更像书籍

一般中文正文常用 serif 字体,像是明/宋体。虽然 sans-serif 字体更现代,但在印刷书籍的世界里,却鲜少看到。

▲ 传统印刷书使用楷体的状况 出处:大块文化《叶嘉莹作品集》

而一般中文印刷书中的:摘要、摘句、引言、对话、独白、诗词等,都会使用楷体来表示。所以若要让文章读起来更像印刷的书籍,使用楷体会是不错的办法。

当然啦,使用黑体也是能令人接受的。

八、避头点规则 VS Break-all

对齐( Justification )是让文章符合中文排版原则的数字方式,但这方法不是时时完美。有一个简单能够重现的问题:

▲ 对齐拉宽字距

▲ Break-all 强制对齐

  1. 在杂志排版的窄栏,或者手机屏幕上;

  2. 在中文字中有着一个或多个长的拉丁字;

  3. 使用两端对齐。

就会看到如图中的样貌,字距被强制扩展,甚至超过一个字。这不仅出现在浏览器上,桌面排版工具亦然。

有个简单的处理方法,只要加上:

p { word-break: break-all; }

就能改善许多。但这种做法会让西方文字被强制切断,不甚完美。同时也会无视避头点规则,让逗号、句号出现在行头,繁体中文可以接受,但不能用于简体。

为什么?因为简体中文的标点如日文一般位于左下角,当他们出现于行头时会显得极为奇怪。但位于中央的繁体中文标点却还可以接受。

九、注意字距

对于中文文章的正文而言,你不需要调整字距。有些香港的网站会为文章加上字距,但绝对不是好的做法。

增加字距会让读者无法确认阅读方向为什么?别忘了中文是双向文字,你可以由上往下读,也可以由左向右读。行距是提供读者行文方向的重要依据,若你加上字距,就得加大行距,最后让文章变得不能阅读。当然不会加字距加得那么夸张,但为了提供易读性,请让字距保持为 0。请记得:

不要调整正文的字距,但标题可以变动。

十、繁转简没问题,简转繁不行

▲ 简繁常用字的对应表

这是简体与繁体中文常用字的对应表。虽然简体与繁体许多字并不使用相同的码位,但大多数的转换工具都能透过对应表来简单匹配。

不过问题来了,这表格中最大的问题就是那 267 个一简多繁的字。在转换时若不使用字典作为辅助工具,就会出现很大的问题,像是:

  • 繁→简:皇后、后世→皇后、后世(◯)
  • 简→繁:皇后、后世→皇后、后世(×)
  • 繁→简:吕布→吕布(◯)
  • 简→繁:吕布→吕布(×)

所以,简转繁,不能不校对。

以上就是简单的排版方式,花不上太多时间就能让文章更易于阅读,不妨一试。
补充说明:本文中未提及中文与拉丁文字混排时的间距问题。目前技术上还未能有最佳处理方法,待日后再提及。

© 著作权归作者所有
这个作品真棒,我要支持一下!
设计黑客主要以设计和技术类文章为主,帮助开发者走进设计的世界,促进设计与开发的跨界交流
0条评论
top Created with Sketch.