Chinese Character Browser

Last updated on January 5, 2024

Presents Chinese characters in a browsable fashion.
Exercises my Chinese Character Web API.
Demonstrates a fully keyboard-accessible HTML UI.

If you are in the process of learning Chinese, or if you would like to see an example of a keyboard-accessible HTML UI, then you might find it interesting.

Browsable Chinese characters

One key to browsability is a combination of the usual arrangement by radicals and strokes and not requiring any page navigation. I think the idea of looking up Chinese characters as you would in a dictionary is a valuable skill, and one that improves as you learn more by doing it more. When I started learning the Chinese language, computer support was barely getting off the ground. If I wanted to look up a character whose pronunciation I didn’t know, I had to look it up by radical and strokes.

Nowadays, if you can write a character, however badly, you have more options:

On Windows, you can use the built-in Tablet PC Input Panel, which requires only that you have a tablet input device.
For lookup using the mouse as a drawing device, you can use https://english.dict.naver.com/english-chinese-dictionary/#/main.

And OCR is perhaps becoming an option, though I haven’t tried these:

Maybe Google Goggles?
Pleco Software does live video OCR on an iPhone.

Still, I think you learn a lot and get a lot of satisfaction from looking up a character by radical and strokes. A side benefit of the Chinese Character Browser is that when you see 6,763 characters broken down by radical and strokes, it doesn’t look like so many. It gives your mind a sense of the entirety of what’s before you, if you are setting out to learn as much as you can.

Keyboard accessibility

Another key to browsability is being able to use the keyboard to do everything. There was a time, before the Web, when keyboard support was central to the creation of almost any UI. I think it’s clear now that keyboard support in HTML applications has fallen permanently by the wayside. Even so, I wanted to see what it would be like creating an HTML UI that was fully keyboard-accessible.

One important note here is that even though I created a keyboard-accessible UI, it’s not accessible in the Section 508 sense—at least, I doubt it. Unfortunately, Section 508 compliance is generally equated with working well with specific screen readers. My last look at screen readers a few years ago revealed an almost complete lack of support for dynamic HTML applications. My only goal here was keyboard-accessibility, not compliance with a specific screen reader.

Here’s how the keyboard works in the Chinese Character Browser:

Focus is indicated with a focus rectangle, so you can find/follow the focus with your eyes.
Tabbing moves the focus from left-to-right and top-to-bottom. Shift+tabbing moves in the opposite direction.
When a list has focus, selection is visually indicated and can be changed with the up/down arrows, page-up/down, home/end, and ctrl+home/end. (Home/end operate on the visible items. Ctrl+home/end move to the beginning/end of the list.)

So far, that’s just standard keyboard stuff. I came up with a few “extras” to fit the tool:

You can use the left/right arrows to move between lists (tab and shift+tab also work).
Ctrl+up/down jumps to next higher/lower stroke count (or additional strokes, depending on which list is focused).
Pressing a number key jumps to that stroke count (or additional strokes, depending on which list is focused). To go higher than nine, use shift+#. You can’t go higher than 19 using this method.

There are various ctrl+shift sequences that can be used like keyboard accelerators. These are labeled in the UI:

Ctrl+shift+c: toggle between GB2312 and Big5. See the API doc for more information.
Ctrl+shift+r: toggle between using kRSKangXi and kRSUnicode for radical/stroke information. See the API doc for more information.
Ctrl+shift+f: cycle through the font list.
Ctrl+shift+s: toggle the sort order of the main radical list.

Limitations of character-based study

It’s worthwhile acknowledging that studying characters is only part of the whole picture. You will not learn Chinese simply by studying individual characters.

Many characters have different pronunciations depending on how they are used.

This tool simply lists out the different possible pronunciations.

Many characters are pronounced with a neutral tone when they appear at the end of a multi-character term.

It’s challenging enough to remember pronunciation and tone of each character. Additionally, you need to remember if a given term ends in a neutral tone. When you first learn a character in its neutral tone form, you haven’t yet learned the character’s tone; you can’t yet correctly use the character elsewhere when its tone does matter.

Third-tone characters are often correctly pronounced using a second tone.

When learning-by-listening to third-tone characters that have been spoken with a second tone (sandhi tone modification), you haven’t learned the correct tone of the character. You will, in fact, learn the wrong tone if you learn by listening.

I’d venture to say that every first-day student of Mandarin is bombarded with conflicting and incorrect information about what’s likely the very first character they learn: 你. The teacher says unambiguously that it’s pronounced using the third tone, yet goes on to pronounce it (correctly) using a second tone in 你好, yet never mentions why such a blatant contradiction is occurring.