返回首页|back to home page 返回首页|back to home page
||||
  •  发布
张擎天

这个网站的排版

道生一,一生二,二生三,三生万物。

一般而言,对任何网站来说,其内容的质量才是最重要的。但是,对于一个以排版设计为主题的网站来说,除内容外,其自身的排版也同样有说服力。这促使我在这个网站的排版上多花了些心思:一部分是为了让文章更易阅读,另一部分则有些自我表达的成分。下面我想从头讲起,和大家分享一下我的排版思路。

一、基础结构

这是一个由很多网页组成的网站,而不是一本由很多页纸组成的书。这一基本属性相当重要。对于书来说,一旦印刷制作完毕,它的大小就不会再改变,无论读者何时何地打开这本书,他们看到的都是同样的大小。但网页并非如此。读者在电脑上看,在平板上看,在手机上看,在不同分辨率的显示屏上看,最大化窗口看,小窗口看,他们看到的网页大小都是不一样的。

因此,网页设计最好要考虑到不同情形下的呈现效果。对此,我在这里将页面大小分为五档(首页则是分为三档),不同的页面大小有着不同的排版布局,以期在各种尺寸的窗口下都能有尽量舒适的阅读体验。在网页开发中这被叫做“响应式设计(responsive design)”,是现今非常基础的设计思路,技术上很容易实现。

图像图像图像图像图像

这五档不同大小的页面的基本布局思路是:如果窗口大,则尽可能地利用屏幕的空间,尤其是横向的空间;如果窗口小,则优先考虑正文阅读的舒适性,必要时可以舍去一些次要的元素(比如在较小尺寸下,文章的大纲导航就被隐去了)。

为了后文的叙述方便,这里将这五档分别称为“巨”“大”“中”“小”“微”型布局。

二、正文字号

阅读类的排版设计,正文字号是相当重要的,甚至可能和字体一样重要。优秀的字体若以不恰当的字号呈现,阅读体验同样十分糟糕。

对于印刷媒介的排版来说,有经验的设计师能够根据载体的性质选择合适的字号。并且同一个作品无论印刷多少份,不同的读者拿到的那一份的字号大小都是相同的。

而网页则要麻烦一些。由于读者可能使用不同大小的屏幕、不同像素密度的屏幕、不同的观看距离、不同的系统缩放倍数、不同的浏览器缩放倍数,因而无法预知设定的字号在呈现到读者面前时会是多大,设计者只能预估一个在各种条件下都不太夸张的大小。所幸大多数浏览器都提供了缩放功能,若读者觉得大小不合适,就要劳驾自行调整一下了。

针对这个网站,我将正文字号设定为20px。其实再大一些或者再小一些也都是合适的,之所以选择它是因为20是个整数,计算起来非常方便,也利于在此基础上拓展出标题和辅文的字号。比如在这里,二级标题的字号是正文的一点五倍(30px),注释的字号是正文的四分之三(15px),让这些不同的字号形成简单整数比关系,非常有利于后续的排版布局(详见“四、中文网格的运用”)。

同时,正文的行高设定为两倍字号,也即40px。选择这个数字也主要是为了计算上的方便,更大一些或者更小一些的行高也都是合适的。另外在理论上,行高最好和段落宽度(行长)有相应的关系:对于较小的段落宽度,可以用稍小的行高,既能节省版面空间而又不损害易读性;对于较大的段落宽度,应当用稍大的行高,以方便眼睛换行时不串行。但在本网站的不同布局中,无论段落宽度的大小,行高都不会变化,这纯粹是出于计算和写代码的方便,设计在此妥协。

图像图像

三、字体选择

网页的字体通常选择黑体,这在以前是为了适应较低的屏幕分辨率一些低分辨率屏幕上的点阵宋体本质上也可以算是黑体了。,现在似乎已经成了一种习惯、一种传统1,即便有一些宋体在像素密度较高的屏幕上的显示效果并不差。

