Styling diacritics

If you are wondering if there is a way to add a colour to diacritical marks, also called accent signs, then you are in the right place! Why? Because the answer is, yes, and I will show you how.

Create a CSS style like this:

1
2
3
4
5
6
.diacritics {
  color: hsla(0deg, 100%, 50%, 1);
  color: hwb(0deg 0% 0% / 100%);
  font-family: "DejaVu Sans"; /* Currently, DejaVu Sans has the highest accuracy in diacritical mark positioning. */
  font-weight: bold;
}

Place the diacritics within the diacritics class
1
<span class="diacritics"></span>

Done!

Here are examples:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
bata<span class="diacritics">̀</span>
panibugho<span class="diacritics">̂</span>
ara<span class="diacritics">́</span>w–a<span class="diacritics">́</span>raw
ke<span class="diacritics">̈</span>tke<span class="diacritics">̈</span>t
sag<span class="diacritics">̃</span>nay or sagn<span class="diacritics">̃</span>ay
pan<span class="diacritics">͠</span>gulo
a<span class="diacritics">̄</span>so
h<span class="diacritics">͞</span>oy
pu<span class="diacritics">̱</span>sà
trab<span class="diacritics">͟</span>aho

batà [ba·tà]
panibughô [pa·ni·būg·hô]
aráw–áraw [a·ráw–á·raw]
këtkët [kët·kët]
sag̃nay or sagñay [sa·ñgay]
pan͠gulo [pa·n͠gu·lo]
āso [ā·so]
h͞oy [h͞oy]
pu̱sà [pu̱·sà]
trab͟aho [tra·b͟a·ho]

It is also available via CodePen. Or, you can clone a simple test page from my test-repo: Noto Diacriticals Git branch.

Styling diacritics

Bold, add colours, and change font, of the diacritics!

See Also