Styling diacritics avatar
ᜌᜓᜃᜒ (Yuki)
 | | 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

ᜌᜓᜃᜒ (Yuki ・ 雪亮)If this is not the end of oblivion, then I shall live everyday as if my life were to end this very day.

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 ᜌᜓᜃᜒ (Yuki ・ 雪亮)’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 「유」 (YOO) 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 hangul equivalent, 「기」 (ki; gi), means energy, spirit, a banner, and a period of time; and is also a suffix used to make a gerund or an infinitive.

Can you guess what I mean by 「柳紀」 and 「유 기」 as the Chinese and Korean for “YOOki”?

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

Now Playing
Social Links