这里我不打算挑战这种习惯,依然选择黑体作为正文字体。不过,我特意加入了更换字体的功能,点击右上角(有时是在左下角)的三个小圆点你的浏览器的界面上可能也有三个小圆点,别点错了。点这个网页里的三个小圆点。,你就可以更换这个网页的字体,试试看用宋体来读这篇文章,看看体验如何。

至于具体是用何种黑体以及何种宋体,这里使用了Google Fonts服务上提供的思源黑体(Source Han Sans,也叫Noto Sans)和思源宋体(Source Han Serif,也叫Noto Serif)作为保底选项,即便你的设备上没有安装这两个字体,只要网络连接正常,就能用上这两个字体(当然也会额外消耗少量的流量)。这样可以尽量避免出现回退到系统默认字体的情况(现代操作系统默认的黑体大多质量尚可,但默认的宋体在屏幕显示上的效果大多不太理想)。

除了保底的字体外,假如你的设备上安装了下列字体,那也有可能以它们来显示:汉仪旗黑、HarmonyOS Sans(华为鸿蒙字体)、MiSans(小米字体);方正雅宋。优先调用排序靠前的字体。若该字体未安装则调用下一顺位的字体。所有字体均未安装则使用保底字体。无法正常连接至Google Fonts服务导致无法使用保底字体,则使用系统默认字体。字体的调用顺位纯粹是出于我的个人喜好来决定的。你可能更喜欢顺序更靠后的字体,不过很遗憾,本网站没有提供更改字体顺位的功能。

图像
本网站可能用到的字体。

需要注意的是,由于不同的操作系统、不同的浏览器对字体的渲染方式不同,因而即便排除了上述的屏幕分辨率、缩放倍数之类的不可控因素,同一个字体仍然可能呈现出不同的效果。比如,在我的电脑上,用Chrome浏览器和Firefox浏览器分别打开这个网页,字体的显示效果就不同。Chrome中的字体效果更细巧一些,Firefox中的字体效果更浑厚一些。本网站主要在Windows操作系统上的Firefox浏览器中调试,因此在Firefox浏览器中的效果是我选择字体的最主要依据。

对于西文字体,则分别使用Source Sans Pro(与黑体搭配)和Source Serif Pro(与宋体搭配),并对字号做了微调,以便与中文混排时更和谐。++++ 这个网站在写CSS代码时,没有采用常用的“西文字体声明在前,中文字体声明在后”的方法,而是为西文加上专门的HTML标签,作为单独一个类来设定CSS样式。这样可以有更高的排版自由度,毕竟中西文有时并不仅仅是字体需要不同,其字号、字重、基线等也可能需要分别设定。西文字体没有设置其他的候选项,这是因为不同的西文字体的宽度比例可能不同,如果允许调用不同的字体,可能导致排版布局发生变化,这对于排版方式较为复杂的本网站来说是个比较麻烦的不可控因素。

四、中文网格的运用

最精彩的部分来了。

网格系统是平面设计中常用的工具。不过,怎样将诞生于西文环境下的网格系统运用于汉字的排版中来,一直是一个值得钻研的问题。汉字的方块特性使得它本身自带网格属性,如果不仔细斟酌的话,汉字自身的网格特性可能会与页面的网格布局相冲突。

图像
汉字自身的网格可能与页面的网格相冲突。在这个例子中,在设定页面网格时没有考虑到它和汉字字数相匹配的问题,于是出现了“少一个字不足,多一个字太多”的问题。
图像
如果为了让段落对齐网格而强行左右对齐的话,事实上就是强制拉开了文字的字间距,并且会导致段落内的字距不均匀。正确的做法是在设置页面网格的时候就考虑好它和汉字字数的关系。

在这里,我结合个人的习惯,创造出如下的网格布局:以一个正文字的宽度为基本单位,每三个基本单位为一小栏,各个部分均由若干小栏组成(即宽度都是三个字的倍数)。比如,在“大”型布局中,左侧的大纲栏的宽度为十二个正文字,中间正文栏的宽度为三十个正文字,右侧注释栏的宽度为十二个正文字。栏与栏之间的间距为三个正文字。同时,注释字号为正文字号的四分之三,也即四个注释字的宽度等于三个正文字,这样正文和注释就可以在段首缩进相同的距离,同时又严格保证分别与其自身的字号网格对齐。

