In case the title didn’t appear correctly, this is a post for another of my javascript experiments. This demonstrate chinese character recognition using stroke based or radicals input, instead of the usual pinyin(romanized mandarin system) method. Although this method is usually slower for typing, it allows beginners to find or input a word he does not recognize or a word whose pronunciation and pinyin is forgotten. I thought what better time could I release this than during the Lunar New Year.
To try it, click on the screenshot above. Wait for files to be completed loaded before clicking and dragging to write a chinese character in correct stroke order (top left to bottom right, outer to enclosed), and the suggested words would appear in the right box. Right now the recognition algorithm is pretty rigid, you need to have the exact amount of strokes in an almost perfect sequence and writing to get the correct recognition. As mentioned, its pretty experimental, but it shows how fast javascript can be, character lookups are usually within 1 second, often below 100ms. The biggest bottleneck right now is parsing of the huge data files (usually the case for javascript engines these days), which may be solved with an ajax call to the server instead of caching all locally. Okay, I’m going into more implementation details so non-technical readers can do some skipping.
So basically this application is a modified and really simplified port of Kiang’s Hanzi Lookup Java Application to Javascript.
For example, I used my javascript port of shortstraw (shortstrawJs) for substroke recognition. This works well in many situations and badly for many (when strokes are short, etc). There ought to be better input filtering, and better matching against the database. Right now, all the substrokes are flatten, ignoring the exact strokes the user make. There’s currently isn’t fuzzy matching, or partial matches which gives lots of room for improvements. Of course, if you are able to, you can be grab the code by viewing source and trying making changes.
Some traditional words supported. This is the traditional character for my middle character of my chinese name.
If I have the time, there are a few features I like to have in the future.
- One is creating a bookmarklet, for which this input method would work with any site - like my virtual keyboard bookmarklet released previously. The advantages that bookmarklets have over browsers addon is that the browser like firefox does not need to be restarted, making it a very useful tool for non-home computers. (Gangwen, if you are still finding a online IME, you may like to try Sogou’s Cloud Pinyin/启用搜狗云输入法 bookmarklet).
- Another is tying this input to a chinese dictionary, making it a valuable tool for chinese beginners.
- I also hope to implement custom font rendering (For example using 漢鼎繁舒體) rendered on canvas for computers without these custom chinese fonts installed. Currently this is another of my javascript experiments - I have managed to render a couple of characters, but have yet to figure out the Adobe’s CID implementation and quirk character mapping that
ttf2pt1 gives me.
- Another idea is hooking this up to a DIY Multi-touch pad if I get to built one.
And so I wonder if there’s a need for this application.
- I heard that Macs already have this input method using their touchpads built into the OS. Windows 7 seems to have pretty good chinese recognition with their stylus input as seen from their blog
- Newer HTC phones running Android have a HTC custom native input method called Touch Input. See HTC_CIME HTC的官方手写输入法. It doesn’t come with my HTC Magic, and requires some rooting or hacking - something I don’t have time for now, otherwise I could try writing android applications too.
Some friends may think that I started this experimented because of my inability to read chinese and maybe its true, or indeed its true my chinese language (similar my other verbals and written languages) is pretty weak! So maybe someone might still find this useful. Again, the source code is available for anyone to modify it.
Lastly for those still celebrating the launar new year, happy new year!
p.s. I created an easter egg in view of the chinese new year. Double clicking on a suggestion turn the word upside down. Some homes turn their words upside down to symbolize prosperity falling to their homes. This animation is done using Css3 transform properties (supported by the new firefox, opera and webkits- safari, chrome browsers).
Recent Comments