Tag: tutorial


Feb 2012

Unmixing Chinese and Japanese fonts on the iPad and Mac OS

Recently an AllSet Learning client came to me with an interesting problem: he was seeing strange, slightly “off” variations of characters in his ChinesePod lesson, “Adjusting the Temperature.” Once upon a time I studied Japanese, so I could recognize the characters he was seeing as Japanese variants:

What he saw:
ChinesePod fonts (with Japanese characteristics)

What he expected to see:
ChinesePod fonts (fully simplified Chinese)

[If you really care about the tiny discrepancy, you may need to click through and enlarge the screenshot to see the difference. I’m not going to focus on including text here, because that’s exactly the nature of the problem: the text is subject to change based on your system’s font availability.]

The really strange thing was that he was experiencing the exact same issue on both his 2010 MacBook and on his iPad 2. In troubleshooting this problem, I discovered that my client was running both an older version of iOS (4.x) as well as an older version of Mac OS (Leopard). I was experiencing neither on my 2008 MacBook (running Snow Leopard) or on my iPad 2 (iOS 5.x). But his system had all the required fonts, and switching browsers from Safari to others did nothing to solve the problem. So I concluded it was simply a system configuration problem.

Fixing the issue on the iPad

Here’s the fix. On the iPad, go into Settings > General > International (you might need to scroll down for that last one). You might see something like this:

iPad Language Settings (2)

Note that in the order pictured above, Japanese (日本語) is above simplified Chinese (简体中文) in the list. This is crucial! That means that if English fonts are not found for the characters on a given page, the system is going to match characters to Japanese fonts next.

So to fix this issue, Chinese should be above Japanese. The thing is, there’s no obvious way to change the order. The only way I found to do it is to switch the system language to Chinese, then switch back to English. [Warning: your entire iOS system interface will switch to Chinese when you do this; make sure you can read the Chinese, or you know where the menu position for this settings page is before you switch!]

(Hint, hint!)

Switching to Chinese makes the Chinese jump to the top of the list, then switching back to English makes English jump back above that, leaving Japanese below Chinese.

You should see something like this when you’re done:

iPad Language Settings (1)

Fixing the issue on Mac OS X

The exact some issue applies to Mac OS X system preferences. Go to: System Preferences… > Language & Text > Language.

Mac OS System Preferences

This time, though, there’s an easier way to rearrange the order. Simply click and drag:

Mac OS Language Settings

Notice the little message on the right about when the changes will take effect.

Does this really matter?

In the grand scheme of things, not really. It’s actually good to have some tolerance for font variations. But the detail-oriented may find this particular issue quite maddening. It’s good to have a simple way to fix it.

So why didn’t I have the issue, and he did? Well, I had at some point tried switching the system language to Chinese, on both my MacBook and on my iPad, but I later switched them back to English. So without even trying to, I had taught my system to prefer Chinese over Japanese. The problem appears when English is the only language ever used, and the system doesn’t know what to give preference to. In my client’s case, you would think that adding a Chinese input method might clue in the system, but apparently Apple isn’t quite that on the ball yet.


Feb 2011

Sinosplice Tooltips 1.1.1

There’s a new version of the WordPress Sinosplice Tooltips plugin out. With the help of Mark Wilbur’s pinyin tone mark conversion code (see it in action on Tushuo.com), version 1.1 added the ability to convert numeral pinyin (like this: “Zhong1wen2”) to tone mark pinyin (like this: “Zhōngwén”), and add that pinyin as a tooltip to text within WordPress, producing a nice little tooltip effect on your WordPress blog or site (like this: 中文).

Installing and using the plugin is by no means difficult, but in case you’re new to WordPress, to blogging in general, or to the idea of tooltips, this is the post for you! Here I’ll just go over quickly how to install it on WordPress 3.0.5 and what exactly you need to do to produce the effects above.



Aug 2009

Google Pinyin for the HTC Hero

I got the Google Pinyin input working for my HTC Hero Android phone. It turned out to be quite simple. The only two things holding me back were (1) a bad install of Google Pinyin, and (2) lack of proper documentation for switching input methods.

When I first got the phone, it already had Google Pinyin installed, but apparently it was an old version that didn’t work properly. I had to uninstall it and reinstall it. To uninstall, go to: Settings > Applications > Manage Applications, and uninstall it from there. The applications may take a while to all load, but Google Pinyin, if installed, should be at the very bottom, listed by its Chinese name, 谷歌拼音输入法. Select it to uninstall it.

Go into "Manage applications" to remove apps Loading apps takes a long time
Google Pinyin will be at the bottom of your apps list Uninstall old version of Google Pinyin

After you’ve got the latest version of Google Pinyin from the Android market installed, go to Settings > Locale & text, and make sure that you have Google Pinyin activated. (I turned off Touch Input Chinese because it didn’t seem to work.)