图像图像

顺便一提,在这个页面的左下角或右上角,有一个由四条竖线组成的按钮✽✽✽✽ 大概是“||||”的造型,四条竖线组成三个区域,正是对这个页面的网格结构的隐喻。,点击该按钮,就可以显示页面的网格线,能很好地帮助理解上面的内容。其中,浅灰色表示单字网格线,深灰色表示三字网格线,深蓝色表示版块边缘线,浅蓝色表示缩进线,红色表示居中对齐线。

如果你使用的设备可以调整窗口的大小,试试看改变窗口的宽度,看看网格线在不同尺寸的布局中是如何变化的。

现在或许你明白了为什么这个网站的正文开头要空三格了。在这样一个工整的网格系统里,空两格反而是奇怪的,因为它破坏了整体的秩序感。

另外,在本网站的首页的布局中,也采用了类似的网格思路,这里就不详细阐述了。

1. 小尺寸布局的妥协

如果你是在手机等小尺寸的设备上观看此网页的,那或许会发现:在这个网站的“微”型布局中,段落的宽度不一定是三的倍数。这是为了在小尺寸的屏幕上能尽量利用屏幕空间,以及避免让段落宽度变得过小而做出的妥协。

图像

2. 或许不应该叫做网格……

在传统的书籍设计中,每一页上的正文行都应当对齐到纵向的文字网格,这样在翻页时版面会有稳定感,减小眼睛的负担。但在网页这种连续滚动的媒介中,这种纵向的网格对齐恐怕并不必要。因此,这个网站并不在纵向上规定文字网格。如此一来,似乎将这样一种单向分割的网格系统叫做“栅栏系统”更加贴切……或者说,这里的网格指的是汉字自身的网格,而非用参考线画出来的网格。

图像
传统的书籍设计,每一页上的正文都应该对齐到统一的纵向网格。标题、注释等非正文元素倒是可以不对齐到纵向网格。

3. 计算机环境下中文排版的大麻烦

在计算机上排中文有时会遇到一些麻烦。假设段落宽度和字号大小都是固定的,那处理起来便非常容易;但是,假如段落的宽度会随着窗口宽度的变化而改变(这是电脑上经常出现的情况,也是这个网站的“微”型布局采用的方式),或者在窗口宽度不变的情况下可以自行设定字号大小(这是手机、电纸书等小尺寸设备上常见的排版功能),就可能会遇到一些问题。

下面的交互式图示中有三个段落,段落①采用当今的计算机软件上常见的排版方式,并且段落左右对齐;段落②是理想的中文排版方式,并且段落左右对齐;段落③则采用左对齐的方式来当作参照。缓慢拖动下方的滑块,改变该区域的宽度,仔细观察在宽度改变时,三个段落的字间距会有怎样的变化。

① 左右对齐(字距可能被意外拉开)   像这样的奇书,不应该一口气就把它念完,要留着细细儿地咀嚼才好。一下子就念完了之后,我的热望也就不得不消灭,那时候我就没有好望,没有梦想了,怎么使得呢?

② 左右对齐(理想的排版效果)   像这样的奇书,不应该一口气就把它念完,要留着细细儿地咀嚼才好。一下子就念完了之后,我的热望也就不得不消灭,那时候我就没有好望,没有梦想了,怎么使得呢?

③ 左对齐   像这样的奇书,不应该一口气就把它念完,要留着细细儿地咀嚼才好。一下子就念完了之后,我的热望也就不得不消灭,那时候我就没有好望,没有梦想了,怎么使得呢?

