彩色变音符号和 unicode 行为

Question

我只是偶然发现了这个关于着色变音符号的问题。任务是用不同于基本文本的另一种颜色为变音符号着色，例如以蓝色和红色á呈现。我想我可以试一试，通过 unicode 组合标记将字母和变音符号分开，并通过在它周围放置一个来为变音符号应用另一种颜色，如下所示：a´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?回顾性地将其渲染为一个或两个单独的项目，然后仅在第二个触发变音符号着色案件。（当这种解释完全是胡说八道时，请坦率地告诉我。）此外，这意味着为变音符号着色的方法令人惊讶地在非标准情况下确实有效。谁能解释这种行为？是否有办法对其他（完全蓝色）字母强制执行此操作？这是一种“有趣”的问题，目前尚未与应用程序相关联，但它可能是一个值得学习的有趣案例。

我放了一个小提琴，所以你可以玩弄它。

Answer 1

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

\n\n

\n

在基本字母和重音符号之间插入组合字素连接符 (U+034F)。这样，字体渲染器就不会尝试替换预先组合的字形，而是分别将颜色应用于每个字符。

\n

\n\n

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

\n\n

o\xcd\x8f<!--U+034F--><span>\xcc\x84\n

\n\n

但是，这需要客户端或服务器端的渲染器用变音符号处理每个字母，然后将其分开并插入span和 U+034F。当您不想将文本加倍时，这可能是一个解决方案（如上述页面上基于 CSS 的解决方案中所建议的那样）上基于 CSS 的解决方案中所建议的）。

\n