How to color only letters without Bengali Kar sign?

Question

Bengali consonants are ক, খ, গ, ঘ, ঙ, চ, ছ, জ, ঝ, ঞ … etc. and 10 Kars/vowels (short form) are া, ি, ী, ু, ূ, ৃ, ে, ৈ, ো and ৌ.

In a word I want to color first consonant differently. But Kars/vowels get colored too.

---

Expected output

---

Code Sample

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

mark {
  color: red;
  background: transparent;
}

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

---

Update

I really love @etuardu’s idea. I made a CSS only solution from @etuardu’s answer. However as @Peter Constable mentioned, it works till base consonant not changed in the cluster. When base consonant changed like in গুরু, শুরু this solution will not work.

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:[email protected]&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;
}

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

Answer 1

As others have pointed out, such letter combinations are treated as a unique cluster, so achieving your goal isn't straightforward.

One option might be to use JavaScript and CSS to overlay a <mark> onto a <span> at a specific position. By employing em as a unit, you can ensure correct positioning regardless of the font size.

I understand this solution may not be ideal, but may be suitable for some use cases.

document.querySelectorAll('[data-mark]').forEach(e => {
  const mark = document.createElement('mark')
  mark.innerText = e.dataset.mark
  mark.style.left = e.dataset.markOffset
  e.appendChild(mark)
})

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

mark {
  color: red;
  background: transparent;
}

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

span[data-mark] mark {
  position: absolute;
  left: 0;
  top: 0;
}

<p>
  <span data-mark="ক">কাগজ</span><br/>
  <span data-mark="ঠ" data-mark-offset=".39em">ঠেলাগাড়ি</span><br/>
  <span data-mark="দ" data-mark-offset=".39em">দোয়েল</span><br/>
</p>

Answer 2

In a text layout engine, these consonant-vowel combinations are handled as clusters in which several complex interactions might be happening. In the general case, what you want would be problematic since the relationship between characters in the string and glyphs from a font used to display the string is not always going to be a 1:1 relationship.

For example, some Bangla or Assamese fonts could display ga + u as . A layout engine would have no way of knowing what parts of which glyphs to paint red.

In principle, a layout could select one glyph within a cluster to paint red. In some cases, that might give what you want, but not others. For example, it might work for ঠো, since the glyph representing the consonant is distinct from the glyphs representing the vowel. But in some fonts, a cluster such as গু could display as a single glyph, in which case more than the consonant would have to be painted red.

While in principle a layout engine could apply different colour styling to different glyphs in a cluster, it couldn't do that for all text styling. For example, it certainly wouldn't be possible to select different fonts, because the correct display of elements within a cluster depends on data within a font about how the elements interact, such as how mark glyphs are positioned in relation to base glyphs. In practice many layout engines will treat clusters atomically for any styling purposes.