September 14, 2021

Squarify!!

고양이, which means cat in Korean converted to squared text with Squarify
고양이, which means cat in Korean converted to squared text with Squarify

Link to demo

Squarify!!! is a webpage that converts circles(ㅇ)to squares(ㅁ) in Hangul, the Korean alphabetic system.

Circlesㅇ and squaresㅁ in Hangeul한글

For a beginner in Korean, the most noticeable characters in Hangeul(한글, the Korean alphabetic system), would be circles(ㅇ) and squares(ㅁ).

The circle character, which is called 이응(ㅇ, ieung) is a consonant that comes right before a vowel. The square character, named 미음(ㅁ, mieum) is also one of the most frequently used consonants. So it is not surprising to notice tons of circles and squares in any Korean text.

Confused English speakers on the Internet wondering why there are so many circles in Korean
Confused English speakers on the Internet wondering why there are so many circles in Korean

Since I read and wrote Hangeul from when I was young, I didn’t realize that there are a lot of circles in the Korean alphabet. So when I bumped into these kind of questions I felt it was interesting to see the Korean alphabet in a geometric point of view. This is how I got inspired to make a mini project that converts all of the circles(ㅇ) into squares(ㅁ).

Utilizing libraries

Example Hangul.js disassembling syllables into characters
Example Hangul.js disassembling syllables into characters

Since Hangeul uses a combination system that creates a syllabic block from pieces of consonants and vowels, I needed to first disassemble Korean syllabic blocks into characters. For example: the word 이응 is consisted of 5 letters which is [ㅇ,ㅣ,ㅇ,ㅡ,ㅇ]. Thankfully, there is already an open source library called Hangul.js that does this job, so I utilized it.

Example of aromanize.js transliterating Hangeul into Latin alphabet
Example of aromanize.js transliterating Hangeul into Latin alphabet

I also wanted to show how the actual pronunciation would change after converting all of the circles into squares, so that you could understand how the conversion works without knowing how to read Hangeul. To solve this problem, I used Aromanize-js which does a good job for transliterating Korean characters to latin characters.

The code

You can see the actual commented code used to build this converter in this link.