No bopomofo ruby support

This issue is applicable to Chinese, particularly in Taiwan.

Bopomofo, also named Zhuyin Fuhao, is a transliteration and writing system for Chinese. Although it can sometimes be used for writing Chinese, or local Taiwanese languages, however it has been widely used for 100 years to indicate phonetic annotations of Chinese characters.

Bopomofo is usually written in vertical columns to the right of the Han character. Importantly, most tone marks are set in a second column to the right of the bopomofo letters, and the vertical placement of the tone relative to the letters follows certain rules.

For example:

There are two potential ways to implement Bopomofo:

1. Make special fonts, and combine the Chinese character and the Bopomofo characters into the glyph. Use spans, CSS, and webfonts to toggle fonts. This approach works in all browsers, but it is not very accessible and it is not easy to handle polyphones.

2. Use HTML ruby/rt, ruby-position: inter-character, and OpenType fonts for all characters in rt (see https://github.com/cmex-30/Bopomofo_on_Web/blob/master/BOPOMOFO%20TYPOGRAPHY.pdf). The CSS spec inter-character value for the ruby-position property is specifically "provided for the special case of traditional Chinese as used especially in Taiwan".

Use of ruby { writing-mode: vertical-lr; } to achieve this (see an example) doesn't produce the needed positioning.

More:

• Bopomofo on the Web
• Requirements for Chinese Text Layout – 中文排版需求
• HTML ruby element
• HTML rt element
• ruby-position
• OpenType

The GAP

Bopomofo ruby is not supported by any browser. This is because:

1. the annotation is not positioned to the right of the Han characters, and
2. correct positioning of the internal items needs additional and bopomofo-specific positioning rules to place the bopomofo letters vertically alongside the base character, and to position the tone marks relative to them, either above or in a second column with particular alignments.

Priority

Since this is important for education, it is prioritised as a basic issue.

Tests & results

I18n test suite, ruby-position:inter-character will make zhuyin annotations appear in vertical columns alongside the base in horizontal text.

I18n test suite, ruby-position:inter-character will make zhuyin non-neutral tone marks appear in the correct relative positions alongside the zhuyin characters in horizontal text.

I18n test suite, ruby-position:inter-character will make zhuyin neutral tone marks appear above the zhuyin characters in horizontal text.

Action taken

Blink • Gecko • WebKit

Outcomes

Version 18.2 of Safari (WebKit) supports ruby-position: inter-character in so far as it positions bopomofo glyphs vertically to the right of the Han characters — however, it doesn't position the tone marks correctly relative to the bopomofo letters, and therefore it doesn't yet provide a solution to this issue.

Start with the CSS Ruby specification, the HTML ruby and rt references, and the three linked I18n tests for ruby-position: inter-character. Compare the current browser results with the linked Chromium, Gecko, and WebKit issues. Done means bopomofo annotations appear beside Han characters and their tone marks have the required relative positioning.