管理中文和日文中的行内空白

如何实现 CSS规范预期浏览器在没有样式的情况下，应当自动在连续表意字符或假名字符与连续字母数字文本之间插入间隙（即normal值）。间隙大小取决于浏览器，不过CSS规范建议使用表意字符宽度的1/8，这在建议的长度中偏小。遗憾的是，目前没有浏览器会在无样式的情况下插入间隙。

原则上，要通过样式实现这一效果，应当可以在样式表中使用CSS text-autospace属性。不要使用空格字符！

text-autospace属性的取值可按如下方式微调结果。

normal

这会产生与组合ideograph-alpha ideograph-numeric（见下文）相同的行为。也就是说，它会在连续表意字符与连续非表意字母或数字之间创建间隙，但只会在没有使用普通空格的位置插入间隙。

撰写本文时，Blink和Gecko浏览器会在字母和数字周围产生间隙。WebKit浏览器会在字母数字文本之前创建小间隙，但不会在其后创建。

ideograph-alpha和ideograph-numeric

这些值通常一起使用。一起使用时，它们会在字母和数字周围创建间隙。

撰写本文时，Blink浏览器不支持这些值。Gecko浏览器在单独使用时支持这些值，但一起使用时不支持。WebKit浏览器会在字母数字文本之前创建小间隙，但不会在之后创建。无论这两个值是否一起使用，情况都是如此。

目前，使用normal值比使用这些单独关键字更稳妥。

replace

CSS可以通过两种方式添加间隙。如果文本中已经包含由普通空格字符产生的间隙，CSS默认只会在没有空格的位置添加间隙。另一方面，如果你想缩小所有基于空格的间隙宽度，并在全文中应用均匀间距，请使用replace值。text-autospace:ideograph-alpha ideograph-numeric replace; 会从显示文本中移除所有空格字符字形（不改变内存中的字符），并用标准宽度的间隙替换；它也会在未使用空格字符的位置创建间隙。

目前三大浏览器引擎都不支持使用replace。实际情况甚至更糟：如果添加replace关键字，Gecko和WebKit浏览器将不再应用它们在没有该关键字时本会产生的间隙。另请注意，replace关键字不能与normal一起使用，这似乎很可惜。（另见相关功能请求。）

no-autospace

要移除所有合成间隙（但保留所有手动输入的空格字符），可使用text-autospace:no-autospace。

auto

将自动间距行为的控制权交给浏览器，前提是浏览器实现了不同于常规情况的特殊规则。请注意，如果使用该值，你的文本在不同浏览器中可能看起来不同。

如何实现 CSS Text规范提出了一种方法，可以使用CSS text-spacing-trim属性移除标点符号之间多余的间隙。

你可以使用text-spacing-trim:normal告诉浏览器你想这样做，但实际上，该属性的以下附加值也会移除标点簇中的空白：trim-both、space-first、trim-start和trim-all。具体应选择哪个值，取决于你希望如何处理段首空白，后文会讨论这一点。

:root { text-spacing-trim: normal; }

如果出于某种原因想防止空白折叠，可以使用text-spacing-trim:space-all。

是否有效？ 截至撰写本文时，浏览器对text-spacing-trim的支持有限。

Blink浏览器支持使用上述值缩小间隙，但也会默认缩小间隙，不需要样式。

不过，WebKit和Gecko浏览器不会缩小标点符号之间的空白。

字体依赖

下文会看到，我们希望实现的一些行为目前存在于Blink引擎浏览器中，例如Chrome、Edge、Brave等。不过需要注意的是，能否成功取决于所用字体。

CSS规范指出，浏览器可能依赖OpenType特性来裁剪相关字形。

下表显示哪些macOS和Noto字体支持裁剪前导空白，哪些不支持（在Blink浏览器中）。

以上结果来自横排文本显示。某些字体（如PingFang TC）在横排文本中支持预期行为，但在直排文本中不支持。还应注意字体是否支持你想使用的括号字形：例如，Hiragino Sans TC字体似乎不支持 〖 括号（虽然它支持 【 括号），如果同时使用该括号和该字体，可能会看到意外失败。

场景 #1：无空白，无缩进

