EPUBの日本語レイアウトできること／苦手なこと

1. EPUBの日本語レイアウトできること／苦手なこと高瀬拓史（イースト株式会社） takase@est.co.jp INDD 2012 【B2】EPUB概要事例 20 July 2012

2. 自己紹介• 高瀬拓史（たかせひろし）• イースト株式会社勤務• EPUB普及を公私に渡ってお手伝い。 • JEPA「Minimal Requirements on EPUB for Japanese Text Layout」 • 電子出版環境整備事業「EPUB日本語拡張仕様策定」• a.k.a. ろす／@lost_and_found

3. 今日お話しすること• EPUB 3では新たに様々な日本語テキストの表現が可能となった。• では、どんな表現ができるの？どんな表現が苦手なの？• 仕様とビューワの対応状況から見てゆきましょう。

4. 前提知識：仕様編• コンテンツのレイアウトはCSSで指定するのが基本。• EPUB 3の仕様では（ビューワが対応すべき）CSSのプロパティや制約が CSS3 定義されている。 CSS2.1 → EPUB 3 CSS Proﬁle• CSS2.1 + CSS3の一部で構成される。 EPUB 3 CSS Proﬁle• 策定途上にある不安定なプロパティや値には、“-epub-”の接頭辞を付けた利用が推奨される。例: html{-epub-writing-mode:vertical-rl;}

5. 前提知識：ビューワ編• ビューワが採用する描画エンジンの主要なものに、WebKit と RMSDK(Adobe Reader Mobile SDK) がある。• WebKit • Appleが中心となって進めるオープンソースのエンジン。 • ChromeなどのブラウザやiBooks、Readium、NetFront Book Reader EPUB Edition、Kindle Fireなどが採用。• RMSDK • Adobeが販売するビューワ開発キット。 • Sony ReaderやNook、OverdriveなどのEPUBビューワで採用。 • EPUB 2のエンジンにEPUB 3の日本語レイアウトをサポートしたもの。• WebKitとRMSDKの両方を搭載したビューワもある。

6. チェック内容• 出版社が重視する日本語組版表現は電書協「EPUB3.0 日本語組版要望表」によくまとまっています。• …が、時間的な制約により、項目は超基本的なものにとどめます。• HTMLとCSSに関する項目にとどめます。• 対象はWebKit（r122778）for Mac OS XとAdobe Digital Editions 1.8 Preview4 for Mac OS Xだけです。• 私の独断と偏見で以下の判定します。飽くまで現時点のものです。使える注意が必要厳しい

7. （単純な）縦書き• CSS Writing Mode Level 3のwriting-modeプロパティを利用する。• horizontal-tb: 横書き• vertical-rl: 行が右から左に送られる縦書き。＝日本語の縦書き• vertical-lr: 行が左から右に送られる縦書き。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 使える使える

8. • いずれのエンジンでも縦書きで文章を表示できる。• 縦書き固有のグリフにも対応している。 WebKit RMSDK

9. テキストの縦横混在• 一つのページの中で縦書きと横書きのテキストが混在するケース。• 縦書きの書籍でも表やキャプションなどは横書きの場合がある。• 幾つかのブロックにそれぞれ異なる writing-modeを指定して検証。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 注意が必要厳しい

10. WebKit RMSDK• WebKitでは全てのwriting-modeをサポート。ただしページ表現するビューワではリフローの結果レイアウトが破綻する可能性もある。• RMSDKではwiriting-modeを指定できるのがhtml要素のみであるため、混在は不可能。• RMSDKを前提とした場合、ページ内での縦横の混在は断念せざるをえない。

11. writing-mode WebKit NB Adobe Digital Editions CSS3 Writing Mode EPUB 3 CSS Proﬁle r122778 1.8 prev4 20120301WD (=20110428WD) (Mac OS X) (Mac OS X) -webkit-writing-modeproperty writing-mode -epub-writing-mode ※-epub-writing-mode -epub-writing-mode horizontal-tb horizontal-tb horizontal-tb ※horizontal-tb value vertical-rl vertical-rl vertical-rl ※vertical-rl vertical-lr vertical-lr vertical-lr ― • ※html要素にのみ指定可能。

