htmlcssunicodediacriticsaccent-sensitive

How to color only letters without Bengali Kar sign?

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

Coloring Bengali Consonants

Code Sample

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

Solution

  • 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:wght@100..900&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>