CSS 中的标点悬挂及其现状

• 本文约 1104 字,阅读大致需要 3 分钟 | Development | #CSS | #Typography | #排版

什么是标点悬挂

标点悬挂 (Hanging punctuation) 是一种排版微调技术。当一行文字以标点开头或结尾时,标点可以「悬出」段落的对齐边界, 使正文文字的视觉边缘保持整齐。虽然差别细微,但在大段文字的排版中, 这种整齐的边缘能在一定程度上提升阅读体验。

The TypeEric 老师曾在2017年发表的《标点挤压与标点悬挂》一文中,对中文排版中的标点细节有极为细致的讲解。

文章中的观点是,标点悬挂是一种「舶来品」,在西文排版中更为常见,其目的是为了让文本的边缘看起来更整齐,因此会同时针对行首和行尾进行调整,有时甚至包括一些向内凹陷的字母;中文的传统则是源自雕版印刷的「版框」概念——内容必须全部放进版心——因此标点悬挂并不常见。 通常只在行尾进行悬挂,较少从行首向外挤出标点。标点悬挂的优点在于保持中式网格式的稿纸密排模式,避免出现零碎空隙,从而令版面更为整齐,提高可读性。但若简单地套用西文规则,有时反而会让版面显得怪异。此外,Eric 也特别提到一个技术风险:该功能在当时的 W3C 草案中被列为「At risk」,即 有可能会被移除 的功能。

示例

以下是一段由我用 Gemini 生成的短篇对话,用来展示不同浏览器中引号的表现差异。

「外面下雨了。」

他的目光从书页上移开,望向窗外,心里想着,这寂静终于被打破了。

「是啊,听这雨声。」

另一个声音回应道,带着一丝不易察觉的安宁,仿佛早已沉浸在这雨中。

「像是无数个细小的秘密在窃窃私语。」

先开口那人轻声说,思绪仿佛被雨丝牵引着,飘向了遥远的过去。

「我倒觉得它在清洗这个世界。」

对方的嘴角微微上扬,心中却想着,或许我们需要的不是沉溺,而是焕然一新。

「或许也在清洗我们的心情。」

这句话似乎触动了他的心弦,一种莫名的重负感好像真的随着雨声减轻了。

「希望如此。」

她在心里默默补充,为自己,也为你。

Chrome 的显示效果 Chrome

Safari 的显示效果 Safari

CSS 中的 hanging-punctuation

W3C 早在 CSS Text Level 3 中就定义了 hanging-punctuation 属性,来控制这种行为。 具体语法如下:

  hanging-punctuation: first allow-end last;

其中 hanging-punctuation 的取值包括:

  • none:不悬挂(默认)
  • first:悬挂行首标点
  • last:悬挂行尾标点
  • allow-end:允许标点超出行尾
  • force-end:强制标点悬出行尾

因此,上面的 first 理论会让中文引号略微靠左,使文字主体对齐。

八年过去了,如今依然只有 Safari 对这一特性提供了部分支持。 其他主流浏览器,包括 Chrome / Edge (Blink)、Firefox (Gecko),目前依然不支持这一特性。

我们还能做点什么?

或许我们目前能做的事情并不多。

早年某位 C 语言标准委员会大佬有一段轶事,他因为 strsep() 没有进入 ISO C 的最终标准感到耿耿于怀,为了泄愤而到处用它。

我不是大佬,不过我猜你们都知道我想说啥。

你知道我想说啥

虽然不少人觉得这个特性可有可无,但我仍希望有一天,它能真正排上议事日程,并被各家浏览器实现。