主页排版指北

择搭建个人主页的一个原因,是追求个性化的 UI 和精美的排版。在撰写文章的过程中,笔者意识到排版领域比想象中更复杂,于是记录下一些相关的思考和策略。

字体

笔者偏好衬线字体和传统字型,所以主页采取了个性化的字体设置:

文本布局

  • 出于醒目和美观目的,启用文章的首字下沉效果。
  • 遵循网络排版的习惯,段落首行不作空格缩进。
  • 为了方便读者聚焦视线,文章宽度收窄为 36 em。

标点符号

标点符号看似简单,实则琐碎复杂、种类繁多,涉及到中西文混排时尤甚。在查阅了相关资料后,笔者总结了一套标点符号的最佳实践自用规范:

引号

西文键盘上通常只有一个「引号」键,它会输入直引号 ' (u+0027, apostrophe) 和 " (u+0022, quotation mark)。这两个 ascii 字符没有左右之分,常见于程序代码,被称为「打字机引号」。在西文排版中,应当统一使用「正牌」的弯引号 ‘’ (u+2018/u+2019, left/right single quotation mark) 和 “” (u+201c/u+201d, left/right double quotation mark)。两种引号的区别如图所示:

quotation-mark※ 直引号和弯引号

中文引号的情况比较特殊,出于历史原因,它和西文弯引号共用一套码位⸺中文 im 打出的引号 ‘’ “” 就是西文弯引号。弯引号的显示样式完全由字体决定,当控制粒度较粗时,经常把中文引号渲染为西文引号。为了避免这个问题,笔者的中文文章使用直角引号 「」 『』,但注意单层引号的内部应当嵌套双层引号 「『』」

quotation-mark※ 弯引号和直角引号

括号

从个人审美的角度出发,当括号内是西文字符时,统一使用半角括号,以避免西文内容被全角括号衬托而显得下沉;当括号内是中文时,使用全角括号。如果括号内是中西文混排,那笔者会看外部环境:如果括号在西文句段内,就用半角括号;反之则用全角括号。至于更复杂的情况⸺嗯,笔者会避免写出这种文字。无论括号外是中文西文,半角括号外侧都应该空一格,以保持视觉整洁。但如果右括号后面紧跟的是逗号、句号、冒号、分号或引号,则不在括号和标点之间加空格。

从规范的角度出发,至今没有统一的官方标准。可以参考教育部《夹用英文的中文文本的标点符号用法(草案)》,但这只是一个推荐性草案,具体应以出版社和期刊的意见为准。

「横线」符号

西文中有三种常用见「横线」符号,最短的是连字符 - (u+2010, hyphen-minus),由软件自动加在行尾,用于将较长的单词断成两行。更长一些的是连接号 (u+2013, en dash) 和 (u+2014, em dash)。短连接号 用于数字 (pages 1–10)、日期 (tuesday–thursday)、年份 (1949–2026)、地名 (beijing–shanghai) 和各种理论 (yang–mills theory) 的连接,长连接号 就相当于中文的破折号。

国标《gb/t 15834-2011 标点符号用法》规定了中文符号短横线、一字线和浪纹线,分别对应 en dash、em dash 和 (u+ff5e, fullwidth tilde)。至于破折号,w3c《中文排版需求》推荐使用占两个全角宽度的 (u+2e3a, two-em dash),但又提到「通常也使用两个连续的 em dash 来实现」。

「圆点」符号

西文省略号 和中文省略号 …… 都使用字符 (u+2026, horizontal ellipsis),区别是英文省略号在垂直方向下沉,中文省略号在垂直方向居中。间隔号的字符是 · (u+00b7, middle dot),常用于外国译名(艾伦·图灵)、词曲名(沁园春·雪)、特定日期(9·11 事件)。

数学符号

四则运算符号中,只有加号 + (u+002b, plus sign) 可以在键盘上直接打出来,键盘上的「减号」实际上是连字符,而不是数学上的 (u+2212, minus sign)。至于乘 × (u+00d7, multiplication sign) 和 ÷ (u+00f7, division sign) 则干脆没有。还有一些符号,在科学上存在特殊含义,按惯例会采用特定样式。例如,单字母函数如 $f(x)$ 通常用斜体,多字母函数如 $\sin(x)$ 通常用正体,变换算子如 $\mathcal{f}$ 通常用花体。

如何在主页中打出这些符号呢?一种方法是正文中输入 unicode mathematical alphanumeric symbols 区块的专用字符(需要输入法支持)。而笔者倾向于遵循学术写作规范,使用 $\LaTeX$ 语法显示符号和公式,这样不仅输入便捷,显示效果也符合数学美感。

点击刷新