如何仅为孟加拉语单词首辅音着色而不包含Kar符号？

需求 #

需要为孟加拉语单词中的首个辅音（如ক、খ、গ、ঘ、ঙ、চ、ছ、জ、ঝ、ঞ等）及其附带的10种短元音附标（া、ি、ী、ু、ূ、ৃ、ে、ৈ、ো、ৌ）统一设置不同颜色，让二者同步呈现目标颜色。

初始尝试方案 #

直接使用<mark>标签包裹首个辅音，但元音附标作为独立字符无法被一同染色，效果不符合预期：

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@100..900&display=swap');
p {
  font-family: "Noto Serif Bengali", serif;
  font-variation-settings: "wdth" 100;
}

mark {
  color: red;
  background: transparent;
}

HTML代码 #

<p>
  <mark>ক</mark>াগজ<br/>
  <mark>ঠ</mark>েলাগাড়ি<br/>
  <mark>দ</mark>োয়েল<br/>
</p>

纯CSS改进方案 #

参考@etuardu的思路实现，通过伪元素叠加染色后的首个辅音，实现辅音与元音附标同步变色：

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@100..900&display=swap');
p {
  font-family: "Noto Serif Bengali", serif;
  font-size: 24px;
}

span[data-mark] {
  position: relative;
}

span[data-mark]::after {
  content: attr(data-mark);
  color: red;
  position: absolute;
  left: 0;
  top: 0;
}

span[data-mark-offset]::after {
  left: 0.39em;
}

HTML代码 #

<p>
  <span data-mark="ক">কাগজ</span><br/>
  <span data-mark="ঠ" data-mark-offset>ঠেলাগাড়ি</span><br/>
  <span data-mark="দ" data-mark-offset>দোয়েল</span><br/>
  <span data-mark="র">রূপ</span><br/>
  <span data-mark="স">সুজন</span><br/>
  <span data-mark="গ">গুরু</span><br/>
  <span data-mark="শ">শুরু</span><br/>
</p>

方案局限性 #

正如@Peter Constable指出，该方案仅适用于基础辅音未发生字形变化的场景；当遇到গুরু、শুরু这类因后续字符影响导致基础辅音字形改变的单词时，染色的伪元素会与原字符错位，无法匹配显示。

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