Choose "Locale & text" from the Settings menu Make sure Google Pinyin in selected

From the menu above, you can also turn on predictive input (联想输入, literally, “associative input”) and sync (同步) your custom words with your Google account. (For some reason this is not automatically synced like the rest of your Google account services are.)

Google Pinyin Input Settings

One you’ve got Google Pinyin installed and turned on, you’re ready to type something. For my demo, I went into my SMS messages and opened up one of the recent ones from China Merchant Bank. To switch input modes, you tap and hold the textbox. A menu will pop up, and you choose “Select input method.” Then choose “谷歌拼音输入法.”

In normal text input mode Tap and hold on the textbox Typing Options Menu Input Method Switch

Now you’ve got the Google Pinyin soft keyboard. Start typing, and characters will appear. As you can see from my example below, it’s not perfect, but it’s pretty good most of the time. You also have an extra keyboard of symbols in addition to punctuation, which is nice.

The Google Pinyin soft keyboard Typing on the Google Pinyin soft keyboard
The 更多 symbols on the Google Pinyin soft keyboard Even more 更多 symbols on the Google Pinyin soft keyboard

I have to say, it’s a bit annoying to have to go through a three-step process every time to change the input method. I could do it with one keypress on the iPhone, but that’s only if I have only one alternate input method installed. As Brendan has pointed out, it could be quite a few extra keypresses depending on how many input methods you have installed. For the time being, on the Hero, it’s always three keypresses.

Anyway, hopefully this helps a few other people figure out how to get Google Pinyin working on an HTC Hero.


Feb 2006

Adding the pinyin quicktag in WordPress

A while back I wrote about adding pinyin tooltips using a little CSS and a span HTML tag. I later mentioned that I had worked a “quicktag” into my blogging interface. Today I’ll tell you how to easily add this button to your WordPress “Write” page.


The pinyin quicktag in action

After installing WordPress 2.0, it took me a while to get around to uploading my custom quicktags.js file which includes the “pinyin” quicktag button. Since I add pinyin to words quite often, I was really annoyed by the loss of the button. It really makes adding pinyin so much more convenient.



Aug 2005

Using Baidu MP3 Search

I think any modern student of Chinese should be using Baidu’s MP3 search. With it, it’s possible to find a huge variety of MP3s on the internet, and it’s totally free! (Yes, the world’s loss regarding intellectual property rights in China can be your gain!) I can imagine, though, that for a beginning student of Chinese, an all-Chinese interface can be daunting. It is my aim to make it more accessible to the beginner.

Note: to use Baidu, your computer must support Chinese fonts. Baidu uses GB2312 encoding, which should be automatically detected by your browser, but the Chinese characters will only be readable if your computer supports them.

OK, let’s suppose you’re a total beginner. You’ve heard of this hot boy band called F4, and you figure it’s as good a place as any (plus you don’t have to actually use any Chinese to search for it!).

  1. Go to Baidu.com.

    Baidu Search

  2. Click on MP3 (or you could have gone to mp3.baidu.com directly).

    Baidu Search

  3. Enter your search term in the box (in this case it’s “F4” without the quotes).

    Baidu Search

  4. Choose your format. I only want MP3s, so I select the “MP3” radio button. (The choices, left to right, are: 歌词 (lyrics), 全部音乐 (all music files), mp3, rm (RealPlayer format), wma (Windows Media Player format), flash, 其它 (others), 铃声 (cell phone ringtones).)

    Baidu Search

  5. Click on the button next to the search box, “百度搜索” (Baidu search). (For the future, when you do searches from the search results page, make sure you click on the left button. The right button will be “歌词搜索” (lyrics search).)

    Baidu Search

  6. You will see a table of your search results. Below you will find a guide to interpreting this table:

    Baidu Search

    1. 歌曲名: Song Title (this name is linked to the MP3s you download)
    2. 试听: Listen First (uses Windows Media Player in a popup window)
    3. 歌词: Lyrics (very useful, especially for pop music, although not 100% reliable)
    4. 铃声: Cell Phone Ringtone
    5. 大小: Filesize (in megabytes)
    6. 格式: Format (MP3, WMA, etc.)
    7. 下载速度: Download Speed (especially if you’re outside of China, this may be important)
  7. Right click on a title (choose from the 歌曲名/Song Title column) and “Save as“. There’s a good chance that you’ll want to change the filename, as they are often completely random or unhelpful.

    Update: You now have to first left-click on the song title. A pop-up window will appear containing the URL to the MP3. Right-click on that to save.

    Baidu Search

That’s it! Also try out the lyrics search. You can click on 歌词 (lyrics) for any search result that has them. You can also search for lyrics directly, from the search results page. Click on the right button, “歌词搜索” (lyrics search).)

Baidu Search

Note that the lyrics are not always 100% accurate. Most are submitted by users.

For other Sinosplice tutorials, click on the tutorial tag.


