CSS 中的标点悬挂及其现状
什么是标点悬挂
标点悬挂 (Hanging punctuation) 是一种排版微调技术。当一行文字以标点开头或结尾时,标点可以「悬出」段落的对齐边界, 使正文文字的视觉边缘保持整齐。虽然差别细微,但在大段文字的排版中, 这种整齐的边缘能在一定程度上提升阅读体验。
The Type 的 Eric 老师曾在2017年发表的《标点挤压与标点悬挂》一文中,对中文排版中的标点细节有极为细致的讲解。
文章中的观点是,标点悬挂是一种「舶来品」,在西文排版中更为常见,其目的是为了让文本的边缘看起来更整齐,因此会同时针对行首和行尾进行调整,有时甚至包括一些向内凹陷的字母;中文的传统则是源自雕版印刷的「版框」概念——内容必须全部放进版心——因此标点悬挂并不常见。 通常只在行尾进行悬挂,较少从行首向外挤出标点。标点悬挂的优点在于保持中式网格式的稿纸密排模式,避免出现零碎空隙,从而令版面更为整齐,提高可读性。但若简单地套用西文规则,有时反而会让版面显得怪异。此外,Eric 也特别提到一个技术风险:该功能在当时的 W3C 草案中被列为「At risk」,即 有可能会被移除 的功能。
示例
以下是一段由我用 Gemini 生成的短篇对话,用来展示不同浏览器中引号的表现差异。
「外面下雨了。」
他的目光从书页上移开,望向窗外,心里想着,这寂静终于被打破了。
「是啊,听这雨声。」
另一个声音回应道,带着一丝不易察觉的安宁,仿佛早已沉浸在这雨中。
「像是无数个细小的秘密在窃窃私语。」
先开口那人轻声说,思绪仿佛被雨丝牵引着,飘向了遥远的过去。
「我倒觉得它在清洗这个世界。」
对方的嘴角微微上扬,心中却想着,或许我们需要的不是沉溺,而是焕然一新。
「或许也在清洗我们的心情。」
这句话似乎触动了他的心弦,一种莫名的重负感好像真的随着雨声减轻了。
「希望如此。」
她在心里默默补充,为自己,也为你。
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
的最终标准感到耿耿于怀,为了泄愤而到处用它。
我不是大佬,不过我猜你们都知道我想说啥。
虽然不少人觉得这个特性可有可无,但我仍希望有一天,它能真正排上议事日程,并被各家浏览器实现。


