html - 有色变音符号和unicode行为

我偶然发现了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; }

我得到以下结果，这是无法预料的，但却是美好的结果:

这是怎么回事我天真地猜到，字体渲染算法更喜欢像ōõöřǒ这样的预渲染字符，只要它们存在于字体中，而不是像p̄m̃d̈这样的动态组合字符，则回顾性地将其渲染为一个或两个单独的元素，然后才触发变音符号着色。第二种情况。 (请坦率地告诉我，当这种解释完全是胡说八道时。)此外，这意味着为变音符号着色的方法令人惊讶地实际上是在非标准情况下起作用的。谁能解释这种行为？并且是否也有办法对其他(完全蓝色)字母强制执行此操作？这是一种“有趣”的问题，目前尚未与应用程序相关联，但这可能是一个值得学习的有趣案例。

我放了一个fiddle，以便您可以玩耍。

最佳答案

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

我在fiddle(问题中提到的版本2)中进行了尝试。我将U + 034F直接放在每个基本字母后面，的确确实如此，正如RandomGuy32解释的那样。您在此处的代码块中看不到，因此我插入了注释以指示U + 034F的位置:

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

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

关于html - 有色变音符号和unicode行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47956716/