CSS阿拉伯语渲染异常：如何单独着色字母与变音符号

阿拉伯语的变音符号（如本例中的َ）属于依附性字符，视觉上会附着在前序字母上——尽管DOM结构里它和字母分属不同span，但浏览器渲染时会将其与关联字母视为一个视觉单元，导致变音符号继承了字母的颜色。以下是两种可行的解决方法：

方案1：独立span包裹变音符号+定位调整 #

修改HTML结构，把变音符号单独放在一个span里，通过CSS定位让它回到字母上方，同时设置默认颜色：

<span class="outer">
  <span class="inner">ب</span><span class="diacritic">َ</span>
</span>

.inner {
  color: rgb(0, 152, 188);
}
.diacritic {
  color: initial; /* 继承父元素的默认文本颜色 */
  position: relative;
  left: -0.45em; /* 根据实际字体调整偏移量，保证符号对齐字母 */
  font-size: inherit;
}

方案2：伪元素添加变音符号（无需修改HTML结构） #

如果不想改动原有HTML结构，可以用outer的伪元素生成变音符号，符号样式完全由outer控制，不受inner影响：

<span class="outer">
  <span class="inner">ب</span>
</span>

.inner {
  color: rgb(0, 152, 188);
}
.outer::after {
  content: "َ";
  color: initial;
  position: relative;
  left: -0.45em; /* 根据字体微调偏移量 */
}

注意事项 #

• 偏移量left的数值需要根据你使用的阿拉伯语字体字符宽度微调，确保变音符号准确附着在字母上方；
• 若需要指定变音符号的特定颜色，直接替换color: initial为目标颜色值即可（如color: #000）。

内容的提问来源于stack exchange，提问作者khai