Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Bopomofo Ruby
implement and requirement	

!
Bobby Tung	

!
Founder of Wanderer Digital Publishing Inc.

Consultant of Taiw...
What is Bopomofo?
•

Bopomofo is a phonetic system with 100 years history
used by Republic of China(Taiwan).	


•
•

Bopomofo is used in edu...
Structure of Bopomofo
• Bopomofo system contains 37 symbols
with 4 tone marks.
ㄅ

U+3105

ㄚ

U+311A

ㄆ

U+3106

ㄛ

U+311B

ㄇ

U+3107

ㄜ

U+311C
...
˙	

ㄇ	

 ㄨ	

 ㄓ
ˇ ˋ
⼀一	

 ㄛ
ㄠ

21 Consonants	


•

14 cannot pronounce alone.	


•

7 can pronounce alone.
˙	

ㄇ	

 ㄨ	

 ㄩ
ˇ ˊ
⼀一	

 ㄛ
ㄠ

!

16 Rhymes and Medials	


•

All can pronounce alone.	


•

3 as medials can also pronoun...
4 Tone Marks	


˙	

ㄇ	

 ㄨ	

 ㄩ
ˇ ˊ
⼀一	

 ㄛ
ㄠ

•

3(ˊ ˇ ˋ)should be placed to
the right, usually aligned middle.

They aff...
Usage of Bopomofo
• 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 s...
In Print Media
•

Ministry of Education Taiwan
had published its
composition rule in 2000.	


•

Almost impossible to do a...
100%

100%

25%

喵

˙
ㄇ
ㄧ
ㄠ

Case 1) a set of 4 full width symbols and tone mark.	


25%
25%
25%
25%
100%

100%

25%

標

ㄅ
ㄧ
ㄠ

Case 2) a set of 3 full width symbols.	


25%
25%
25%
100%

100%

25%

飛

ㄈ
ㄟ

Case 3) a set of 2 full width symbols.	


25%
25%
100%

100%

25%

知

ㄓ

Case 4) 1 full width symbol.	


25%
100%

100%

⿃鳥

25%

25%

ㄋ
ㄧˇ
ㄠ

Case 5) a set of 3 full width symbols with a tone mark aside right.	


25%
25%
25%

25%
100%

100%

我

25%

25%

ㄨ
ˇ
ㄛ

Case 6) a set of 2 full width symbols with a tone mark aside right.	


25%
25%
25%
100%

100%

⿂魚

25%

25%

ㄩˊ

Case 7) a set of 1 full width symbols with a tone mark aside right.	


25%

25%
Samples
of Bopomofo Ruby
HTML markup
•
•
•

Marked as mono-ruby(モノルビ).	

Nested ruby structure for side tone mark.	

Add class for relative font-si...
Stylesheet design
•
•

<rt>’s font-size by proportion.	

<p>’s font-size must be absolute value.
h1{	

font-family: "Heiti...
On Webkit

figure 5) Bopomofo sample on Webkit
EPUB 3 FXL

figure 6) Bopomofo EPUB 3 FXL sample on iBooks
EPUB reflow

figure 7) Bopomofo EPUB 3 sample on iBooks	

no line length

figure 8) Bopomofo EPUB 3 sample on Kobo iOS App	

...
Horizontal Writing CSS
•
•

imply writing-mode: vertical-lr.	

imply display: inline.
rt{	

font-size: 25%;	

line-height:...
Horizontal Writing HTML
Mono	

Ruby

<ruby>左<rt><ruby>ㄗㄨㄛ<rt class="tone">ˇ</
rt></ruby></rt></ruby>	

<ruby>邊<rt>ㄅㄧㄢ</rt>...
align issue

inline issue

letter spacing issue

(investigating)

figure 11) In horizontal writing, Issues Bopomofo ruby co...
Requirement
ruby-align: center
•
•

Behave as Case 1~7.	


•

Keep proportion even
with relative font-size.
(for ebook convention)	


...
ruby-position: inter-character
•

keep Bopomofo ruby
placed right of ruby base.
especially in horizontal
writing.	


•

Wi...
Alternative Solution
Webfont
• It works, but not good enough.	

• Lot of Chinese characters have alternative
pronunciations, max to 6 patterns....
Tool
Why Tool?
• Bopomofo usually marked with every

character in books for educational purpose.	


• Lot of Chinese characters...
Browser implement
• Government in Taiwan is willing to host a
project to speedup browser implement. 	


• May start late this year.
Thank you!
bobbytung@wanderer.tw
Upcoming SlideShare
Loading in …5
×

Bopomobo Ruby

2,267 views

Published on

History, usage and layout proposal, and implement by nest ruby markup and css.

On Jun,4,2013 Keio Univ. W3C ebook and i18n workshop.

Published in: Technology, Education
  • Be the first to comment

