Inspired by some comments on John Well’s blog, I decided to add a keyboard layout to the IPA picker today. It follows the layout of Mark Huckvale’s Unicode Phonetic Keyboard (UCL) v1.01.
I can’t say I understand why many of the characters are allocated to the keys they are, but I figured that if John Wells uses this keyboard it would be probably worth using its layout.
Bopomofo, or zhùyīn fúhào, is an alphabet that is used for phonetic transliteration of Chinese text. It is usually only used in dictionaries or educational texts, to clarify the pronunciation of the Chinese ideographic characters.
The name bopomofo is equivalent to saying “ABCD” in English, ie. it strings together the pronunciation of the first four characters in the zhuyin fuhao alphabet.
For more information about bopomofo, see Wikipedia and the Unicode Standard.
In this post we will summarise how bopomofo is displayed, to assist people involved in developing the CSS3 Ruby specification. These notes will focus on typical usage for Mandarin Chinese, rather than the extended usage for Minnan and Hakka languages.
These are the bopomofo characters in the basic Unicode Bopomofo block.
One of these characters, U+3127 BOPOMOFO LETTER I, can appear as either a horizontal or vertical line, depending on the context.
In addition to the base characters, there are a set of Unicode characters that are used to express tones. For Mandarin Chinese, these characters are :
02C9 MODIFIER LETTER MACRON
02CA MODIFIER LETTER ACUTE ACCENT
02C7 CARON
02CB MODIFIER LETTER GRAVE ACCENT
02D9 DOT ABOVE
It is important to understand that bopomofo tone marks are not combining characters. They are regular spacing characters that are stored after the sequence of bopomofo letters that make up a syllable. These tone marks can be displayed alongside bopomofo base characters in one of two ways.
When used to describe the phonetics of Chinese ideographs in running text (ie. ruby), bopomofo can be rendered in different ways. A bopomofo transliteration is always done on a character by character basis (ie. mono-ruby).
In this approach the bopomofo is generally written above horizontal base text.
There appear to be two ways of displaying tone marks: (1) following the bopomofo characters for each ideograph, and (2) above the bopomofo characters, as if they were combining characters. We need clarity on which of these approaches is most common, and which needs to be supported. For details about tone placement in (2) see the next section.
This is a common configuration. The bopomofo appears in a vertical line to the right of each base character. In general, tone marks then appear to the right of the bopomofo characters, however there are some complications with regard to the actual positioning of these marks (see the next section for details).
This works just like horizontal base+vertical ruby.
I don’t believe that this exists.
In ruby text, tones 2-4 are displayed in their own vertical column to the right of the bopomofo letters, and tone 1 is displayed above the column of bopomofo letters.
The first tone is not displayed. Here is an example of a syllable with the first tone. There are two bopomofo letters, but no tone mark.
The position of tones 2-4 depends on the number of bopomofo characters the tone modifies.
The Ministry of Education in Taiwan has issued charts indicating the expected positioning for vertically aligned bopomofo that conform roughly to this diagram:
Essentially, about half of the tone glyph box extends upwards from the top of the last bopomofo character box.
Tones in horizontal ruby are placed differently, relative to the bopomofo characters, according to the Ministry charts. Essentially, about half the width of the tone glyph extends to the right of the last bopomofo character in the sequence.
The charts cover alignment for vertical text (here, here and here) and for horizontal text (here, here and here).
In some cases the tone appears to be simply displayed alongside the last character in vertical text, as shown in these examples:
When a light tone is used (U+02D9 DOT ABOVE). This appears at the top of the column of bopomofo letters, even though when written it appears after these in memory. The image just below illustrates this.
Note that the actual sequence of characters in memory is:
The apparent placing of the dot above the first bopomofo letter is an artifact of rendering only.
It is not common to see text written only in bopomofo, but it does occur from time to time for Chinese, and sometimes it is used for aboriginal Taiwanese languages.
When written on its own in horizontal layout any tone marks are displayed as spacing characters after the syllable they modify.
Example: 
I haven’t seen bopomofo used in its own right in vertical text, so I don’t know whether in that case one puts the tone marks below the bopomofo letters for a syllable, or to the side like when bopomofo is used as ruby.
I have also come across instances where a bopomofo character has been included among Chinese ideographs. It may be that this reflects slang or colloquial usage.
