Web 1 2 Martin J. Dürst 2 Web Web EPUB Web Mozilla Firefox Web HTML5 XHTML W3C Ruby and Vertical Layout on the Web Implementation and Background HAJIME SHIOZAWA, 1 SHUN-ICHI MATSUBARA 2 and MARTIN J. DÜRST 2 The variety of Web pages has greatly increased in recent years, and the Web is beginning to take over more and more of the roles of printed paper. In particular, the EPUB ebook format, based on HTML and CSS, has attracted much attention recently. Ruby and vertical layout, both used widely in Japanese documents, have been discussed extensively. In this research, we have investigated and implemented ruby and vertical layout in Mozilla Firefox, with the goal of improving typography on the Web. For ruby, our implementation supports HTML5, XHTML, and invalid markup as well as a wide range of styling properties not implemented on other browsers. For vertical layout, we support not only lines ordered from right to left but also from left to right, the combination of horizontal and vertical layouts, as well as multicolumn vertical layout. We also discuss the W3C specifications on ruby and writing-mode. 1. Web 2010 HTML CSS EPUB Web HTML PC Web Web Mozilla Firefox Web Web Web 2. 2.1 2.1.1 1) James Joyce Finnegans Wake 1 Graduate School of Science and Engeneering, Aoyama Gakuin University 2 Colleage of Science and Engeneering, Aoyama Gakuin University 1 c 2011 Information Processing Society of Japan
モノルビ グループルビ 熟 語 ルビ 歩 時 雨 1 熟 語 Fig. 1 Mono-ruby, Group-ruby, Jukugo-ruby. inline annotation 2) Bopomofo 2.1.2 JIS X 4051 3) 3 1 1 2 W3C 4) 2.2 Web Web 3 XHTML Ruby Annotation -W3C Recommendation 5) HTML5 Ruby Markup -W3C Editor s Draft 6) CSS3 Ruby Module -W3C Editor s Draft 7) XHTML HTML5 CSS XHTML HTML5 CSS W3C Recommendation XHTML 2.2.1 XHTML HTML5 XHTML 2 Simple Ruby Complex Ruby 2 <ruby> <rb> <rt> 1 <rb> <rt> <rtc> <rtc> HTML5 3 XHTML <rb> <rt> HTML5 XHTML <rtc> <rbc> 2.2.2 CSS ( 1 ) ruby-position ( 2 ) ruby-align 2 c 2011 Information Processing Society of Japan
<ruby><rb> </rb><rt> </rt></ruby> <ruby> <rbc><rb> </rb><rb> </rb></rbc> <rtc><rt> </rt><rt> </rt></rtc> </ruby> 2 XHTML Fig. 2 An Example of XHTML ruby makrup. <ruby> <rt> </rt></ruby> <ruby> <rt> </rt> <rt> </rt></ruby> 3 HTML5 Fig. 3 An example of HTML5 ruby makrup. ( 3 ) ruby-overhang ( 4 ) ruby-span ruby-position before after ruby-align ruby-overhang 4) ruby-span ruby-span colspan ruby-span 2.3 2.3.1 Mozilla Firefox Mozilla Firefox Firefox HTML DOM Content Frame Content <div> <p> Frame <div> ソースコードdiv </div> <p> </p> <p> <strong> </strong> Content text p 1. 構 ツリー strong p解 析 text TextBlock text text 2. Frame 構 築 Frame 3. Frame ツリー TextTextText Inline Block Reflow 処 理 Fig. 4 4 Mozilla Firefox Process of computing layout on Mozilla Firefox. X HTML CSS 4 Content Content Frame Frame Frame Reflow 2.3.2 nsrubyframe nsrubycontainerframe nsrubycellframe Frame Frame Frame HTML5 XHTML Frame Table Table Frame 20 Frame Reflow Frame Reflow 3 c 2011 Information Processing Society of Japan
1 Table 1 Compatibility of ruby makrup on our firefox and other browsers. HTML5 XHTML XHTML XHTML Internet Explorer 8.0 60% - - Firefox 3.6 23% - - - - Chrome 8.0, Safari 5.0 13% - - Opera 11.0 2% - - - - Amaya 11.3 - - - Our Firefox - <ruby> <rb> </rb><rb> </rb> <rp>(</rp><rt> </rt><rt> </rt><rp>)</rp> </ruby> Fig. 5 5 <rb> <rt> An example of ruby markup with collecting <rb> and <rt>. Yahoo! JAPAN API 1 2.4 2.4.1 1 Firefox Firefox XHTML ruby-align ruby-position ruby-overhang ruby-span Web 2.4.2 Web Web Web EPUB 8) DAISY 9) Web Web Web DOM Web Web 2.4.3 HTML5 <rb> <rb> <rb> <rp> <rb> 5 XHTML XHTML XHTML <rb> <rt> <rb> 2.4.4 ruby-align distribute-letter CSS 1 http://developer.yahoo.co.jp/webapi/jlp/furigana/v1/furigana.html 4 c 2011 Information Processing Society of Japan
line-edge ruby-overhang start end 3. : :ブロック :グリフ 内 向 向 向 3.1 Etemad 10) ( 1 ) block progression ( 2 ) inline progression ( 3 ) glyph orientation 6 12 3.2 CSS Web CSS3 Writing Mode Module -W3C Working Draft 11) CSS3 Writing Mode Etemad 6 Fig. 6 Three properties for specifying writing-direction. ( 1 ) writing-mode ( 2 ) direction ( 3 ) text-orientation writing-mode horizontal-tb vertical-rl vertical-lr direction lr rl Bidi 12) unicode-bidi text-orientation 3.3 7 7 1 2 3 3.3.1 8 5 c 2011 Information Processing Society of Japan
信 青 仰 山 にもとづく 学 院 の 教 育 教 はキリスト 育 をめざし 教 青 山 神 求 すべての の し 前 に 愛 生 と 人 き 奉 と 仕 社 の 真 会 理 に 精 対 神 を する をもって 謙 虚 責 に 任 追 1: すべての 求 し 神 の 信 仰 2: 前 教 育 をめざし にもとづく 異 縦 フォントが 横 人 愛 と 奉 仕 の 精 神 をもって に 生 き 真 理 を 謙 学 虚 院 責 と 社 会 に 対 する の 任 追 教 育 各 なる 書 き へ き から 向 への 字 の 変 換 処 理 はキリスト 3: 全 ての の 座 標 変 換 7 Fig. 7 Process of translation to other writing-mode. 90 90 Frame 3.3.2 90 Windows text-orinentaiton 3.3.3 3.4 3.4.1 Web Web Web Web Web Braganza 13) Web インライン インライン 処 理 は 二 処 つの 理 は 段 二 階 つの を 経 段 る階 を 経 る インライン グリフ 回 転 回 転 8 Fig. 8 Two process of generating a vertical line. 6 c 2011 Information Processing Society of Japan
left/ startをもtop/ before width bottom/ after right/ endlogical height/ height top/ 青 スト 育 実 width/ をめざし に 山 教 生 学 信 き 院 仰 logical 追 究 の 真 にもとづく 教 神 理 育 の を は キリ horizontal-tb 愛 と 奉 仕 前 の 謙 に 精 虚 教 真 神 に Physical/ Logical after left/ height bottom/ end right/ beforelogical height/ width width/ 愛 と 奉 仕 の 精 神 を 真 理 を 謙 虚 に logical 追 究 し 神 の 前 に 真 実 生 き start とづく 教 育 をめざし キリスト 教 信 仰 にも 教 育 は 青 山 学 vertical-rl院 の Fig. 10 10 Relation of physical properties and logical properties. 9 Fig. 9 An example of multicolumn vertical layout. 9 3.4.2 before after left right logical-width logical-height start end before after 10 10 11 3.4.3 CSS height 7 c 2011 Information Processing Society of Japan
右 字 に 列 余 :あいう わをんレイアウト :50px 計 算 11 Fig. 11 Problem of block progression process. 5px 変 換 右 の 余 が 5px下 に る height 100vh viewport height 4. Web W3C HTML5 XHTML XHTML ruby-span CSS 1).., Vol.2, No.7, pp. 556 562, 1973. 2). HTML, Unicode., 1998-IM-34, pp. 17 22, 1998. 3). JIS X 4051:, 2004. 4),,, Richard Ishida,,,,, Felix. W3C. http://www.w3.org/tr/jlreq/ja/, 2009. 5) Michel Suignard, Masayasu Ishikawa, Martin Dürst, and Tex Texin. Ruby Annotation W3C Recommendation. http://www.w3.org/tr/ruby/, 2001. 6) Ian Hickson. HTML5 A vocabulary and associated APIs for HTML and XHTML W3C Working Draft. http://www.w3.org/tr/html5/, 2010. 7) Richard Ishida. CSS3 Ruby Module W3C Working Draft. http://dev.w3.org/ csswg/css3-ruby/, 2010. 8) Garth Conboy, Matt Garrish, Markus Gylling, William McCoy, Makoto MURATA, and Daniel Weck. EPUB 3 Overview -Working Draft. http://idpf.org/epub/30/spec/ epub30-overview.html, 2011. 9) National Information Standards Organization. ANSI/NISO Z39.86: Specifications for the Digital Talking Book, 2005. 10) Elika Etemad. Robust Vertical Text Layout. In Proceedings of 27th International Unicode Conference, 2005. 11) Elika Etemad, Koji Ishii, and Shinyu Murakami. CSS Writing Modes Module Level 3 W3C Working Draft. http://www.w3.org/tr/css3-writing-modes/, 2010. 12) Mark Davis. USA#9: Unicode Bidirectional Alogrithm. http://www.unicode.org/ reports/tr9/, 2010. 13) Cameron Braganza, Kim Marriott, Peter Moulder, Michael Wybrow, and Tim Dwyer. Scrolling Behaviour with Single- and Multi-Column Layout. In Proceedings of the 18th International World Wide Web Conference, 2009. 8 c 2011 Information Processing Society of Japan