Bopomobo Ruby

  1. 1. Bopomofo Ruby implement and requirement ! Bobby Tung ! Founder of Wanderer Digital Publishing Inc.
 Consultant of Taiwan Digital Publishing Forum ! June 4, 2013
  2. 2. What is Bopomofo?
  3. 3. • 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.
  4. 4. Structure of Bopomofo
  5. 5. • Bopomofo system contains 37 symbols with 4 tone marks. ㄅ U+3105 ㄚ U+311A ㄆ U+3106 ㄛ U+311B ㄇ U+3107 ㄜ U+311C ㄈ U+3108 ㄝ U+311D ㄉ U+3109 ㄞ U+311E ㄊ U+310A ㄟ U+311F ㄋ U+310B ㄠ U+3120 ㄌ U+310C ㄡ U+3121 ㄍ U+310D ㄢ U+3122 ㄎ U+310E ㄣ U+3123 ㄏ U+310F ㄤ U+3124 ㄐ U+3110 ㄥ U+3125 ㄑ U+3111 ㄦ U+3126 ㄒ U+3112 ㄧ U+3127 ㄓ U+3113 ㄨ U+3128 ㄔ U+3114 ㄩ U+3129 ㄕ U+3115 ㄖ U+3116 ˙˙ U+02D9 ㄗ U+3117 ˊ U+02CA ㄘ U+3118 ˇ U+02C7 ㄙ U+3119 ˋ U+02CB chart 1) Bopomofo symbols and tone marks in UNICODE chart
  6. 6. ˙ ㄇ ㄨ ㄓ ˇ ˋ ⼀一 ㄛ ㄠ 21 Consonants • 14 cannot pronounce alone. • 7 can pronounce alone.
  7. 7. ˙ ㄇ ㄨ ㄩ ˇ ˊ ⼀一 ㄛ ㄠ ! 16 Rhymes and Medials • All can pronounce alone. • 3 as medials can also pronounce with other Rhymes.
  8. 8. 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.
  9. 9. Usage of Bopomofo
  10. 10. • 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.
  11. 11. In Print Media • Ministry of Education Taiwan had published its composition rule in 2000. • Almost impossible to do asis on web. • Tone makers’ glyphs are another issue. ˙ 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. figure 2) Bopomofo composition rule in printed media by Ministry of Education.
  12. 12. 100% 100% 25% 喵 ˙ ㄇ ㄧ ㄠ Case 1) a set of 4 full width symbols and tone mark. 25% 25% 25% 25%
  13. 13. 100% 100% 25% 標 ㄅ ㄧ ㄠ Case 2) a set of 3 full width symbols. 25% 25% 25%
  14. 14. 100% 100% 25% 飛 ㄈ ㄟ Case 3) a set of 2 full width symbols. 25% 25%
  15. 15. 100% 100% 25% 知 ㄓ Case 4) 1 full width symbol. 25%
  16. 16. 100% 100% ⿃鳥 25% 25% ㄋ ㄧˇ ㄠ Case 5) a set of 3 full width symbols with a tone mark aside right. 25% 25% 25% 25%
  17. 17. 100% 100% 我 25% 25% ㄨ ˇ ㄛ Case 6) a set of 2 full width symbols with a tone mark aside right. 25% 25% 25%
  18. 18. 100% 100% ⿂魚 25% 25% ㄩˊ Case 7) a set of 1 full width symbols with a tone mark aside right. 25% 25%
  19. 19. Samples of Bopomofo Ruby
  20. 20. HTML markup • • • Marked as mono-ruby(モノルビ). Nested ruby structure for side tone mark. Add class for relative font-size setting. <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
  21. 21. Stylesheet design • • <rt>’s font-size by proportion. <p>’s font-size must be absolute value. 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
  22. 22. On Webkit figure 5) Bopomofo sample on Webkit
  23. 23. EPUB 3 FXL figure 6) Bopomofo EPUB 3 FXL sample on iBooks
  24. 24. EPUB reflow figure 7) Bopomofo EPUB 3 sample on iBooks no line length figure 8) Bopomofo EPUB 3 sample on Kobo iOS App no pagination
  25. 25. Horizontal Writing CSS • • imply writing-mode: vertical-lr. imply display: inline. 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.
  26. 26. Horizontal Writing HTML Mono Ruby <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> Group 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> figure 10) In horizontal writing, Mono Ruby will cause layout break.
  27. 27. align issue inline issue letter spacing issue
 (investigating) figure 11) In horizontal writing, Issues Bopomofo ruby confronted.
  28. 28. Requirement
  29. 29. ruby-align: center • • Behave as Case 1~7. • Keep proportion even with relative font-size. (for ebook convention) • Conflict with Japanese Ruby Requirement? Ruby text in this mode compressed to fit ruby base width. figure 12) In vertical writing, font-size is relative
 (font-size: 100%).
  30. 30. 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 linestart prohibition rule?) figure 13) Taiwan’s Mandarin textbook, quiz section. horizontal writing with Bopomofo.
  31. 31. Alternative Solution
  32. 32. 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.
  33. 33. Tool
  34. 34. 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 pronunciations .
  35. 35. Browser implement
  36. 36. • Government in Taiwan is willing to host a project to speedup browser implement. • May start late this year.
  37. 37. Thank you! bobbytung@wanderer.tw

×