HTML – 彩色变音符号和unicode行为

2023年10月15日 298次阅读

我只是偶然发现了
this question about coloring diacritics.任务是用另一种颜色而不是基本文字来染色变音符号,比如á呈现蓝色和红色.我想我可以尝试一下,通过unicode组合标记来分隔字母和变音符号,并通过在其周围放置一个跨度,将另一种颜色应用于变音符号,如下所示：

<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; }

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

《HTML – 彩色变音符号和unicode行为》

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

我拿了一个fiddle所以你可以玩它.

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

to insert the Combining Grapheme Joiner (U+034F) between the base
letter and the accent. This way the font renderer won’t try to
substitute the precomposed glyph and instead apply the colours to each
character separately.

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

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

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

点赞