No bopomofo ruby support

r12a commented 4 years ago

This issue is applicable to Chinese.

Bopomofo, also named Zhuyin, is a transliteration and writing system for Chinese. For example:

More:

The Gap:

Bopomofo ruby is not supported by any browser. This is because it 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.

The CSS spec provides an inter-character value for the ruby-position property which is supposed to indicate to the browser that this arrangement should be applied.

There are two font-based ways to implement Bopomofo:

Make special fonts, and combine the Chinese character and the Bopomofo characters into the glyph. Use spans, CSS, and web fonts 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 in rt (see https://github.com/cmex-30/Bopomofo_on_Web/blob/master/BOPOMOFO%20TYPOGRAPHY.pdf).

No browser supports ruby-position: inter-character at the moment (see test results), so people use ruby { writing-mode: vertical-lr; } to achieve this (see an example), however, that doesn't produce the needed positioning.

Spec status:

Action taken:

Blink • Gecko

Outcomes:

tbd

Priority

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

r12a commented 4 years ago

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_

foolip commented 3 years ago

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?

r12a commented 3 years ago

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

foolip commented 3 years ago

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.

xfq commented 3 years ago

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

xfq commented 1 year ago

I rewrote the first comment to add more information about Bopomofo.

r12a commented 1 year ago

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.

w3c / clreq