12. 縦中横• CSS Writing Mode Level 3にあったtext- combineプロパティを利用して表現する。• このプロパティは現在のCSSの草稿にはもはや存在せず、text-combine-horizontalと text-combine-modeに置き換わっている。• まだ安定していないプロパティと言える。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 注意が必要注意が必要

13. • エンジンによって文字の収め方、行内に収まらない場合の挙動が異なる。• WebKitは小さいグリフを用い、収まらない場合は縦中横を解除。 RMSDKはグリフは変化せず、収まらない場合は隣接する行に重なる。• 行高（line-height）は十分に確保すること。• 3桁以上の縦中横は利用する必然性を吟味し、代替表現も検討すること。 WebKit RMSDK

14. text-combine* WebKit NB Adobe Digital Editions CSS3 Writing Mode EPUB 3 CSS Proﬁle r122778 1.8 prev4 20120301WD (=20110428WD) (Mac OS X) (Mac OS X) -webkit-text-combineproperty text-combine-horizontal -epub-text-combine -epub-text-combine -epub-text-combine none none none none all ― ― ― numeric ― ― ― digits ― ― ― value alpha ― ― ― latin ― ― ― alphanumeric ― ― ― ― horizontal <number>? horizontal horizontalproperty text-combine-mode ― ― ― auto ― ― ― compress ― ― ― value no-compress ― ― ― use-glyphs ― ― ―

15. 縦書きの文字の向き• 正立、横倒し（時計回り90度回転）など文字の向きを指定するには、CSS Writing Mode Level 3のtext-orientationプロパティを利用する。• 最新のCSSの草稿とEPUBが参照する草稿では値が異なっている。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 注意が必要厳しい

16. • 基本的に正立と横倒しの使い分けができれば十分。• WebKitはvertical-rightとupright をサポート• 正立させたからといって行の中心に文字が来るとは限らない。 WebKit• RMSDKはこのプロパティをサポートしていないため、半角／全角の使い分けや縦中横で代用する他ないだろう。• RMSDKの文字化けした記号類はWindows版では表示された。利用するフォントの違い。 RMSDK

17. text-orientation WebKit NB Adobe Digital Editions CSS3 Writing Mode EPUB 3 CSS Proﬁle r122778 1.8 prev4 20120301WD (=20110428WD) (Mac OS X) (Mac OS X) -webkit-text-orientationproperty text-orientation -epub-text-orientation ― -epub-text-orientation mixed-right vertical-right vertical-right ― upright upright upright ― sideways-right rotate-right ― ― value sideways-left rotate-left ― ― sideways rotate-normal ― ― use-glyph-orientation auto ― ―

18. ルビ• HTML5の標準のタグに含まれている。• モノルビ、グループルビ、（モノルビをベースにした）熟語ルビを記述できる。• 両側ルビは記述できない。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 使える注意が必要

19. WebKit RMSDK• RMSDKでは先頭のrt要素のルビ文字しか表示されない。すべての親文字をrb要素で囲めば全てのルビ文字を表示できるが、 rb要素はHTML5に含まれていないため、正しいHTML5にならない。 <ruby><rb>鬼</rb><rt>き</rt><rb>門</rb><rt>もん</rt></ruby>• 行高が十分に確保されない場合、WebKitでは行を後ろずらしてルビ文字を収める。RMSDKでは隣接する行にルビ文字が重なる。

20. 圏点• CSS Text Level 3のtext-emphasis系プロパティを使って指定する。• キーワードを組み合わせて10種類＋αの圏点の形状を指定する。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 使える使える

21. • WebKitは仕様に忠実な実装。• RMSDKはユーザ指定の圏点が利用できない。塗りのみを指定した構文をサポートしていない。短縮構文をサポートしていない。色を指定できない。表示する側を指定できるといったの特徴があるが、実用できるレベルには達している。 WebKit RMSDK

