WordPress的中西文混排增加空白(2025版)

对十年前的回应。

TL;DR

在当前WordPress主题“自定义”功能的“额外CSS”中增加以下的CSS,保存发布即可。

:root { text-autospace: normal; }

原理

这一方法实现的原理很简单,因为截止到文章写成的时间(除了尚未进入发布通道的FireFox 145),主流的三大浏览器(Chrome、Firefox、Safari)都已经增加了对text-autospace CSS属性的支持。具体的兼容性矩阵可以参考MDN上的文章。 相比于先前文章中繁琐的步骤,现在终于可以以一个简单的方法使得网页上的中西文混排更加好看了。

目前本站的页面已经启用了这一设置,可以通过支持的浏览器看到相应的效果。

原先使用text-autospace.js的效果
当前使用text-autospace属性的效果

这里再不妨再回顾一下为什么要加空格。W3C的《中文排版需求》中提到

原则上,汉字与西文字母、数字间使用不多于四分之一个汉字宽的字距或空白。
第6.3.3节,《中文排版需求》,W3C

至于为什么不是手动加空格,在先前文章中也有提到,

在输入的时候手动输入一个半角空格,但是这样的排版破坏了原始文本的语义(因为原始文本不存在空格)

这个间距应当是排版时候的行为,而不应当是一个语义上的行为,因此像Microsoft Word或者LaTeX这样的排版引擎也都是在排版的时候增加间距。

在先前文章中所使用解决方案是为WordPress引入一个JavaScript脚本及其对应的CSS。其核心方法是脚本利用正则匹配中西文的边界,然后增加一对<hanla></hanla>标签,并利用CSS的content属性增加一个不会被选中的空白。这一方法的缺陷在于需要在页面加载之后对已经渲染好的页面进行修改,也就会发生页面元素的重排。

前述CSS在启用的时候可能还需要考虑兼容性问题,因此可以使用下面的CSS

@supports (text-autospace: normal) {
  :root {
    text-autospace: normal;
  }
}

让浏览器自行决定是否启用这一特性。本站考虑到截止文章完成时候仍然有不兼容的浏览器,因此仍然保留了原来的text-autospace.js脚本以及CSS。但是原有的脚本和CSS仅会在text-autospace属性不支持的时候按需加载,避免浪费带宽以及产生冲突。

后记

从W3C的《中文排版需求》发布到各大浏览器终于有一个实质性的支持,已经过去了将近10年。而从上一篇有关这一主题的文章也过去了将近10年。今年年初的时候突然看到原先那篇沉寂已久的文章有了新的Pingback,随后又看到Safari与Chromium先后添加了这一CSS属性。随着近期Firefox也增添了这一特性,这正是本站引入这一支持的良好时机。因此花费了一些时间对原有的引入text-autospace.js的机制进行了一些更新。也期待W3C的《中文排版需求》能够尽快地走出草案并真正得到实现。

《WordPress的中西文混排增加空白(2025版)》上有1条评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注