Test charts for tonal pinyin in Unicode Web pages

Combining diacritical marks with lower-case letters (decimal)

What's supposed to happen with these is that the mark indicated by the code will be placed on the letter immediately preceding the code. Thus, as you can see from the code columns below, all that should be needed is one code number per tone, regardless of the vowel. But although IE on a Windows system does well with these, other browsers and systems don't render these as well, especially the marks over i's and ü's. Thus, support from font designers, Web browsers, and operating systems isn't sufficient to be able to rely on these yet. Although eventually, this will be the approach to use, for now we need to look to other methods.

Previously I thought that these could safely be used for second- and fourth-tone a's, e's, o's, and u's; I was mistaken, as I discovered when I finally saw my site on a Mac. (Macs are hard to come by here in Taiwan.)

Combining diacritical marks with lower-case letters (hex)

These are the hex versions of the combining diacritical marks above. They behave in exactly the same way as the decimal versions.

Combining diacritical marks with upper-case letters (decimal)

Again, IE under Windows (but not Mac) gets everything right. But other browsers and systems place the tone marks through rather than fully above the letters, resulting in a mess. None of these can be relied upon, given the current state of browser support. The problem may lie in the fonts themselves rather than non-IE browsers. Either way, these can't be used for now, which is a shame because this is so wonderfully simple and easy to read even in the HTML itself.

Combining diacritical marks with upper-case letters (hex)

These are the hex versions of the combining diacritical marks above. They behave in exactly the same way as the decimal versions.

Lower-case individually numbered entities (decimal)

These are fully reliable as long as the font used supports these characters. Even NN4.7 does fairly well.

Lower-case individually numbered entities (hex)

These hex forms behave exactly like the decimal forms.

Upper-case individually numbered entities (decimal)

Browser support is good here. Since no pinyin syllables begin with i, u, or ü, these letters can be ignored unless someone is going to write in ALL CAPS.

Upper-case individually numbered entities (hex)

These hex forms behave exactly like the decimal forms.

Lower-case named entities

Using "acute" and "grave" for the second- and fourth-tone marks, respectively, makes for easier-to-read HTML than numbered entities -- at least for humans. But there aren't names for first- and third-tone marks. Nor do these work with ü. But other than that, browser support is good.

Upper-case named entities

(Same comments as above for lower-case named entities.)

rounded a's (decimal)

It is sometimes claimed that in Hanyu Pinyin the letter "a" should not be written in the style of most fonts but instead in a rounded manner: ɑ. In most cases, I am all for following the rules. But if this ɑ is a rule, I strongly oppose it as unnecessary and a sin against good typography. (And it may not be a real rule anymore. I would appreciate hearing from anyone with a definitive answer.) Thus, these are for reference only. I do not recommend using this style of the letter "a".

The only way to achieve tone marks for this style of letter is to use combining diacritical marks, which, as I discuss at the top of this page, cannot be relied to work properly on Web pages.

rounded a's (hex)

As noted immediately above, these are for reference only. I do not recommend using this style of the letter "a".