再论中英文排版 + 中文 Web 阅读体验

2019-12-18

为振兴喜瑞斯而不懈学习技术淬炼技巧。

还是打算搬运一篇文章。前面仍然是吹比环节,谈一下自己的一些想法。


将近半年多以前搬运过一篇 sparanoid / 中文文案排版指北,算是对排版有了一个基本的认识,也因此将先进而规范的技巧引入到工作和生活中。具体一点,从那之后的新建博文基本每一篇都严格遵循了这个规则。毕竟我一直以做技术的标准要求自己,我崇尚严格严密严谨。

今天在干出产值的时候,碰到了那种 (多少多少吨的数字和英文单位) 这种局部的排版问题。当然,这里不会给出解决方案,因为我也在想这个问题。

今天还看了一篇 Requirements for Chinese Text Layout 中文排版需求,限于篇幅(和时间),我也没看完,暂不解读了,而且估计也懒得解读。但还是值得好好看看,毕竟文中给出了很多看起来比较有道理的解决方案,而且及时更新(比如现在是 2019-12-06 的稿子)。我今天干出产值时碰到的问题或可在其中找到答案。


中文 Web 阅读体验

作者:刘昕

博主按:
原文发表于 2006-08-29,当时前端乃至各方面的技术远没有现在发达,因此文中观点仅作参考。而且,似乎是相当偏前端的,但是仍然有参考意义。
前面可能会有(!@#¥%……&*)之类的内容,代表博主我本人当前对作者所持观点的态度。如果没写,就是因为自己此前没接触过而没有想法,或是我保持中立。

关于制造中文 Web 阅读体验过程中的一些思考结论。

  1. (同意)正文字体的尺寸应该使用固定的偶数像素单位,如 12px14px16px 等,一个例外情况就是 15px 像素也是相当不错的正文字体的尺寸。由于中文 Windows 操作系统及部分的 Linux 发行版使用的是像素字库,因此,这几个尺寸的字体在显示效果上最佳。而在 Mac OS X 上,因为 Mac OS X 使用的是矢量字库,则在各种尺寸下显示效果都不错。另外就是,Mac OS X 的中文矢量字库中内嵌了 12px 的像素字库。
  2. blockquoteolul 等 HTML 元素内的文字应该在顶端和尾端留出至少 10px 的空白,在左端留出 20px 左右的空白,右端 10px 左右。在 CSS 语法中这些空白应该使用 margin 方式设置,padding 方式不提倡使用。padding 可以用来实现其他视觉效果。
  3. (同意)不要随意在正文和标题中使用拉丁等宽字体,除非是为了一些艺术上的用意。拉丁等宽字体应该用在和模拟打印制品或者程序源代码有关的场合。
  4. (同意)不要在任何地方强制指定使用任何的艺术中文字体,比如“魏碑”之类,这将在超过一半以上的计算机上,尤其是非 Windows 操作系统的计算机上不会显示出任何效果。
  5. 应该对大部分文字的 line-height 属性进行强制指定,一个经验是,对于正文文字,line-height 数值可以指定为这些文字的 font-size 的像素值的 1.6 倍左右。如果是标题文字的话,1.3 倍左右。
  6. (同意)中文正文及标题中出现的标点符号应该使用全角方式输入。
  7. (同意)中文正文及标题中出现的英文及数字应该使用半角方式输入,并且在左右各留一个半角空格。如果这些这些半角英文及数字的左边或者右边紧接着任何的中文全角括号或者其他标点符号的话,则不需要加入半角空格。
  8. 中文全角空格应该只在标题处使用。此外,在 Web 上的文字的正文的段落开头是否使用两个全角空格是个人喜好问题,反正我不喜欢用(同意,我也不喜欢,谁他妈没事儿调全角。。。),因为这些全角空格有些浪费存储空间,且对快速扫描式的阅读没有太大帮助。
  9. 在 Web 上的文字,是被人们用眼睛来扫描的,绝大部分都不会被人仔细阅读。
  10. (不同意,我个人认为 strongem 的语义化比较明显,在只是想单纯加粗或是斜体的场合我还是喜欢用 bi)中文字体的粗体和斜体显示效果不推荐使用。在大部分非 Windows 操作系统上,这些效果都不被字库或者浏览器支持。而在 Windows 操作系统上,这些效果也不够理想。粗体中文显示效果在 Windows 操作系统上会让部分笔画连接在一起而使得文字难以被辨认,而斜体中文显示效果则会使得部分笔画消失,也非常难以被辨认。如果一定要使用此二种效果,则要么通过 CSS 的 font-weight 方式指定,要么通过 strongem 标签,而不要使用 bi 标签。
  11. (同意,注意看接下来写的实现细节)中文的段落与段落之间应该留出一个完整的空行。即每个段落使用一对闭合的 p 标签在不加 CSS 时候的效果,或者是使用两个 br 标签时产生的效果。注意,这个空行的高度会受到 line-height 的影响,因此不要把 line-height 设置为太高的数值,否则将使得两个段落之前的视觉联系减弱,导致影响阅读时候的思路连贯。
  12. 如果文字是要被通过 RSS 输出的,则可以考虑在其中加入一份内嵌样式表,对于 olulblockquote 等元素的样式尤其需要控制。这样可以保证即使文字被显示在其他网站,其样式也依然可以保持统一,如果没有被聚合器过滤 HTML 标签的话。

以上这些,是我在写任何 HTML 文档时候的指导原则。比如,V2EX 的所有文档及 UBB 转换器都尽量符合这些原则。