你可能会发现,随着白色区域宽度的变化,段落①的宽度一直在实时改变,段落②则要每隔一段距离段落宽度才会突然改变。但是,段落①的宽度在实时变化时,它除了最后一行之外的每一行的字间距也在不断发生变化,这导致了该段落内部的最后一行和其他行之间的字间距不均匀,在段落宽度较小时这一现象尤为明显。段落②的字间距则始终保持稳定。

图像
不恰当的排版方式,会导致段落内部的字间距不一致,尤其是除最后一行以外的其他行的字间距会被拉开。

为了正文阅读的排版,字间距是相当重要的。随意改变字间距是致命的,西方字体排印界有句谚语:“拉开小写字母字间距的人会╳羊。”2中文没有这样的说法,但仍不应过分拉大或缩小字间距,而一个段落内部或段落之间的字间距不一致更是大罪过#### 有些情况下,比如为了标点避头尾,中西混排等,字间距可以稍稍不一致,但这里显然并非这种情况。,这让版面灰度变得参差,阅读节奏变得混乱,无论是看起来还是读起来都不舒服。

图像
不恰当的排版方式导致版面灰度不均,阅读节奏不稳定。

上面的图示中的段落①正是犯了这个毛病;段落②的排版是恰当的;段落③的排版也正常,只是中文的正文排版通常都是左右对齐,单纯左对齐的情况较为少见。

之所以会出现段落①的问题,是因为在排版时段落的宽度没有始终等于单个字的宽度的整数倍3,也就是没有处理好上面提到的汉字自身的网格特性。※※※※ 一般来说,出现这样的问题可能是在设定版式时,让段落的宽度等于页面宽度的某个固定的比例,或者是从页面上减去固定的边距后,在剩下的区域内填充段落。这些做法在当前的计算机软件上实现起来是较为容易的,然而这是个陷阱。计算机软件的排版功能大多为西文排版而设计,一些看起来理所当然的操作,虽然对于西文是合适的,但若直接套用在中文身上,可能就会出问题。

遗憾的是,在网页上用原生的HTMLCSS无法实现第二个段落的效果,在大部分平面设计软件中要实现这样的效果也稍有麻烦,这是计算机时代中文排版的一大挑战。在这个网站上,为了实现这样的效果,用到了一些JavaScript,核心代码如下:

function chineseGrid() { //调整段落宽度的函数
	let DuanLuo = document.getElementById("paragraph"); 
	//选出需要调整宽度的段落
	let pageWidth = document.body.offsetWidth; 
	//获得页面的宽度大小
	let ZiShu = Math.floor(pageWidth / 20); 
	//20是正文字号。算出在当前的页面大小下,能在一行中容纳的最大字数
	DuanLuo.style.width = ZiShu + "em"; 
	//将段落宽度设置为该字数所对应的大小
}
window.visualViewport.addEventListener("resize", chineseGrid); 
//每次窗口大小发生改变时,都执行该函数

这无疑让网站的代码实现变得复杂,因而现今几乎没有网站这样做,只有我这种对排版的精细程度有极端癖好的人才会专门着手解决这个问题。不过考虑到并非所有网站都旨在提供“有品质的长篇文章阅读体验”,忽视这一问题也不能说有多大影响。只是假如你希望能为读者提供高质量的中文排版的话,那无论是在电子媒介还是印刷媒介上,都不应该放任这一问题。

五、再谈缩进

前文已经说明了每个段落开头空三格是为了配合整体的网格布局。除了这个原因外,段首空三格还能创造出较大的空白,这样在页面滚动时能更好地凸显出段落的分割。(在段落间增加额外的间距也能起到同样的效果,这里没有采用这种方法。)

另外你还会发现,这个网站在每个小标题下的第一个段落不采用首行缩进。

首行缩进(在中文里一般是开头空两格)的目的是为了将本段落与上一个段落区分开来,而第一个段落没有“上一个段落”,自然也就无需缩进,非常符合逻辑。⊙⊙⊙⊙ 这种第一个段落不缩进,第二个段落再开始缩进的做法在西文中是比较常见的(通常还伴随着第一个段落的前几个单词使用小型大写字母),这里确实有所借鉴。当然,像通常的习惯那样每个段落开头空两格也有道理,这样可以将缩进视作是段落开始的一个仪式,也说得通。我听说藏文等一些文字在每个段落的开头都会使用专门的符号来表示段落的起始,这种仪式性的符号也确实别有一番风味。

