pinyin tooltips

I always thought having a bunch of hanzi characters followed by pinyin translation followed by english looked kinda messy, but being the sort of person who likes to know wtf it is I’m trying to read and what it means, I’ve been too lazy to find a better way. Nah, actually, I’ve been too lazy to follow the incredibly simple and easy-to-use Pinyin Tooltips from Sinosplice that are rockin every sino-blog right now.

So how simple is simple? Well, put this into your style-sheet: {
border-bottom:1px dotted #333;
cursor: help;

And change the border-bottom style to whatever you want. Then anytime you want to write some 汉字 with accompanying pinyin, you just put the characters inside this tag:

<span class=”info” title=”pinyin goes here”>hanzi goes here</span>

Then you just need to get the funky diacritics for the pinyin tones, right here at the Fools Workshop Pinyin to Unicode converter, and stick them in-between the “” that says “pinyin goes here”, and mouse-over for pinyin action stations. Or, if you’re a smart-arse blogger you’ll be using ecto, which means you can type in using any old character and the ecto-blogging-goodness automatically translates it when you post. The end result will be this:

<span class=”info” title=”wǒ shì fāngxīshí”>我是方希石</span>

which looks like this:


Damn! I’m taking the rest of the day off.