如何在网页中为满文/蒙古文脚本添加颜色标记？

问题背景 #

尝试给传统满文单词中的元音单独上色，最初用<span>包裹单个元音字符的方法失效——满文作为草书脚本，span会人为断开单词的连笔结构；但同样是草书的阿拉伯文用该方法却能正常显示。试过HarfBuzz、Canvas手动渲染、修改字体、自由变体选择器等方案，要么实现成本过高，要么不符合许可或无法覆盖所有场景。

可行解决方案 #

1. SVG <tspan>精准上色 #

SVG对复杂脚本排版支持更友好，通过<tspan>标记单个元音并设置颜色，能保持整体连笔结构：

<svg width="400" height="50" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="30" font-family="ManchuFont" font-size="24">
    <tspan fill="red">ᠠ</tspan>ᠮᠪᡠᠯ<tspan fill="red">ᠠ</tspan> ᠪᠠᠨ<tspan fill="red">ᡳ</tspan>ᡥ<tspan fill="red">ᠠ</tspan>
  </text>
</svg>

需确保使用的满文字体支持SVG内的正确排版，该方法能精准控制单个字符颜色且不破坏连笔。

2. CSS background-clip: text（适合静态文本） #

如果文本内容固定，可通过线性渐变精准定位元音位置实现上色：

.manchu-text {
  background: linear-gradient(to right, 
    red 0%, red 10%, /* 第一个元音宽度占比，需手动调整 */
    black 10%, black 40%,
    red 40%, red 50%, /* 第二个元音宽度占比 */
    black 50%, black 70%,
    red 70%, red 80%, /* 第三个元音宽度占比 */
    black 80%, black 90%,
    red 90%, red 100% /* 第四个元音宽度占比 */
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

缺点是需要手动计算每个元音在文本中的宽度占比，动态内容维护成本高。

3. WebAssembly版HarfBuzz简化渲染 #

使用预编译的WebAssembly版HarfBuzz（如harfbuzz-wasm）处理满文字形布局，再通过Canvas给对应元音的字形上色，比手动实现字形规则简单：

import HarfBuzz from 'harfbuzz-wasm';

async function renderColoredManchu(text, vowelCodepoints) {
  const hb = await HarfBuzz.load();
  const fontData = await fetch('manchu-font.ttf').then(res => res.arrayBuffer());
  const face = hb.createFace(fontData, 0);
  const font = hb.createFont(face);
  
  const buffer = hb.createBuffer();
  buffer.addText(text);
  buffer.guessSegmentProperties();
  hb.shape(font, buffer);
  
  const glyphInfos = buffer.getGlyphInfos();
  const glyphPositions = buffer.getGlyphPositions();
  
  const canvas = document.getElementById('manchu-canvas');
  const ctx = canvas.getContext('2d');
  let x = 10, y = 50;
  ctx.font = '24px ManchuFont';
  
  glyphInfos.forEach((info, index) => {
    ctx.fillStyle = vowelCodepoints.includes(info.codepoint) ? 'red' : 'black';
    ctx.fillText(String.fromCodePoint(info.codepoint), x, y);
    x += glyphPositions[index].xAdvance / 64; // HarfBuzz单位为1/64像素
  });
}

适合需要动态内容的场景，无需手动处理连字、字形替换规则。

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