另外,更重要的是,由于开头空三格已经出现了很大的空白,在小尺寸的布局中,让第一个段落不缩进可以避免它和标题形成的空白造型过于不规整。

图像图像

六、标点符号的排版处理

1. 间距

传统的书面中文在排版时不使用标点符号。现今中文里使用的大多数标点符号都是近代从外国引进的。这些舶来品如何与汉字搭配就成了大问题。历史上,中文文本里的标点符号的排版方法多有演变,如今较为常见的做法是将每个标点放在一个和汉字字框等大的方格中,与汉字一同顺序排列,并且标点与标点之间以及标点与汉字之间的空白可以灵活调整,以获得较好的排版效果。

但是,这一做法在计算机时代再次受到了挑战。诞生于西方的电脑未曾考虑过汉字,曾经我们花费了巨大的精力来让计算机能够储存、处理、显示汉字,在这一方面我们成功了;但若论及在计算机上实现高质量的中文排字,目前尚未完全达成。严谨、精确的计算机强制让每个标点都落在一个完美的正方形字框中,容不得一点变通,即便是前后两个标点间出现了巨大的空白,也视若无睹。然而,假如我们看一看铅活字时代的中文排版,会发现能灵活调整的空白才是标点排版的常态,这才是中文版面的本来面目。++++++ 这么说可能会有较大争议。从近代以来,中文版面的构成方式一直在不断发生变化,究竟何种状态能被称为“常规”恐怕难以判定。直到今天,在我国的香港、澳门、台湾地区,中文版面的构成仍与内地大陆稍有差异(并不是简繁体的问题)。铅活字时代能做到的事,计算机时代反而难以做到了。达成良好的标点间距是计算机时代中文排版的又一大挑战

图像

为了解决这一问题,这里用到了由陈奕钧(陳奕鈞)开发的“汉字标准格式”漢字標準格式)网页框架4,并进行了少量个性化的修改。该框架包含诸多功能,这里主要使用的是其中的标点间距调整(也称“标点挤压”)和中西文间距调整两个模块。借此,基本实现了在网页媒介上达成较好的标点和字符间距。✽✽✽✽✽✽ 但仍未达到理想状态,比如该模块尚无法实现将标点间距压缩至比设定值更小,于是原本可以靠进一步压缩标点间距来实现的标点避头尾和段落左右对齐,现在只能将行末字符换至下一行,本行的剩余字符间距则被迫拉开。这里不再详述。

具体地,这里对标点间距的处理参照国家标准《标点符号用法》(GB/T 158342011),也就是:

  1. 1破折号(——)、省略号(……)占两个字的宽度;

  2. 2 短横线()、间隔号(·)、分隔号()占半个字的宽度;

  3. 3其他标点在单独使用时占一个字的宽度,在多个标点连用时灵活调整标点间的间距。###### 很多人以为国标中对标点的宽度的描述是每个标点占一个字的宽度(也就是“全宽式”),其实并不是。除去破折号、省略号这两个长标点占两个字外,国标仍将短横线(俗称半字线)、间隔号、分隔号这三个标点定义为半个字宽,这其实非常符合排版的美观性的要求,也利于流畅阅读。因为这三个符号出现的大部分场合都不需要明显的停顿,占一个字的话似乎空白太大了。

对中西文之间的间距则设定为四分之一个汉字宽,这也是目前的排版实践中较常用的做法,虽然事实上间距再稍稍大一些或小一些也都是合适的。

图像

2. 避头尾

