Styling diacritics avatar
Yohan Yukiya Sese-Cuneta
 | | 2 minutes read

Fediverse Follow

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.

  1. 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;
}

  2. 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>sà
trab<span class="diacritics">͟</span>aho
  • batà [ba·tà]
  • panibughô [pa·ni·būg·hô]
  • aráw–áraw [a·ráw–á·raw]
  • këtkët [kët·kët]
  • sag̃nay or sagñay [sa·ñgay]
  • pan͠gulo [pa·n͠gu·lo]
  • āso [ā·so]
  • h͞oy [h͞oy]
  • pu̱sà [pu̱·sà]
  • 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.

Did you like it? Do share this post, leave a comment below, and send me a gift! (opens in a new tab/window)

avatar

Yohan Yukiya Sese-Cunetaㆍ사요한・謝雪矢·ᜌᜓᜃᜒIf this is not the end of oblivion, then I shall live everyday as if my life were to end this very day.

Advice Android Appointed Times Astronomy Autism Discourse Events Films Geography How-To Internet Life Linux Literature Love Meteorology Music Opinion Photography Sports TV Unicode Web Windows
The YOOki Chronicles

The YOOki Chronicles is Yohan Yukiya Sese-Cuneta’s return into casual and personal blogging. The name “YOOki” is a mash-up of the acronym of YourOnly.One and my nickname ᜌᜓᜃᜒ (Yuki・雪矢).

Interestingly, according to Chinese legend, 柳 (YOO) is an ancient Chinese surname. The ancestors of the surname were closely linked with the ancient sage-king named Yu Shun. In Korea, the 유 (YU) lineage traces to the Xia, Han, and Joseon dynasties. Holders of the surname Yu or Yoo had a reputation for charity and diligence.1

It is also the word for “willow” or the “willow tree” which means graceful or slender; and a tree growing near a body of water which provide continuous nourishment and resources for everyone. It can also mean to exist, an oil (anointment(?)), and simply as “U” (you).

The Hanzi 紀 (ki) character means to record, be disciplined, provide order. While the Hangeul equivalent, 키 (ki), means energy, spirit, a banner, and a period of time; and is also a suffix used to make a gerund or an infinitive.

  1. 「유」 Yoo (Korean surname); CC-BY-SA 3.0 Unported License ↩︎

Now Playing
Social Links