Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years...
Transcript of Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years...
![Page 1: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/1.jpg)
Bopomofo Rubyimplement and requirement
Bobby Tung
Founder of Wanderer Digital Publishing Inc.Consultant of Taiwan Digital Publishing Forum
June 4, 2013
![Page 2: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/2.jpg)
What is Bopomofo?
![Page 3: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/3.jpg)
• Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan).
• Bopomofo is used in education from grade 1 to grade 4 .
• 90% people in Taiwan use Bopomofo as main input method. So that's very important.
figure 1) Bopomofo is simplified symbols from character with pronunciation.
![Page 4: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/4.jpg)
Structure of Bopomofo
![Page 5: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/5.jpg)
• Bopomofo system contains 37 symbols with 4 tone marks.
ㄅ U+3105
ㄆ U+3106
ㄇ U+3107
ㄈ U+3108
ㄉ U+3109
ㄊ U+310A
ㄋ U+310B
ㄌ U+310C
ㄍ U+310D
ㄎ U+310E
ㄏ U+310F
ㄐ U+3110
ㄑ U+3111
ㄒ U+3112
ㄓ U+3113
ㄔ U+3114
ㄕ U+3115
ㄖ U+3116
ㄗ U+3117
ㄘ U+3118
ㄙ U+3119
ㄚ U+311A
ㄛ U+311B
ㄜ U+311C
ㄝ U+311D
ㄞ U+311E
ㄟ U+311F
ㄠ U+3120
ㄡ U+3121
ㄢ U+3122
ㄣ U+3123
ㄤ U+3124
ㄥ U+3125
ㄦ U+3126
ㄧ U+3127
ㄨ U+3128
ㄩ U+3129
˙ U+02D9
ˊ U+02CA
ˇ U+02C7
ˋ U+02CB
chart 1) Bopomofo symbols and tone marks in UNICODE chart
![Page 6: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/6.jpg)
˙ㄇ⼀一ㄠ
ㄨㄛˇㄓˋ
21 Consonants
• 14 cannot pronounce alone.
• 7 can pronounce alone.
![Page 7: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/7.jpg)
˙ㄇ⼀一ㄠ
ㄨㄛˇㄩˊ
16 Rhymes and Medials
• All can pronounce alone.
• 3 as medials can also pronounce with other Rhymes.
![Page 8: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/8.jpg)
˙ㄇ⼀一ㄠ
ㄨㄛˇㄩˊ
4 Tone Marks
• 3(ˊ ˇ ˋ)should be placed to the right, usually aligned middle.They affect whole character pronunciation, so they should be placed in parallel.
• 1(˙)should be placed above symbols. It affects consonant and first rhyme, so it should be placed above.
![Page 9: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/9.jpg)
Usage of Bopomofo
![Page 10: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/10.jpg)
• Bopomofo of a character could be:
1. a set of 1~4 full width symbol(s) and a tone mark.
2. a set of 1~3 full width symbol(s) w/wo a tone mark right aside.
• Bopomofo placed to the right of the Chinese character vertically in most all printed books, whether horizontal or vertical writing.
• Bopomofo usually marked with every character in books for education purpose.
![Page 11: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/11.jpg)
• Ministry of Education Taiwan had published its composition rule in 2000.
• Almost impossible to do as-is on web.
• Tone makers’ glyphs are another issue.
In Print Media
figure 2) Bopomofo composition rule in printed media by Ministry of Education.
˙ U+02D9 DOT ABOVE
ˊ U+02CA MODIFIER LETTER ACUTE ACCENT
ˇ U+02C7 CARON
ˋ U+02CB MODIFIER LETTER GRAVE ACCENT
chart 2) Bopomofo tone makers’ glyphs are hard to fulfill MoE’s requirement.
![Page 12: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/12.jpg)
喵 ˙ㄇㄧㄠ
Case 1) a set of 4 full width symbols and tone mark.
100%
100%
100% 100%
25%
25%
25%
25%
25%
![Page 13: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/13.jpg)
標ㄅㄧㄠ
Case 2) a set of 3 full width symbols.
100%
100%
100% 100%
25%
25%
25%
25%
![Page 14: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/14.jpg)
飛ㄈㄟ
Case 3) a set of 2 full width symbols.
100%
100%
100% 100%
25%
25%
25%
![Page 15: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/15.jpg)
知ㄓ
Case 4) 1 full width symbol.
100%
100%
100% 100%
25%
25%
![Page 16: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/16.jpg)
⿃鳥ㄋㄧㄠ
Case 5) a set of 3 full width symbols with a tone mark aside right.
100%
100%
100% 100%
25%
25%
25%
25%
ˇ
25%
25%
![Page 17: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/17.jpg)
我ㄨㄛ
Case 6) a set of 2 full width symbols with a tone mark aside right.
100%
100%
100% 100%
25%
25%
25%ˇ 25%
25%
![Page 18: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/18.jpg)
⿂魚ㄩ
Case 7) a set of 1 full width symbols with a tone mark aside right.
100%
100%
100% 100%
25%
25%ˊ 25%
25%
![Page 19: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/19.jpg)
Samplesof Bopomofo Ruby
![Page 20: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/20.jpg)
HTML markup
<ruby>左<rt><ruby>ㄗㄨㄛ<rt class="tone">ˇ</rt></ruby></rt></ruby><ruby>邊<rt>ㄅㄧㄢ</rt></ruby><ruby>⼀一<rt>ㄧ</rt></ruby><ruby>隻<rt>ㄓ</rt></ruby><ruby>貓<rt>ㄇㄠ</rt></ruby><ruby>喵<rt>˙ㄇㄧㄠ</rt></ruby><ruby>喵<rt>˙ㄇㄧㄠ</rt></ruby><ruby>叫<rt><ruby>ㄐㄧㄠ<rt class="tone">ˋ</rt></ruby></rt></ruby>
figure 3) HTML markup for Bopomofo implementation*<rp> is omitted for editing easily
• Marked as mono-ruby(モノルビ).
• Nested ruby structure for side tone mark.
• Add class for relative font-size setting.
![Page 21: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/21.jpg)
Stylesheet design
h1{font-family: "Heiti-TC", Sans-serif;margin-right: 0.5em;}
p{font-family: "Heiti-TC", Sans-serif;font-size: 12pt;line-height: 1.7em;}
rt{font-size: 25%;line-height: normal;text-align: center;}
rt.tone{font-size: 100%;}
figure 4) CSS for Bopomofo implementation
• <rt>’s font-size by proportion.
• <p>’s font-size must be absolute value.
![Page 22: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/22.jpg)
On Webkit
figure 5) Bopomofo sample on Webkit
![Page 23: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/23.jpg)
EPUB 3 FXL
figure 6) Bopomofo EPUB 3 FXL sample on iBooks
![Page 24: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/24.jpg)
EPUB reflow
figure 7) Bopomofo EPUB 3 sample on iBooksno line length
figure 8) Bopomofo EPUB 3 sample on Kobo iOS Appno pagination
![Page 25: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/25.jpg)
Horizontal Writing CSS
rt{font-size: 25%;line-height: normal;text-align: center;-epub-writing-mode: vertical-lr;-webkit-writing-mode: vertical-lr;vertical-align: middle;display: inline;}
figure 9) CSS for Bopomofo implementation in Horizontal Writing.
• imply writing-mode: vertical-lr.
• imply display: inline.
![Page 26: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/26.jpg)
Horizontal Writing HTML
figure 10) In horizontal writing, Mono Ruby will cause layout break.
<ruby>左<rt><ruby>ㄗㄨㄛ<rt class="tone">ˇ</rt></ruby></rt></ruby><ruby>邊<rt>ㄅㄧㄢ</rt></ruby><ruby>⼀一<rt>ㄧ</rt></ruby><ruby>隻<rt>ㄓ</rt></ruby><ruby>貓<rt>ㄇㄠ</rt></ruby><ruby>喵<rt>˙ㄇㄧㄠ</rt></ruby><ruby>喵<rt>˙ㄇㄧㄠ</rt></ruby><ruby>叫<rt><ruby>ㄐㄧㄠ<rt class="tone">ˋ</rt></ruby></rt></ruby>
<ruby>左<rt><ruby>ㄗㄨㄛ<rt class="tone">ˇ</rt></ruby></rt>邊<rt>ㄅㄧㄢ</rt>⼀一<rt>ㄧ</rt>隻<rt>ㄓ</rt>貓<rt>ㄇㄠ</rt>喵<rt>˙ㄇㄧㄠ</rt>喵<rt>˙ㄇㄧㄠ</rt>叫<rt><ruby>ㄐㄧㄠ<rt class="tone">ˋ</rt></ruby></rt></ruby>
MonoRuby
GroupRuby
![Page 27: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/27.jpg)
align issue
inline issue letter spacing issue(investigating)
figure 11) In horizontal writing, Issues Bopomofo ruby confronted.
![Page 28: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/28.jpg)
Requirement
![Page 29: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/29.jpg)
ruby-align: center• Behave as Case 1~7.
• Ruby text in this mode compressed to fit ruby base width.
• Keep proportion even with relative font-size. (for ebook convention)
• Conflict with Japanese Ruby Requirement?
figure 12) In vertical writing, font-size is relative(font-size: 100%).
![Page 30: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/30.jpg)
ruby-position: inter-character
• keep Bopomofo ruby placed right of ruby base. especially in horizontal writing.
• With this property, ruby base and ruby text should not be separated with line-break.(as line-start prohibition rule?)
figure 13) Taiwan’s Mandarin textbook, quiz section. horizontal writing with Bopomofo.
![Page 31: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/31.jpg)
Alternative Solution
![Page 32: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/32.jpg)
Webfont
• It works, but not good enough.
• Lot of Chinese characters have alternative pronunciations, max to 6 patterns.
• 6 fonts with contents span class markup cannot be done easily. Even with subset to reduce size.
• It’s proprietary, not open standard.
![Page 33: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/33.jpg)
Tool
![Page 34: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/34.jpg)
Why Tool?
• Bopomofo usually marked with every character in books for educational purpose.
• Lot of Chinese characters have alternative pronunciations, maximum to 6 patterns.
=Tool to convert article into Bopomofo ruby html with choosing for
![Page 35: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/35.jpg)
Browser implement
![Page 36: Bopomofo Ruby - World Wide Web Consortium · •Bopomofo is a phonetic system with 100 years history used by Republic of China(Taiwan). • Bopomofo is used in education from grade](https://reader034.fdocuments.in/reader034/viewer/2022042103/5e7fef1bf40fd63fc40a767f/html5/thumbnails/36.jpg)
• Government in Taiwan is willing to host a project to speedup browser implement.
• May start late this year.