标点的避头尾参照《标点符号用法》和日常使用习惯。※※※※※※ ChromeEdgeSafari等浏览器上有时一些标点避头尾会出问题,而在Firefox浏览器上没有问题。该问题暂时超出我的技术能力范围,恕无法解决。对于日常使用习惯上有争议的内容,这里处理如下:

  1. 1破折号(——)、省略号(……)在《标点符号用法》中未说明需要避头或避尾⊙⊙⊙⊙⊙⊙ 标点符号用法》原文为“……不能中间断开分处上行之末和下行之首。”目前计算机中的中文破折号和省略号各自是由两个字符组合而成,在较弱的排版软件中这两个字符可能会前一个出现在上一行,后一个出现在下一行。这句话是针对此而说的。有人将其理解为“破折号、省略号不能处于上行之末或下行之首”,这是完全误解了这句话的意思。,在日常使用习惯上通常会避头,有时会避尾,这里选择既不避头也不避尾。

    图像

    这是因为破折号和省略号会占用两个字的宽度,假如它们既要避头又要避尾的话,也就意味着连带它们前后的字符,会出现一个至少四个字宽的不可换行字符组。这样一个长字组如果要求它必须整体位于上一行之尾或下一行之首,则可能导致一行文字的字间距被过分地拉大(这样做的危害在前面已经介绍过了)。解决这一问题的方法出奇地简单:让破折号、省略号能出现在行首或行末就可以了。至于有人说“破折号、省略号这种细长条的符号直接出现在段落边缘不美观”,对此我不予否认,但我认为文字间距被过分地拉大更加“不美观”。同时,一个细长条的符号在段落边缘吊着孤零零的一个字,或许也不“美观”。另外,考虑到汉字“一一(yīyī)”也可能出现在段落边缘,或许我们不必对段落边缘的细长条造型太过敏感。

    图像
  2. 2一字线()、短横线()、浪纹线(~)按《标点符号用法》需要避头而不需要避尾,在日常使用习惯上通常会避头,有时会避尾,这里选择需要避头而不需要避尾。

    图像

    这应该很少有争议,因为这些符号无论从造型上还是从功能上都类似于西文中的hyphendash+✽#+✽# 我没有做过调研,但我猜测这些符号就是从西文中的hyphendash演变来的。,而hyphendash的排版方法就是需要避头而不需要避尾,这样做非常合理,也恰好与国家标准相符。✽#※✽#※ 需要注意的是,目前在计算机中,中文一字线通常使用1Em Dash(—,U+2014)来表示,中文破折号通常使用2Em Dash——U+2014 × 2)来表示(另外,还有Two-Em Dash〔⸺,U+2E3A〕这个字符,或许更适合用来表示中文破折号,但大多数字体和输入法都不支持这一字符)。由于一字线和破折号使用的是同样的字符,因而对其中一个标点设置的避头尾属性也很有可能被同时运用在另一个上。

  3. 3间隔号(·)按《标点符号用法》需要避头而不需要避尾,在日常使用习惯上可能既避头又避尾,这里选择需要避头而不需要避尾。

    图像

    对此我无法给出很明确的理由。间隔号最常见的用途是用于分开非汉语姓名(但同样使用汉字的日朝韩越人名则不用间隔号),也就相当于外文姓名之间的“空格”;另外还常用于分开古籍的篇、章、卷名,这一功能曾经是靠波浪式书名号中间的空白来完成的;偶尔也用于并列的事物之间。总之,间隔号在大多数时候承担的是类似于空格的作用,在几乎不使用空格的现代中文排版中,需要有一个符号来起到空格的效果;偶尔它也会充当类似顿号的作用。对于这样一个几乎是中文特有的标点,实在难从其他文字的排版中找到参考案例#※⊙#※⊙ 现代中文里的标点不仅造型和作用和西文极其相似,连排版方法(位置、间距、避头尾等)也与西文里的标点非常类似。有理由相信中文标点在所有这些方面都有所借鉴。因而在遇到陌生的标点时,尝试从西文里去寻找参考是很合理的做法。另外,西文里其实有间隔号(middle dot)。在古代可能用它来分割单词,毕竟那时候词和词之间还不加空格,这似乎与现代中文里当作空格用的间隔号很类似。但在空格成为西文的常态后,我能找到的间隔号在现代西文的用法只有在字典里用来分割音节。。(日文也有造型类似的标点,作用除了分开外国姓名外,还可用于分开并列的事物,似乎与中文间隔号异曲同工。)出于让不可换行字符组尽量短,避免一行文字的字间距被过分地拉大的原因,以及仿照顿号的排版方法,这里让间隔号需要避头而不需要避尾,恰好与国标一致。

  4. 4分隔号()按《标点符号用法》既需要避头又需要避尾,在日常使用习惯上通常既避头又避尾,这里既不避头也不避尾。

    图像

    标点符号用法》中定义的分隔号的用法多样,但总体来说这个符号使用频率很低。个人认为既然分隔号就是为了“分隔”,那它前后的内容被分隔到两行上去自然没什么问题。唯一的问题是可以在分隔号前还是分隔号后换行,或两者皆可。参照连接号、间隔号的逻辑,个人认为分隔号应该需要避头而不需要避尾。而这里选择既不避头也不避尾,纯粹是在网页技术上遇到了一些困难,只得妥协。