22. text-emphasis* WebKit NB Adobe Digital Editions CSS3 Text EPUB 3 CSS Profile r122778 1.8 prev4 20120119WD (=20110412WD) (Mac OS X) (Mac OS X) -webkit-text-emphasis-styleproperty text-emphasis-style -epub-text-emphasis-style -epub-text-emphasis-style -epub-text-emphasis-style none none none none filled filled filled filled open open open open dot dot dot dot value circle circle circle circle double-circle double-circle double-circle double-circle triangle triangle triangle triangle sesame sesame sesame sesame <string> <string> <string> ―

23. text-emphasis* WebKit NB Adobe Digital Editions CSS3 Text EPUB 3 CSS Proﬁle r122778 1.8 prev4 20120119WD (=20110412WD) (Mac OS X) (Mac OS X) -webkit-text-emphasis-colorproperty text-emphasis-color -epub-text-emphasis-color ― -epub-text-emphasis-color value <color> <color> <color> ― -adobe-text-emphasis-property text-emphasis-position ― ― position above ― ― above below ― ― below value right ― ― right left ― ― left -webkit-text-emphasisproperty text-emphasis -epub-text-emphasis ― -epub-text-emphasis

24. ひとまずまとめ• 紙面のデザインでできることに比べるとかなり物足りないかもしれませんが、シンプルな出版物は十分に表現可能です。むしろシンプルに作るのがコツ。• 各分野の関係者の尽力により、EPUBの日本語表現は年々確実に良いものとなっています。• 特にWebKitに更なる改良を加えたACCESS社のReadiumや Book Reader EPUB Editionへの取り組みは注目です。• EPUBが一過性のブームではなく、より良い日本語表現の場として育ってゆくよう、これからも見守ってください。

25. 超おまけ• 時間上の制約により、ここから先の内容はお話しない予定の資料です。

26. 禁則ルール• WebKit、RMSDKともに禁則処理がなされる。• 細かい禁則ルールはCSS Text Level 3のline- breakプロパティで指定する。• WebKit、RMSDKともに緩い禁則（loose）には対応していない。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 注意が必要注意が必要

27. line-break WebKit NB Adobe Digital Editions CSS3 Text EPUB 3 CSS Proﬁle r122778 1.8 prev4 20120119WD (=20110412WD) (Mac OS X) (Mac OS X) -webkit-line-breakproperty line-break -epub-line-break -epub-line-break -epub-line-break auto auto ― auto loose loose ― ― value normal normal normal normal strict strict ― strict ― ― after-white-space ―

28. 句読点ぶら下げ• 行頭に句読点が来た時、その句読点を前の行の基本版面の外にぶら下げることがある。• CSS Text Level 3ではこれを実現するhanging- punctuationプロパティがある。• …が、EPUB 3 CSS Proﬁleには含まれていない。• WebKit、RMSDKともに実装されていない。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 厳しい厳しい

29. hanging-punctuation WebKit NB Adobe Digital Editions CSS3 Text EPUB 3 CSS Proﬁle r122778 1.8 prev4 20120119WD (=20110412WD) (Mac OS X) (Mac OS X)property hanging-punctuation ― ― ― none ― ― ― ﬁrst ― ― ― value last ― ― ― force-end ― ― ― allow-end ― ― ―

30. 均等割り• 字間を均等に空け，文字列の両端を行頭及び行末にえる方法。• CSS Text Level 3ではこれを実現するtext-align-lastプロパティがある。• WebKit、RMSDKともに実装されていない。• ブラウザではInternet ExplorerやFireFoxが実装している。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 厳しい厳しい

31. text-align-last WebKit NB Adobe Digital Editions CSS3 Text EPUB 3 CSS Proﬁle r122778 1.8 prev4 20120119WD (=20110412WD) (Mac OS X) (Mac OS X)property text-align-last -epub-text-align-last ― ― auto auto ― ― start start ― ― end end ― ― value left left ― ― right right ― ― center center ― ― justify justify ― ―

32. 文字の変換• EPUBではCSS Text Level 3のtext-transformプロパティによって次の変換ができるとしている。• -epub-fullwidth 半角文字→全角文字• -epub-fullsize-kana 小書きの仮名→通常の仮名• …が、これらの値はWebKit、RMSDKともに実装していない。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 厳しい厳しい

