clreq
clreq copied to clipboard
w3c
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:
-
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. -
Use HTML
ruby/rt,ruby-position: inter-character, and OpenType fonts for all characters inrt(see https://github.com/cmex-30/Bopomofo_on_Web/blob/master/BOPOMOFO%20TYPOGRAPHY.pdf). The CSS specinter-charactervalue for theruby-positionproperty 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:
- the annotation is not positioned to the right of the Han characters, and
- 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 neutral tone marks appear above the zhuyin characters in horizontal text.
Action taken
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.
The first comment in this issue contains text that will automatically appear in one or more gap-analysis documents as a subsection with the same title as this issue. Any edits made to that comment will be immediately available in the document. Proposals for changes or discussion of the content can be made in comments below this point.
Relevant gap analysis documents include: Chinese
I found my way here from https://github.com/w3c/i18n-activity/projects/3?card_filter_query=ruby and am curious what's missing. I tried recreating the Wikipedia example with HTML:
<!DOCTYPE html>
<style>
ruby {
font-size: 64px;
ruby-position: inter-character;
}
rt { font-size: 16px; }
</style>
<body lang=zh-Hant>
<ruby>
瓶<rt>ㄆㄧㄥˊ</rt>
子<rt>˙ㄗ</rt>
</ruby>
It's rendered similarly in Chrome, Firefox and Safari, here's a screenshot from Safari:
It looks like ruby-position: inter-character isn't supported by any browser, and perhaps that's common for bopomofo?
I'm also not sure if the tone marks are combined correctly in particular "˙ ㄗ" seems weird, but then I don't know how horizontal bopomofo is supposed to look like.
Are there more issues here?
When i'm able to get to it, i'll improve the problem statement here. In the meantime, you may find this illuminating:
Basically, bopomofo ruby is not normally rendered above the base, but rather each character is annotated to its right side with one vertical column containing the syllabics and one of the tones, and if other tones are used they appear in a second column, where the tone marks are aligned with the syllabics in various ways.
(And, btw, if rendering above the base, the vertical and horizontal alignment in your screen snap is pretty awful.)
hth
Thank you Richard, that was great reading you linked to. It looks like I wasn't far off with my guess, that tone marks and in particular the light tone need special support.
See more info below.
Spec: css-ruby
Tests & results: https://www.w3.org/International/i18n-tests/results/css-ruby#ruby_position_intercharacter
Browser bug reports: Blink • Gecko
I applied the new template, but also added text to the problem statement to describe what the gap actually is. Note also that in principle the spec links should briefly describe whether the specs already provide what is needed, or whether they need work – rather than just linking to relevant sections.