彩色变音符号和unicode行为

Posted 2021-04-05

我只是偶然发现了this question about coloring diacritics。任务是用另一种颜色而不是基本文本对变音符号进行着色，例如在á中呈现蓝色的a和红色的´。我想我可以尝试一下，通过unicode组合标记来分隔字母和变音符号，并通过在它周围放一个span将另一种颜色应用于变音符号，如下所示：

<p>
p<span>̄ </span>
o<span>̄ </span>
m<span>̃ </span>
o<span>̃ </span>
d<span>̈ </span>
o<span>̈ </span>
r<span>̌ </span>
o<span>̌ </span>
</p>

现在，定义了一个这样的简单CSS，

p { color:blue; }
span { color:red; }

我得到以下，非常不可预见但美丽的结果：

这里发生了什么？我天真地猜测，字体渲染算法喜欢ōõöřǒ之类的预渲染字符，只要它们存在于字体中，而不是像p̄m̃d̈这样的动态组合字符，将其渲染为一个或两个单独的项目，然后触发变音符号着色第二种情况。 （请坦率地告诉我，这种解释完全是胡说八道。）此外，这意味着对变音符号着色的方法实际上非常适用于非标准情况。谁能解释这种行为？是否有办法为其他（完全蓝色）字母强制执行此操作？这是一个尚未与应用程序相关联的“有趣”问题，但它可能是一个值得学习的有趣案例。

我放了一个fiddle所以你可以玩它。

答案

RandomGuy32提出的一个有效解决方案是

在基本字母和重音之间插入Combining Grapheme Joiner（U + 034F）。这样，字体渲染器将不会尝试替换预合成的字形，而是将颜色分别应用于每个字符。

我在fiddle（我的问题中提到的第2版）中尝试过这个。我在每个基本字母后面直接放置了一个U + 034F，实际上这正如RandomGuy32所解释的那样。你没有在这里的代码块中看到，所以我插入了一个注释来指示U + 034F的位置：

o͏<!--U+034F--><span>̄

但是，这需要客户端或服务器端的渲染器处理具有变音符号的每个字母，然后将其分开并插入span和U + 034F。当您不想将文本加倍时（如page mentioned above上基于CSS的解决方案中所提出的），它可能是一种解决方案。