Skip to content

杂谈:网页上的中文排版 Working…

引言

网页技术自诞生之日起的使命就是图文排版。

应当说网页上内容面临的情况要远比传统的纸质印刷复杂得多 —— 无论是页面上板块的复杂度,还是各种浏览器的兼容性问题。作为前端,我们所要做的应当是在技术实现与视觉效果上达成一个平衡。毕竟不同设备上的系统字体、浏览器引擎的细节都有不同,要渲染的内容很多时候也不可预知,因此在网页上实现像传统纸质排印那样细粒度的控制几乎是不可能的。可喜的是随着前端技术的快速演进,曾经不好实现的一些功能(例如标点挤压)开始由浏览器原生提供。尽管还是有各种各样的限制,但终归是迈出了第一步。

很久以前在 B 站上偶然关注了六个蛋老师 oooooohmygosh,顺着他的推荐去看了 孔雀计划,学到了很多。再加上我自己也有做一些业余的平面设计,就开始重视一些排印的细节,慢慢地养成了「强迫症到如今也攒下了不少经验,因此写下这篇杂谈。

段落

两端对齐?

两端对齐在中文出版物中是很常见的。由于方块字的特性,两端对齐之后整整齐齐的十分美观。

但是两端对齐的问题在于,当行长度较短的时候,若有标点避头尾的处理,字间距会被拉得很开。这一点在移动端尤为明显。

缩进与行距

  1. 所有段落首行皆缩排。几乎所有的书籍与杂志皆使用此方法。
  2. 篇章最初段落的首行不缩排,其余段落首行缩排。此方法多见于西文书籍。
  3. 所有段落首行皆不缩排,在段落与段落间加入一定程度的间距,作为间隔。部分书籍与杂志使用这种方式。
  4. 原则上,部分语气未完的段落予以断行、而不缩排。语气未完的段落前可能出现对话、引言以及为与正文有所区隔,由编辑所下的标题等。

标点

避头尾

  • 不处理
    完全不处理行首行尾禁则。常见于台湾香港等地报刊。
  • 基本处理
    点号(顿号、逗号、句号、冒号、分号、叹号、问号结束引号、结束括号、结束双书名号(书名号乙式连接号、间隔号、分隔号不能出现在一行的开头。开始引号、开始括号、开始单双书名号等符号,不能出现在一行的结尾。这是最推荐的方法。
  • GB 法
    在执行基本处理的基础上增加规定分隔号也不能出现在一行的结尾。
  • 严格处理
    在执行 GB 法的基础上再增加规定破折号、省略号不能出现在一行的开头。

破折号

破折号表示语气或声音的延续、语意的转换或行文的补充。呈现上为一条在水平和垂直方向均位于字面正中的直线,占两个汉字空间。推荐使用占两个汉字宽度的 U+2E3A TWO-EM DASH [⸺],但通常也使用两个连续的 U+2014 EM DASH [—] 来实现。

破折号不得以适配分行之由断开或拆至两行。

引号的全半角之争

标点挤压

Baseline status of text-spacing-trim

Fetching baseline info...

Could not fetch information about this feature. Try searching on Can I Use or MDN Web Docs for more information.

中西文混排

注音

Baseline status of ruby

Fetching baseline info...

Could not fetch information about this feature. Try searching on Can I Use or MDN Web Docs for more information.

繁与简