七、排版风格(house style

到这里已经不再是纯粹的排版问题了,开始涉及到一些编辑领域的内容了。这里只介绍一些和排版的功能性与美观性较为相关,且与通常的习惯不同的做法:

  1. 1对于引号,一级引号采用双弯引号(“ ”),二级引号采用单线直角引号(「 」)。

    这么做的原因是因为在计算机中,中文引号(通常占一个汉字宽)和西文引号(较窄,宽度不定)是同一个字符※⊙+※⊙+ 具体地,这些字符的Unicode编码为:〔U+2018;〔U+2019;〔“〕U+201C;〔”〕U+201D。中西文使用的是同样的字符,这和逗号、冒号、问号等标点的情况截然不同。,具体宽度由字体决定。这一历史遗留问题给计算机上的中西文混排造成了巨大的麻烦。再加上之前提到这个网站使用了“汉字标准格式”框架,它会将所有中文标点自动进行特殊处理。如此一来,即便是外文中的引号也会被当作中文来处理,可能造成不必要的麻烦。所以,这里对上述框架做了修改,不将单引号视作中文标点,而将其专用于西文排版中的引号和省文撇。⊙+✽⊙+✽ 英文排版中的引号是首选单引号还是双引号,不同的地区、场合有不同的风格。中国人受现代中文影响习惯首选双引号,不过英文里首选单引号也是完全可行的。中文排版中的单引号则改用直角引号。这样做也可以避免单引号、双引号、逗号连续出现时,版面上出现密集的“小蝌蚪”。

    图像

    不同层级的引号混用不同的造型算不上标新立异。一些西方语言的一、二级引号也会混用弯引号(“ ”/ ‘ ’)和尖角引号(« » / ‹ ›)。同理,在中文里混用弯引号和直角引号虽然罕见,但并无不可。

    至于为何选用单线直角引号而不选用空心直角引号(『 』),或者为何不全都改用直角引号,这就是另一个庞大的话题了,这里按下不表。

  2. 2括号按照一般的使用习惯处理。

    对于圆括号“( )”内需要嵌套使用圆括号的情况,则二级圆括号改用六角括号“〔 〕”。之所以二级括号不使用方括号“[ ]”是为了避免它的造型和二级引号过于接近,比如[「这样」]。

  3. 3中文文本里的西文作品名不使用斜体,而是仍按中文习惯使用书名号。+⊙※+⊙※我知道这不符合《夹用英文的中文文本的标点符号用法(草案)》第6.2条。但我对我的观点非常有自信。

    这么做是为了形式上的一致性。既然是夹杂在中文文本中的零星的外文词语,那完全可以(也应该)按中文的排版方式来处理。比如中文里出现连续并列的英文词汇时,它们之间是使用顿号而不是按英文习惯使用逗号;中文里引用法文词句时,通常也是使用弯引号,而不是按法文习惯用尖角引号。给西文作品名加上书名号,既不会让信息传达出现偏差,也不会造成文本过于不美观(中文书名号直接来源于西文尖角引号,它与西文必然能和谐搭配,如果不美观那是字体设计的问题)。假如要求外文作品名按照该文字的排版习惯来处理的话,那日文书名是否也应该按照日文习惯使用『』来表示?阿拉伯文书名是否也应该按照阿拉伯文的习惯来表示?(我其实不知道阿拉伯文是如何表示书名的。)仅仅让英文书名按照源语言的排版习惯来处理,似乎是人为制造了双重标准。

  4. 4由于这个网站的每篇文章既有边注,又有尾注。在尾注使用数字编号的情况下,为了防止混淆,边注就不再使用数字,并且也没有使用西文传统上的“*””“†”“‡” “§”“¶”“‖”5,而是采用“+”“✽”“#”“※”“⊙”,五个用完后则使用“++”“✽✽”“##”……,以此类推。这么做没有什么特别的理由,只是为了增加一些个性。(在“微”型布局下,边注会转换为行内注,此时不再使用编号。)


注 释

1

关于排版的体裁习惯(typographic genres)与不同类型的字体的易读性的关系,可参见:《Typography: A Very Short Introduction》,Paul Luna著,牛津大学出版社,2018年,第4章第1节“Typographic genres”(6771页)和第7章第3节“Experimental methods”(114117页)。

2

1936年,美国字体设计师弗雷德里克·高迪(Frederic Goudy)在纽约获颁某一字体设计奖项。接过奖状后,他看了看说:“拉开哥特字母字间距的人会╳羊。(Men who would letterspace blackletter would sh*g sheep.)”(欧美的奖状传统上使用哥特体书写。)由于在现代的文字排印中很少使用哥特体字母,同时也由于“╳”字过于不雅,因而在流传的过程中,这句话变成了“拉开小写字母字间距的人会偷羊。(Anyone who would letterspace lower case would steal sheep.)”详见:《Stop Stealing Sheep & Find Out How Type Works》(Erik Spiekermann著,第三版,Adobe出版社,2014年,第7页),以及网页“Famous Quotes from Type Designers”(页面内搜索“sheep”)。

欧洲中世纪的书写者为了塑造出独立、清晰的词像(word image)而把字母写得非常紧凑:字母的笔画较粗、内白较小,字母间的空白较小。于是组成单词的各个字母看起来形成了紧密的整体,哥特体的词像因而得到强化。详见:《The Stroke—Theory of Writing》,Gerrit Noordzij著,Peter Enneson译,Hyphen出版社,2005年,第5章“The invention of the word”和第6章“The consolidation of the word”。倘若将哥特体的字母间距增大,则字母的内白和字母间的空白的节奏韵律会被破坏,词像消失,这在字体排印爱好者看来是大罪过。这就是高迪说出那句话的原因。而现今流行的基于人文主义小写体的字母虽然不像哥特体那样紧密浓烈,但对于清晰的词像的追求是一脉相承的。拉开小写字母的字间距,一样会导致词像被削弱。

3

关于“行长等于字号的整数倍”这一概念,可参见《从“行长为字号的整数倍”说起》。

4

关于“汉字标准格式”网页框架,可参考下面这两篇文章的介绍:《用印刷品的态度来做Web排版》《印刷品般的漢字排版框架inside Jekyll》。类似的改善网页环境下的中文排版的增强功能还有赫蹏。另外还有用于实现网页环境下中文标点间距调整的CJ Typographer,用于实现网页环境下中西文之间自动加间距的text-autospace.js等。

5

参考《The Oxford Guide to Style》(R. M. Ritter著,牛津大学出版社,2002年)第3.513.1.915.16.5节,注释编号若不采用数字,则可以按顺序采用如下六个符号:“*”“†”“‡” “§”“¶”“‖”。而在现今通用的专业排版软件InDesign中,预设的注释符号只有五个:“*”“†”“‡” “§”“¶”。