Unicode Variation Selector-15 和我的一些眼泪

# Unicode 变体选择器-15 以及我的一些眼泪 来源：https://benjaminwil.info/weblog/variation-selector-15/ 从我的手机上，我注意到我的网站在 RSS 阅读器中显示脚注返回链接字形时变成了 emoji。但以前并不是这样的。我在桌面浏览器上打开同一页面，看到了我预期的样子：在文章正文的字体中，一个类似文字的图形，完全没有 emoji 的踪迹。我检查了 HTML 文档源码：`↩`，RSS feed XML 中也一样。那么，它既可以呈现为文字，也可以呈现为 emoji？ `&#x8617;` 是 Unicode 码位 `U+21A9`（带钩左箭头）的 HTML 表示形式。这让我找到了许多相关的讨论帖、粘贴内容和博客文章[1]，其中其他人也观察到了类似的问题，涉及带钩左箭头和其他类似的导航装饰字符。我们都在讨论 `U+21A9` 在未指定 Unicode 标准化变体序列的情况下的渲染问题。所以，完全由渲染 `U+21A9` 的程序来决定如何显示。`U+21A9` 应该渲染为哪个版本——文字版还是 emoji 版？ 我找到了正确的解决方案和一些不太正确的解决方案。在描述它们之前，我想先探讨一下变体选择器引入的一个更大的问题。 ## 下游影响 对于像返回链接字形这样的元内容字符，对于懂技术的人来说，前进方向是明确的：修复和/或配置构建网页的工具；或者向能够修复和/或配置该工具的人抱怨。但对于许多其他字符来说，情况就更复杂了。这些字符中有许多用于正文内容，具有表达性。如果渲染成文字呈现而不是 emoji 呈现，最坏的情况可能会成为一种**误译**。 技术标准（其中 `emoji-data` 链接，特别是 `emoji-data.txt`）列出了超过 1000 个同时具有文字和 emoji 呈现形式的 Unicode 码位。 | 码位 | 字形 | 作为文字 (+ `U+FE0E`) | 作为 emoji (+ `U+FE0F`) | |------|------|-----------------------|-------------------------| | `U+00A9` | © | ©︎ | ©️ | | `U+00AE` | ® | ®︎ | ®️ | | `U+2328` | ⌨ | ⌨︎ | ⌨️ | | `U+25B6` | ▶ | ▶︎ | ▶️ | | `U+2603` | ☃ | ☃︎ | ☃️ | | `U+2620` | ☠ | ☠︎ | ☠️ | | `U+267B` | ♻ | ♻︎ | ♻️ | | `U+1F310` | 🌐 | 🌐︎ | 🌐️ | | `U+1F312` | 🌒 | 🌒︎ | 🌒️ | | `U+1F37C` | 🍼 | 🍼︎ | 🍼️ | | `U+1F441` | 👁 | 👁︎ | 👁️ | | `U+1F509` | 🔉 | 🔉︎ | 🔉️ | | `U+1F590` | 🖐 | 🖐︎ | 🖐️ | | `U+1F635` | 😵 | 😵︎ | 😵️ | | `U+1F636` | 😶 | 😶︎ | 😶️ | **表1** 超过 1000 个同时具有文字和 emoji 呈现形式的 Unicode 码位的小样例。*字形* 列可能因你阅读本文的应用程序而异。我希望 **+ `U+FE0E`** 和 **+ `U+FE0F`** 列对所有读者**都能**以相同方式渲染。 对于作者来说，这里没有明显、直接的用户体验。对于大多数程序来说，图形文字和 emoji 都是**普通文字**，变体选择器除非你刻意寻找，否则不可见。作者是想展示雨伞 ⛱︎ 还是雨伞 ⛱️？我们不知道他们的写作工具在编辑时呈现了哪种效果。他们也不知道我们阅读时看到的并非他们以为我们看到的。 在理想世界中，所有软件都应该了解并为用户插入变体选择器。但现实中，我们知道软件很糟糕。我找到了一些文档，表明 Unicode 技术委员会意识到变体选择器很复杂[2]，可能不是最佳策略[3]。但木已成舟，对于 Unicode 标准来说，已经无法挽回。 ## 最正确的解决方案 你可以在源文档中指定要渲染的版本。方法是将变体选择器码位与前面的码位组合在一起。在我的例子中，那就是 `U+FE0E`（变体选择器-15）。以我源文档中的返回链接 HTML 标记为例： ```html ↩︎ ``` 而且，如果我愿意，我也可以反过来做：使用 `U+FE0F`（变体选择器-16）强制 emoji 呈现： ```html ↩️ ``` **图1** 通过 `U+21A9 U+FE0E` 渲染的图形。 ↩ ↩️ **图2** 单独的 `U+21A9` 渲染的 emoji，旁边是通过 `U+21A9 U+FE0F` 渲染的 emoji，其中 `U+FE0F`（变体选择器-16）强制字形使用全彩色 emoji 变体。 Deja Vu Mono 中的带钩左箭头图形 iOS 中的带钩左箭头 emoji **图3** 这是通过单独的 `U+21A9` 渲染的图形版本和 iOS emoji 版本的图片。正如我已经提到的，无选择器时看到的变体可能因应用程序而异。 所以，我可以为自己解决这个问题。幸运的是，我构建了生成这个网站的软件；而且我使用的、从 Markdown 源文档生成 HTML 的库（Kramdown）具有可配置的脚注返回链接字形。但有些作者使用的是 Mistune 库（例如，通过 Bear 博客平台）[4]，或者一些其他小众内容渲染库，在本文撰写时，他们并没有同样的便利条件。 ## 一些不太可靠的解决方案 如果你处于**不**控制从源文档生成 HTML 的软件的情况，并且由于某些原因无法在你想要的地方插入变体选择器字符，那么还有其他一些方法可以尝试。（至少对于像网页浏览器这样使用 CSS 进行文档呈现的应用程序来说是这样。） ### font-variant-emoji `font-variant-emoji` CSS 属性目前 Safari 不支持，但希望很快会支持。它允许你为任意 DOM 元素指定 Unicode 字符的首选呈现形式： ```css .umbrella { font-variant-emoji: text; } ``` ```html <span class="umbrella">⛱</span>, 或 <span>⛱</span>. ``` 但我认为这永远不会是一个万无一失的解决方案。即使浏览器广泛支持，也不能完全解决像 feed 阅读器这样的非网页浏览器应用程序呈现网页内容的问题。 ### font-family: monospace 如果你想要一个更不可靠的解决方案，将 CSS 的 `font-family` 属性设置为 `monospace` 有时也能奏效： ```css .umbrella { font-family: monospace; } ``` ```html <span class="umbrella">⛱</span>, 或 <span>⛱</span>. ``` 但这只能强制将 emoji 呈现的字符改为文字呈现的字符。而且 `monospace` 是一个通用字体指定器，在不同设备上看起来可能不同。 | 码位 | 解决方案 | 字形 | + `U+FE0E` | + `U+FE0F` | |------|----------|------|------------|------------| | `U+26F1` | 无 | ⛱ | ⛱︎ | ⛱️ | | `U+21A9` | 无 | ↩ | ↩︎ | ↩️ | | `U+26F1` | `font-variant-emoji: text` | ⛱ | ⛱︎ | ⛱️ | | `U+21A9` | `font-variant-emoji: text` | ↩ | ↩︎ | ↩️ | | `U+26F1` | `font-variant-emoji: emoji` | ⛱ | ⛱︎ | ⛱️ | | `U+21A9` | `font-variant-emoji: emoji` | ↩ | ↩︎ | ↩️ | | `U+26F1` | `font-family: monospace` | ⛱ | ⛱︎ | ⛱️ | | `U+21A9` | `font-family: monospace` | ↩ | ↩︎ | ↩️ | **表2** 演示不太可靠解决方案的表格。