The Bengali language consists of 40 consonants, including ক, খ, গ, ঘ, ঙ, চ, ছ, জ, ঝ, ঞ, and more. Additionally, there are 10 vowels in the form of Kars, such as া, ি, ী, ু, ূ, ৃ, ে, ৈ, ো, and ৌ.
My goal is to highlight the first consonant in a word with a different color, but the vowels should also be colored.
Expected Result
https://i.sstatic.net/elRhC.png
Code Sample
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2057474854601110100e0e191010">[email protected]</a>&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 found an interesting idea from @etuardu. I created a CSS-only solution based on @etuardu's suggestion. However, as mentioned by @Peter Constable, this solution works only when the base consonant in a cluster remains unchanged. It may not work in cases like গুরু or শুরু.
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:Bengali:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f5848475b6f1e1f1f0101161f1f">[email protected]</a>&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>