网页自动调整中英文间距

2025-04-30 /

TL;DR

text-autospace: normal;

背景

中日韩汉字与英文（数字）混排时，为了更好的视觉效果，应当在汉字与英文（数字）之间添加间距。在 markdown 文档中，我会手动添加空格，参考「中文文案排版指北」；在富文本编辑器，例如 Word 与 Pages 中，我什么都不做，交由软件自动处理。总而言之，除非所用的软件能自动处理间距，我都会手动添加空格。

漢學家稱這個空白字元為「盤古之白」，因為它劈開了全形字和半形字之間的混沌。另有研究顯示，打字的時候不喜歡在中文和英文之間加空格的人，感情路都走得很辛苦，有七成的比例會在 34 歲的時候跟自己不愛的人結婚，而其餘三成的人最後只能把遺產留給自己的貓。畢竟愛情跟書寫都需要適時地留白。¹

但在网络上，绝大多数内容我都无法控制，中英文之间没有适当间距的情况比比皆是，十分丑陋。

因此，针对网页内容已经诞生一些优化方案，例如 pangu.js。但说到底这些都是第三方方案，接下来我们要讨论的方案则更加原生。

CSS: text-autospace

该属性包含 5 个值：no-autospace 即不添加间距；auto 为自动，我观察到的行为是不添加间距；normal 即自动添加间距；而 ideograph-alpha 和 ideograph-numeric 分别为只在「汉字、英文间」与「汉字、数字间」添加间距。

Safari 用户

Safari 18.4 中正式引入了对 text-autospace² 属性的支持。由于 Safari 版本与 macOS 版本是绑定的，你只需更新到 macOS Sequoia 15.4 及以上即可。

我们需要的值是 normal。创建如下 CSS，不妨命名为 autospace.css：

* {
    text-autospace: normal;
}

然后在 Safari > Settings > Advanced > Style sheet 中选择 autospace.css，即可将该属性应用于网页中的所有元素。

Chrome 用户

如果你用的是 Chrome >= 120，你可以尝试启用实验性功能,路径为 chrome://flags/#enable-experimental-web-platform-features，Chrome 好像已经在实验性功能中对 text-autospace 提供了支持，不过我没有测试过。

网页开发者

如果你是网站开发者，你也可以在恰当的位置应用该属性，例如：

<article>balabalabala</article>

<style>
    article {
        text-autospace: normal;
    }
</style>

需要注意的是目前（2025 年 4 月 30 日）这个属性兼容性非常差，只有 Safari 正式支持。你可以在 caniuse.com 查询其兼容状况。

示例

我观察到 text-autospace: normal 的效果与手动添加的空格略有区别，且即使手动添加了空格，text-autospace: normal 也会使中英文间距略微变宽。以下四行分别是：

手动添加空格，text-autospace: normal
手动添加空格，text-autospace: no-autospace
不手动添加空格，text-autospace: normal
不手动添加空格，text-autospace: no-autospace

I 不喜欢 those 不在中en文之间添加 1 个 space 的人。

I不喜欢those不在中en文之间添加1个space的人。

以最新的 Safari 为例，你应该观察到以上四行的长度依次递减，其中，第一行只是比第二行宽了一点点，需要仔细观察。如果你看到上面的第 1、2 行长度相等，第 3、4 行长度也相等，说明你的浏览器还没有正式支持 text-autospace。