当段落由空行分隔时，段落首行通常不缩进。此时，如果段落以开始括号开始，通常会移除其前的半角空白。

为此，应当可以使用text-spacing-trim，并将值设为trim-start或trim-both。这些值应当移除括号的前导空白，无论括号位于段首，还是位于段落内部但换到新行行首。

trim-start和trim-both的区别在于，前者只裁剪开始括号，而后者还会裁剪行尾的闭括号。

:root { text-spacing-trim: trim-start; }
p { margin-block: 1em; }

是否有效？ Blink浏览器支持trim-start值，但不支持trim-both。Gecko或WebKit浏览器均不支持这两个值。

场景 #2：“悬挂”标点

日文文本的一种常见排法是移除段落之间的间隙，并让每个段落以1em缩进开始。当开始括号出现在段落首行开头时，它会占据该缩进的右半部分（或下半部分）。从视觉上可以将其理解为一个全角字符替代了缩进，也可以理解为半角括号“悬挂”在实际行首的左侧/上方。

对于这种排法，CSS规范建议使用下面框中所示规则。text-indent属性为所有段落应用缩进。text-spacing-trim行移除括号的前导空白。然后hanging-punctuation行将括号移入缩进空间。

p {
  margin-block: 0;
  text-indent: 1em;
  text-spacing-trim: trim-both;
  hanging-punctuation: first;
  }

是否有效？ 遗憾的是，目前Blink或Gecko浏览器无法实现这种方法，因为它们不支持hanging-punctuation属性。

WebKit浏览器支持hanging-punctuation:first，段落开头的括号看起来符合预期。不过，WebKit浏览器不会移除段落内部换到行首的括号前的半角空白。

场景 #3：非悬挂缩进

上图显示了首行缩进的中文段落。中文常见的缩进为2em。括号的前导空白被移除，但与前面的日文示例不同，括号不会悬挂在缩进空间中。

以下CSS应当能实现这一效果。text-indent属性同样为所有段落应用缩进（但这次是2em间隙）。然后text-spacing-trim行移除括号的前导空白。

p {
  margin: 0;
  text-indent: 2em;
  text-spacing-trim: trim-start;
  }

是否有效？ 在上面的测试中，我们使用trim-start值，只是因为它在Blink浏览器中有效。理想情况下，你也应当能使用trim-both。

这种方法在Blink浏览器中有效，但在Gecko和WebKit浏览器中，括号宽度不会缩小，这会在段首括号前产生2½个空格。后两个引擎当然也无法移除换到新行行首的行内括号前导空白。

场景 #4：space-first布局

许多现有内容，尤其是ePub文档，是在CSS处理段首标点问题之前创建的。因此，常见做法是在大多数段落首行前使用一个表意空格字符，但在需要时改用全角括号字形。这会产生上面悬挂示例中看到的括号前半角空白。它看起来相同，但通过字符而不是样式实现。

text-spacing-trim的space-first值就是为便于这种排法而设计的。我们仍然希望换到新行的行内括号为半角，但要确保段首括号保持全角（不同于使用trim-start时）。不需要text-indent属性或hanging-punctuation属性。

p {
  margin-block: 0;
  text-spacing-trim: space-first;
  }

是否有效？ Blink浏览器支持该值。Gecko和WebKit浏览器对段首括号没有问题（因为没有应用样式），但尚未实现该值，这意味着换到新行的括号会保持全角。

场景 #5：space-all

台湾内容作者可能更倾向于使用space-all。除了让行首和行尾保持全角字形外，space-all还会禁止相邻行内标点之间的空白折叠（见punctuation_sequences）。

其他值

其他值normal和trim-all会产生fig_text_spacing_trim_values所示的效果。

trim-all会在所有地方裁剪带有可折叠空白的括号和其他标点的宽度，不只是行首和行尾。这正是trim-all与trim-both的区别。

trim-both会裁掉行首和行尾的多余空白，但保留行内空白。例如：

相比之下，trim-all会裁掉所有位置的多余空白。例如：

两端对齐

如果你想对齐文本，使行尾闭括号与相邻行字符末端齐平，需要选择一个会强制行尾括号为半角的text-spacing-trim值。为此，trim-both比trim-start更合适，因为后者可能会在行尾放置全角字形。