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.

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.

Now Playing
Social Links