把博客排版整理了一遍

前两天翻博客的老文章,发现排版很乱。同一页里,有的段落开头空两格,有的顶格,还有的一数空了六格。看了下 HTML,问题都出在我自己历年留下的各种写法上。

2023 年写的文章,段落没有包 p 标签,文字直接放在页面上,模板的缩进规则作用不到,整篇顶格。后来有段时间手动打空格,一段开头四个空格,加上模板自带的缩进,缩进去六个字的宽度。还有篇老文用了九个大标题,往下滚全是标题。图床挂了的文章里,图片没了,占位的空块还留在页面上。

让 AI 把全部五十五篇检查了一遍,问题都找出来修完了。修完我想,还得知道标准的做法是什么,不能只按自己的感觉改。

这一查才知道,中文网页排版是有规范的。W3C 有份文档叫《中文排版需求》,缩写 CLREQ,和 CSS 规范是同一个组织出的。GitHub 上也有现成的方案:一个叫 typo.css,sofish 写的;另一个叫“赫蹏”,六千多个 star。赫蹏是古人对小张纸的称呼,汉代就有记载。

一、几个冷知识

翻规范的过程中看到几条冷知识:

  • 斜体是拉丁字母的传统,源自手写体。中文方块字斜过来很别扭,所以正式的中文排版里,强调用加粗或者着重号,不用斜体。
  • 段首缩进两个字的宽度,是铅字印刷传下来的规矩。杂志那种窄栏,两个字缩不起,才缩一个。
  • 中英文之间要不要加空格,吵了十几年没有结论,两边都有人写规范。

印象最深的一条是两端对齐。中文是方块字,适合排齐,段落右边参差不齐看着难受。这次给正文加了两端对齐,行尾整齐了。

二、缩进还是段距

最有意思的是“段首缩进”和“段间距”之争。有个叫 reuixiy 的博主写过一篇《网页字体排版的哲学》,把这事讲清楚了:这是两种分段方式,对应两种阅读方式。

书上是缩排。段落之间不空行,只在段首缩两格。读书是连续的,一个字接一个字往下走,缩排的分离感弱,不打断这个流。段间距分离感强,读长文容易断。

网页是滚动阅读的。段间距分隔明显,扫一眼就知道哪段是哪段,适合快速找信息。新闻站、技术文档基本都是段间距加顶格。

我的博客最后选了两者都用:段首缩两格,段间也留空。按严格的标准这是犯规。但我自己读下来确实舒服,缩进保住读书的连续感,段距让手机上滚动的时候不至于挤在一起。博客是给自己写的,读着舒服比守规矩重要。

三、全套样式一起定了

这次把正文的全套样式一起定了:引用块、列表、表格、图注,全部统一。以后写文章只管用标准结构,样式交给模板。引用块现在长这样:

“中文出版品上,段首缩排以两个汉字的空间为标准。”

W3C《中文排版需求》

表格也有了统一样式,细边框,表头一点底色:

参数我这儿的取值出处
段首缩进2em铅字印刷传统,CLREQ 原文照抄
行高1.8中文行距 1.5 到 2 之间,取中偏松
段距1.2em模板原有,读着合适就没动
对齐两端对齐方块字天生该排齐

这篇文章本身就是个展示:缩进、段距、加粗小标题、引用块、列表、表格,都用上了。

×