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.
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.
Characters and tone marks
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 :
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.
Bopomofo used as ruby
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).
Horizontal base, horizontal 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.
Horizontal base, vertical ruby
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).
Vertical base, vertical ruby
This works just like horizontal base+vertical ruby.
Vertical base, horizontal ruby
I don’t believe that this exists.
Tones in bopomofo ruby
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
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.
Tones 2 to 4
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.
In some cases the tone appears to be simply displayed alongside the last character in vertical text, as shown in these examples:
The light tone
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.
Bopomofo written on its own
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.
In horizontal text
When written on its own in horizontal layout any tone marks are displayed as spacing characters after the syllable they modify.
In vertical text
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.
In horizontal text
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.