If you’re into wordpress, check out Wordpress Tips and Tricks for more wordpressy goodness like this post.

A few of my friends have asked me how I do the Chinese Character pinyin annotation on my Dalian Information Guide Website. For those of you who don’t know, the tool is used to display the phoenetic pronunciation (i.e. pinyin) when you hold the mouse over a Chinese Character. It also displays a neato HELP question mark, as well as a dotted line underneath the text to tell the readers that there’s a little something else waiting for them.

For example: 我常常吃西瓜

Isn’t that cool? I was first made aware of this tool through my friend Dan’s site Chinese: Beyond the Textbook. This is a great site for anyone interested in learning Chinese, and it makes use of this pinyin tool extensively, in order to annotate a wide variety or Chinese language text.

From Dan’s site, I managed to trace this tool back to John Pasden’s Sinosplice.com, one of the oldest and best expat blogs running in China. John outlines here, how to use a little CSS code to display the help question mark and dotted lines under your Chinese characters. All you need to do is assign a class to the particular piece of Chinese text that you’d like annotated.

If you have Chinese text needing annotating, you can do that like this:

<span class="info" title="enter pīnyīn here">拼音</span>

and then make sure you got the proper CSS code in your style sheet:

span.info { border-bottom:1px dotted #00AAFF; cursor: help; }

Now you can copy and paste this code for every bit of text you’d like to annotate, but John has another blog entry explaining how you can assign that class with the click of a button — if you are a wordpress user. I use this plugin on my Dalian Guide, but I don’t use it on this blog though. It doesn’t allow for you to keep your WYSIWYG editor, and for this blog, I kinda like using that.

While my Dalian City Guide is just a hobby, I sincerely hope that anyone who seriously takes on the task of creating a proper Dalian Information website properly utilizes this tools, or at least something similar.

Anyway, enough about that. Lets move on…

How to Generate Pinyin Tone Markers from Chinese Characters

If you know Chinese well, and you’re not marking a huge amount of text, this might be useful to you, for your reference:

1st tone markers: ā ē ī ō ū
2nd tone markers: á é í ó ú
3rd tone markers: ă ĕ ĭ ŏ ŭ
4th tone markers: à è ì ò ù

But in general, if you’re marking a lot of text, copying and pasting those marked characters, or typing special symbols is gonna be a pain in the ass. There are numerous sites out there that can convert characters to pinyin, but I have yet to find one that generates really good useable marked pinyin from Chinese Character input.

One of the best sites is Adsotrans, but I find that sometimes there’s a problem with the display of the third tone pinyin. It often will display as a small square, i.e. it’s not recognized. I love the site, and I use it often. But for some reason, I’ve experience these little squares sometimes. Bummer… If anyone has any idea about why this is, I’d love to hear it.

I find that in order to avoid this problem, I can change the adsotrans output to NUMERIC PINYIN, (example: wo3 chang2chang2 chi1 xi1gua1), and then dart on over to Toshuo.com, and punch it into to their pinyin tool. For now, that seems to work well for me.

I hope that you take the time to visit some of the websites I’ve listed above, as they’re all doing good work in helping facilitate Chinese study on the internet. Especially John’s!

I’d be curious to know if anyone has applied this tool to other asian languages, such as Japanese or Korean. Anyone know of any examples?

Popularity: 11% [?]