html - 如何使发空间和细空间不断裂？

Question

我们的项目中有辅助函数，用于将值格式化为人类可读且美观的字符串。

由于设计要求，函数返回包含各种空白字符的文本(例如 U+2009 «thin space» 或 U+200A «hair space»)。

但同样的设计要求要求格式化文本不间断。

我们到了。

• 我们不能使用 U+00A0 «不间断空格»，因为它的宽度不合适。
• 我们使用设计所需的空间，但它们可以用作换行符。

我们可以从这些助手返回 HTML，而不是纯字符串(然后将 white-space: nowrap CSS 应用于 HTML)。但这需要重构所有使用帮助器的代码，并使组件中使用格式化值变得复杂(我们使用 React)。

这就是问题:如何在没有 HTML/CSS 的情况下使任何 Unicode 空白字符不间断？

Unicode 中有很多功能可以将字符组合成簇并控制文本的视觉属性:组合字符和标记、连接符、选择器、修饰符等。也许至少其中一种可以使任何空白字符不间断？ :)

谢谢。

Answer 1

U+2060 WORD JOINER 是一个不可见的零宽度字符，其唯一作用是防止在其位置处换行。因此，将 WORD JOINER 放在任何空白字符之后将使其不会中断。 (没有必要在空格之前放置 WJ，因为 Unicode 中的所有空格都会自动禁止紧邻其前面的换行。)

UPD1 来自以下评论:

Unicode 标准绝对要求 WJ 保留其中断阻塞属性。然而，有一个7岁的bug在 Firefox 中实现了 Unicode 换行算法，因此在 Firefox 中，空格+WJ 的组合就像没有 WJ 的空格一样。

在 Chrome 和 Safari 中，WJ 按照标准工作。

UPD2 来自discussion在 Twitter 中(归功于 CharlotteBuff 和 FakeUnicode):

• 可以使用 U+034F COMBINING GRAPHEME JOINER 代替 U+2060 WORD JOINER 作为 Firefox 的解决方法。它可以防止 Firefox 中的换行，但不能在 Chrome 和 Safari 中。此外，U+034F CGJ 的这种使用在语义上是可疑的，因为 CGJ 具有不同的预期目的。尽管如此，U+034F CGJ 不太可能导致任何类型的可访问性问题(使用屏幕阅读器和类似的东西)。

• 也可以使用 U+200D ZERO WIDTH JOINER 来防止断线。 ZWJ 在“三巨头”(Chrome、Safari、Firefox)中运行良好。然而，ZWJ 可能会对周围文本的外观产生不良影响，因为它的目的是在原本不会自动发生的地方引发草书连接(例如阿拉伯语: Μ + Ë + ä = ❗️)。如果 ZWJ 文本的字体中有花哨的连字，ZWJ 可以(并且可能会)触发它们并改变附近符号的形状。

注意:Wiki将 ZWJ 表示为“可能休息:是”，但它是 mistaken .

因此，以下是在浏览器中查看和检查的所有选项:

div {
  outline: 1px solid red;
  width: 20px;
  margin: 10px;
}

<!-- U+00A0 NO-BREAK SPACE -->
<!-- just for example -->
<div>hello&#x00A0;world1</div>


<!-- U+200A HAIR SPACE + U+2060 WORD JOINER -->
<!-- works fine, but does not work in FF -->
<div>hello&#x200A;&#x2060;world2</div>

<!-- U+200A HAIR SPACE + U+034F COMBINING GRAPHEME JOINER -->
<!-- works, but 1) semantically incorrect and 2) does not work in Chrome and Safari-->
<div>hello&#x200A;&#x034F;world3</div>


<!-- U+200D ZERO WIDTH JOINER + U+200A HAIR SPACE + U+200D ZERO WIDTH JOINER -->
<!-- works, even in FF! -->
<div>hello&#x200D;&#x200A;&#x200D;world4</div>

<!-- U+200A HAIR SPACE + U+200D ZERO WIDTH JOINER -->
<!-- works, even in FF! -->
<div>hello&#x200A;&#x200D;world5</div>