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.

This post is intended to evolve over time. I’ll post other blog posts or tweets as it changes. The current content is to the best of my knowledge correct. Please contribute comments (preferably with pointers to live examples) to help build an accurate picture if you spot something that needs correcting or expanding.

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.

Characters and tone marks

These are the bopomofo characters in the basic Unicode Bopomofo block.

List of characters.

See in UniView.

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 :


See the list in UniView.

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.

Tones following:

Tones above:

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.

Picture showing the dot above other bopomofo characters.

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:

Picture showing relative positions of tone marks and vertical bopomofo.

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:

Three characters with the MODIFIER LETTER ACUTE ACCENT tone, but different numbers of bopomofo letters.

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.

Picture showing the dot above other bopomofo characters.

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.

Example: Example.

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.

Example 1. Example 2.