Tofu

CJK character comparison tool: How did it come to be

Screenshot of the Tofu web app

Tofu is a tiny web app to compare how the same Chinese, Japanese and Korean (CJK) character is displayed differently in different places.

All three languages use Han characters in their writing. However, each place has its preferred way to display each character, so it’s useful to have a tool to compare them side by side.

This is the story of how it came to be.

Visit Tofu↗

“I hate it so much”

Being from Hong Kong, I’ve always known from travelling around East Asia the different ways places prefer to show Han characters.

Discord conversation: friend: why are these the same unicode character I hate it so much me: because of https://en.wikipedia.org/wiki/Han_unification me: same character looks different in different languages friend: I cry friend: my peeve is that they're indistinct in unicode friend: so you paste into anywhere and it renders the other way and aaa me: lots of text are like that, yea me:i should make a website where you can type out the same characters and compare the difference between it in noto sans jp vs noto sans hk etc. 🤔

On a Wednesday evening, a foreign friend messaged the Discord group. He found it frustrating the same Unicode character can be different depending on the language.

I explained the reason, but this also gave me an idea: maybe it’s possible to create a tool to compare them between regions now.

In 2014, Adobe and Google released Source Han Sans (also known as Noto Sans CJK). For the first time, there is a free typeface with different regional versions, but in an identical style.

With this in mind, I started to design and prototype.

Early design in Figma
Two screens: one with a grid of six squares, one of them is controls for what to show on the other five. The other screen with a single square

It quickly came together. Since there are five versions of Source Han Sans, I decided to use a six square grid, and one for changing the character, weight and display modes.

Start Dash

Discord conversation: me: i’m thinking of making that hanzhi/kanji comparison tool i mentioned me: is tofu.tools a good domain friend 2: eats the tools friend 3: I like it

Like all builders, before actually building it, I had to buy the domain. My friends helped with choosing the domain “tofu.tools”.

Git commit message: “mvp”
Screenshot of the first version of Tofu

As this happened to be just a week before the Spring Festival holiday in Hong Kong, I spent my holiday focused on building this new idea.

Using Astro and Svelte, I managed to build it in under 3 days.

Discord conversation: me: try the overlay mode! friend: i did, it’s very cool friend: hey this one does the thing

Since this is a 1-person project, the same friends helped with testing. With their help, I ironed out bugs and launched it publicly less than a week after I had the idea.

Final design, grid mode
Screenshot of a tool to compare characters in different versions of Noto Sans CJK. The page has 6 squares, first square has character, weight and mode controls. The other five show different versions of the character.
Final design, overlay mode
Screenshot of a tool to compare characters in different versions of Noto Sans CJK. The left side has character, weight and mode controls. The right side has different versions of the character overlaid on top of each other.

In the final version, I toned down the design to a warmer tone in place of the prototype’s cold white and grey colours.

Visit Tofu↗