Sep 2004

Pinyin Tooltips

A while ago Matt from Metanoiac asked me how I do my pinyin tooltips. I was too busy at the time to reply, but since maybe other people are interested in how I do it, I’ll give a public explanation here. (Warning: for those of you with no Chinese-related weblog, this is going to be a very long, boring post.)


“Tooltips” are the little text boxes that pop up when you hover your mouse on certain elements. The picture at left is an example. Internet Explorer (IE) users may be used to using the alt attribute to add tooltips to photos, but this is actually a web design no-no. Non-IE browsers do not display alt attributes as tooltips (this is not the intended purpose of alt), and anyway, alt attributes don’t work for non-photo elements like text. The correct attribute to use is the title attribute.

So you need to use the title attribute to get the tooltip, but what tag does it go inside, and how do you get the dotted underline and the question mark cursor? You need to use CSS for that.

The tag you’ll use is span. All you have to do is define a span class in your CSS. I call mine “info” because it doesn’t have to be used only for pinyin tooltips.

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

This means the underline (which is actually defined as a border) is 1 pixel thick. “#00AAFF” is its color. The onmouseover cursor value is defined as “help“, which results in the question mark effect.

Then you can use it in your HTML like this:

<span class="info">text</span>


This will give the underline and cursor effect, but not the tooltip. You still need to add in the title attribute:

<span class="info" title="pinyin">text</span>


I’m guessing you want the pinyin tone marks too, though. For that, you’ll need to make sure that your page is encoded in Unicode (most people use UTF-8)*.

For the actual pinyin, I use the Pinyin to Unicode converter at The Fool’s Workshop. It’s very easy to use. Type in “zhong1wen2” and click Convert. You get “zhōngwén” back. Then you just copy and paste. Simple.

Here’s what that HTML would look like after you copy and paste:

<span class="info" title="zhōngwén">中文</span>


This does mean, however, that you’ll have to convert the pinyin for each word you want to provide pinyin for, which is a bit of a pain. But the result is nice.

Also, it’s worth noting that the tooltip is not going to look good on some old computers or computers using weird fonts for their browsers. It’s a helpful effect for a lot of people, but you probably don’t want to make it central to your design.

* By this I mean that in your webpage’s html the <head> section should include the following metatag:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

If your webpage is encoded in Unicode and you’re using Movable Type like me, it will make your life easier if the default encoding of your edit screen is also Unicode. To do that, just edit the mt.cfg file. You need to find “PublishCharset“. For me it was on line 313 (of 457 total lines). Yours should be similar. Uncomment that line (delete the ‘#’) and change it to:

PublishCharset UTF-8

Thanks goes to John B, who originally showed me how to do this.


Dec 2003


Personally, I think “favicon” is a really stupid name, but that’s what Microsoft came up with. A favicon is a tiny little icon (.ICO file) which goes on your bookmark (favorites) list in your browser when you bookmark a website. I’m sure you’ve seen them. Yahoo has one. Google has one. Most major sites have one. This site even has one. If a site doesn’t have one, IE users will just see .

Several people have asked me how I made mine, so I thought I’d give a little description of the process. There’s actually plenty of documentation on the web about it, but if you don’t know the name “favicon,” it can be kind of hard to find.

First, a .ICO file is not just an ordinary image file in a tiny size. It’s a special format, and the only one that can be used for the purpose of creating a favicon for your website. Second, the favicon must be 16×16 pixels big and be in 16 color mode. All the instructions you need can be found on this site, as well as links to the one small program you’ll need. There are many ways to make an .ICO file, but I think the IrfanView image viewer (also linked to on the above page) is the easiest way to go about it, and I’ve done it several different ways before.

So, in a nutshell, this is the process:

1. Go to this site, read it all, and download and install IrfanView.

2. Choose or create the image file you want to be your favicon. The more exacting favicon creators will probably want to start big in Photoshop, then shrink the file down to 16×16 pixel size. Make the appropriate modifications if you don’t like how it looks tiny, then save it as a .BMP file. (I do not recommend creating the icon file from scratch pixel be pixel. You will get very choppy-looking results.)

3. Open the image file in IrfanView, and then save it as a .ICO file. Remember, it must be 16×16 pixels, and only 16 colors.

4. Upload the favicon.ICO file into your website’s root directory.* That should do it!**

* If you don’t have your own .COM, you can still have a favicon for your site. Refer to the page above for detailed instructions.

** If you had a different favicon before, or have already bookmarked your site before, you will have to follow the steps explained on the page referenced above in order to see the favicon. Unfortunately, your readers will as well. New readers will see the favicon as soon as they bookmark your page.

It’s actually simpler than it sounds, but you see very few favicons on personal sites. I’m thinking bloggers just don’t realize how simple it is, but if they did, we’d see a lot more favicons out there. I’m hoping, anyway.

[Further reference on favicons.]