33. text-transform WebKit NB Adobe Digital Editions CSS3 Text EPUB 3 CSS Proﬁle r122778 1.8 prev4 20120119WD (=20110412WD) (Mac OS X) (Mac OS X)property text-transform text-transform text-transform text-transform full-width -epub-fullwidth ― ― value ※full-size-kana -epub-fullsize-kana ― ― • ※full-size-kanaはCSS Text Level 3の範囲から落とされLevel 4に持ち越しの方向。

34. ルビのスタイリング• CSS 3 Ruby Moduleではルビ文字の上付き、中付き、下付きや前後の文字へのルビかけルールなどを指定できるが、 EPUB 3 CSS Proﬁleには含まれていない。• RMSDKでは“-adobe-”接頭辞付きのプロパティで先行実装している。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 厳しい使える

35. CSS3 Ruby Module CSS3 Ruby WebKit NB Adobe Digital Editions EPUB 3 CSS Proﬁle r122778 1.8 prev4 20110630WD (Mac OS X) (Mac OS X)property ruby-position -epub-ruby-position ― -epub-ruby-position before over ― over after under ― under value inter-character inter-character ― ― inline ― ― ―property ruby-align ― ― -adobe-ruby-align auto ― ― auto start ― ― start left ― ― left center ― ― center value end ― ― end right ― ― right distribute-letter ― ― distribute-letter distribute-space ― ― distribute-space line-edge ― ― line-edgeproperty ruby-overhang ― ― -adobe-ruby-overhang auto ― ― auto start ― ― ― value end ― ― ― none ― ― none

36. 段組み• 段組みはCSS Multi-column Layout Moduleで指定する。• WebKit自体は幾つかのプロパティをサポートしているが、ページ表示するビューワに組み込んでリフローと共存させるのは極めて難しい。• RMSDKはプロパティをサポートしておらず、制作者が指定することはできないものの、ウィンドウ幅や文字サイズによって自動的に段組表示を行う。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 厳しい厳しい

37. CSS Multi-column Layout Module WebKit NB Adobe Digital Editions CSS3 Multicol EPUB 3 CSS Proﬁle r122778 1.8 prev4 20110630CR (Mac OS X) (Mac OS X)property column-width column-width -webkit-column-width ― <length> <length> <length> ― value auto auto auto ―property column-count column-count -webkit-column-count ― <integer> <integer> <integer> ― value auto auto auto ―property columns columns columns ―property column-gap column-gap -webkit-column-gap ― <length> <length> <length> ― value normal normal normal ―property column-rule-color column-rule-color column-rule-color ― value <color> <color> <color> ―property column-rule-style column-rule-style column-rule-style ― value <border-style> <border-style> <border-style> ―property column-rule-width column-rule-width column-rule-width ― value <border-width> <border-width> <border-width> ―property column-rule column-rule column-rule ―

38. CSS Multi-column Layout Module WebKit NB Adobe Digital Editions CSS3 Multicol EPUB 3 CSS Proﬁle r122778 1.8 prev4 20110630CR (Mac OS X) (Mac OS X)property break-before break-before ― ― auto auto ― ― always always ― ― avoid avoid ― ― left left ― ― value right right ― ― page page ― ― column column ― ― avoid-page avoid-page ― ― avoid-column avoid-column ― ―property break-after break-after ― ― auto auto ― ― always always ― ― avoid avoid ― ― left left ― ― value right right ― ― page page ― ― column column ― ― avoid-page avoid-page ― ― avoid-column avoid-column ― ―

39. CSS Multi-column Layout Module WebKit NB Adobe Digital Editions CSS3 Multicol EPUB 3 CSS Profile r122778 1.8 prev4 20110630CR (Mac OS X) (Mac OS X)property break-inside break-inside ― ― auto auto ― ― avoid avoid ― ― value avoid-page avoid-page ― ― avoid-column avoid-column ― ―property column-span ― -webkit-column-span ― none ― ― ― value all ― all ―property column-fill column-fill ― ― auto auto ― ― value balance balance ― ―

40. ご清聴ありがとうございました。

EPUBの日本語レイアウト できること／苦手なこと

Hiroshi Takase