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.
EPUBの日本語レイアウト できること/苦手なこと  高瀬 拓史(イースト株式会社)     takase@est.co.jp INDD 2012 【B2】EPUB概要 事例         20 July 2012
自己紹介• 高瀬 拓史(たかせ ひろし)• イースト株式会社勤務• EPUB普及を公私に渡ってお手伝い。   • JEPA「Minimal Requirements on EPUB     for Japanese Text Layout」  ...
今日お話しすること• EPUB 3では新たに様々な日本語テ  キストの表現が可能となった。• では、どんな表現ができるの?  どんな表現が苦手なの?• 仕様とビューワの対応状況から見  てゆきましょう。
前提知識:仕様編•    コンテンツのレイアウトはCSSで指     定するのが基本。•    EPUB 3の仕様では(ビューワが対応     すべき)CSSのプロパティや制約が                               CS...
前提知識:ビューワ編•   ビューワが採用する描画エンジンの主要なものに、WebKit    と RMSDK(Adobe Reader Mobile SDK) がある。•   WebKit    •   Appleが中心となって進めるオープンソ...
チェック内容•   出版社が重視する日本語組版表現は電書協「EPUB3.0    日本語組版要望表」によくまとまっています。•   …が、時間的な制約により、項目は 超基本的なもの    にとどめます。•   HTMLとCSSに関する項目にとど...
(単純な)縦書き•   CSS Writing Mode Level 3のwriting-modeプロ    パティを利用する。•   horizontal-tb: 横書き•   vertical-rl: 行が右から左に送られる縦書き。    ...
• いずれのエンジ  ンでも縦書きで 文章を表示でき る。• 縦書き固有のグ  リフにも対応し ている。            WebKit   RMSDK
テキストの縦横混在• 一つのページの中で縦書きと横書きの  テキストが混在するケース。• 縦書きの書籍でも表やキャプションな  どは横書きの場合がある。• 幾つかのブロックにそれぞれ異なる  writing-modeを指定して検証。      ...
WebKit                       RMSDK•   WebKitでは全てのwriting-modeをサポート。ただしページ表現するビューワ    ではリフローの結果レイアウトが破綻する可能性もある。•   RMSDKでは...
writing-mode                                                          WebKit NB          Adobe Digital Editions           ...
縦中横•   CSS Writing Mode Level 3にあったtext-    combineプロパティを利用して表現する。•   このプロパティは現在のCSSの草稿にはも    はや存在せず、text-combine-horizont...
•   エンジンによって文字の    収め方、行内に収まらな    い場合の挙動が異なる。•   WebKitは小さいグリフ    を用い、収まらない場合    は縦中横を解除。    RMSDKはグリフは変化    せず、収まらない場合は  ...
text-combine*                                                                 WebKit NB         Adobe Digital Editions    ...
縦書きの文字の向き• 正立、横倒し(時計回り90度回転)な  ど文字の向きを指定するには、CSS Writing Mode Level 3のtext-orientationプ ロパティを利用する。• 最新のCSSの草稿とEPUBが参照する草  ...
•   基本的に正立と横倒しの使い    分けができれば十分。•   WebKitはvertical-rightとupright    をサポート•   正立させたからといって行の    中心に文字が来るとは限らな    い。         ...
text-orientation                                                                  WebKit NB            Adobe Digital Editi...
ルビ• HTML5の標準のタグに含まれている。• モノルビ、グループルビ、(モノルビを  ベースにした)熟語ルビを記述でき る。• 両側ルビは記述できない。      WebKit NB    Adobe Digital Editions   ...
WebKit                                    RMSDK•   RMSDKでは先頭のrt要素のルビ文字しか表示されない。    すべての親文字をrb要素で囲めば全てのルビ文字を表示できるが、    rb要素...
圏点• CSS Text Level 3のtext-emphasis系プロパ  ティを使って指定する。• キーワードを組み合わせて10種類+αの  圏点の形状を指定する。          WebKit NB    Adobe Digital ...
• WebKitは仕様に忠実な  実装。• RMSDKは ユーザ指定の圏点が利 用できない。 塗りのみを指定した構 文をサポートしていな い。 短縮構文をサポートし ていない。 色を指定できない。 表示する側を指定でき る といったの特徴がある...
text-emphasis*                                                                    WebKit NB                Adobe Digital E...
text-emphasis*                                                                       WebKit NB               Adobe Digital...
ひとまずまとめ•   紙面のデザインでできることに比べるとかな    り物足りないかもしれませんが、シンプルな    出版物は十分に表現可能です。    むしろシンプルに作るのがコツ。•   各分野の関係者の尽力により、EPUBの日本語    ...
超おまけ• 時間上の制約により、ここから先の内  容はお話しない予定の資料です。
禁則ルール•   WebKit、RMSDKともに禁則処理がなされ    る。•   細かい禁則ルールはCSS Text Level 3のline-    breakプロパティで指定する。•   WebKit、RMSDKともに緩い禁則(loose...
line-break                                                WebKit NB         Adobe Digital Editions             CSS3 Text  ...
句読点ぶら下げ•   行頭に句読点が来た時、その句読点を前の行    の基本版面の外にぶら下げることがある。•   CSS Text Level 3ではこれを実現するhanging-    punctuationプロパティがある。•   …が、...
hanging-punctuation                                                     WebKit NB    Adobe Digital Editions               ...
均等割り•   字間を均等に空け,文字列の両端を行頭及び行末    に える方法。•   CSS Text Level 3ではこれを実現するtext-align-lastプ    ロパティがある。•   WebKit、RMSDKともに実装されて...
text-align-last                                                     WebKit NB    Adobe Digital Editions             CSS3 T...
文字の変換•   EPUBではCSS Text Level 3のtext-transformプロ    パティによって次の変換ができるとしてい    る。•   -epub-fullwidth 半角文字→全角文字•   -epub-fullsi...
text-transform                                                       WebKit NB       Adobe Digital Editions               ...
ルビのスタイリング• CSS 3 Ruby Moduleではルビ文字の上付  き、中付き、下付きや前後の文字への ルビかけルールなどを指定できるが、 EPUB 3 CSS Profileには含まれていない。• RMSDKでは“-adobe-”接頭...
CSS3 Ruby Module            CSS3 Ruby                                WebKit NB    Adobe Digital Editions                  ...
段組み•   段組みはCSS Multi-column Layout Moduleで指定す    る。•   WebKit自体は幾つかのプロパティをサポートしてい    るが、ページ表示するビューワに組み込んでリフ    ローと共存させるのは極...
CSS Multi-column Layout Module                                                       WebKit NB          Adobe Digital Edit...
CSS Multi-column Layout Module                                                WebKit NB    Adobe Digital Editions         ...
CSS Multi-column Layout Module                                                    WebKit NB         Adobe Digital Editions...
ご清聴ありがとうございました。
EPUBの日本語レイアウト できること/苦手なこと
Upcoming SlideShare
Loading in …5
×

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

9,545 views

Published on

INDD 2012 Tokyo B-2 EPUBの概要・事例 発表資料

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

  1. 1. EPUBの日本語レイアウト できること/苦手なこと 高瀬 拓史(イースト株式会社) takase@est.co.jp INDD 2012 【B2】EPUB概要 事例 20 July 2012
  2. 2. 自己紹介• 高瀬 拓史(たかせ ひろし)• イースト株式会社勤務• EPUB普及を公私に渡ってお手伝い。 • JEPA「Minimal Requirements on EPUB for Japanese Text Layout」 • 電子出版環境整備事業「EPUB日本 語拡張仕様策定」• a.k.a. ろす/@lost_and_found
  3. 3. 今日お話しすること• EPUB 3では新たに様々な日本語テ キストの表現が可能となった。• では、どんな表現ができるの? どんな表現が苦手なの?• 仕様とビューワの対応状況から見 てゆきましょう。
  4. 4. 前提知識:仕様編• コンテンツのレイアウトはCSSで指 定するのが基本。• EPUB 3の仕様では(ビューワが対応 すべき)CSSのプロパティや制約が CSS3 定義されている。 CSS2.1 → EPUB 3 CSS Profile• CSS2.1 + CSS3の一部で構成される。 EPUB 3 CSS Profile• 策定途上にある不安定なプロパティ や値には、“-epub-”の接頭辞を付け た利用が推奨される。 例: html{-epub-writing-mode:vertical-rl;}
  5. 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. 6. チェック内容• 出版社が重視する日本語組版表現は電書協「EPUB3.0 日本語組版要望表」によくまとまっています。• …が、時間的な制約により、項目は 超基本的なもの にとどめます。• HTMLとCSSに関する項目にとどめます。• 対象はWebKit(r122778)for Mac OS XとAdobe Digital Editions 1.8 Preview4 for Mac OS Xだけです。• 私の独断と偏見で以下の判定します。飽くまで現時 点のものです。 使える 注意が必要 厳しい
  7. 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. 8. • いずれのエンジ ンでも縦書きで 文章を表示でき る。• 縦書き固有のグ リフにも対応し ている。 WebKit RMSDK
  9. 9. テキストの縦横混在• 一つのページの中で縦書きと横書きの テキストが混在するケース。• 縦書きの書籍でも表やキャプションな どは横書きの場合がある。• 幾つかのブロックにそれぞれ異なる writing-modeを指定して検証。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 注意が必要 厳しい
  10. 10. WebKit RMSDK• WebKitでは全てのwriting-modeをサポート。ただしページ表現するビューワ ではリフローの結果レイアウトが破綻する可能性もある。• RMSDKではwiriting-modeを指定できるのがhtml要素のみであるため、混在 は不可能。• RMSDKを前提とした場合、ページ内での縦横の混在は断念せざるをえな い。
  11. 11. writing-mode WebKit NB Adobe Digital Editions CSS3 Writing Mode EPUB 3 CSS Profile 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. 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. 13. • エンジンによって文字の 収め方、行内に収まらな い場合の挙動が異なる。• WebKitは小さいグリフ を用い、収まらない場合 は縦中横を解除。 RMSDKはグリフは変化 せず、収まらない場合は 隣接する行に重なる。• 行高(line-height)は十 分に確保すること。• 3桁以上の縦中横は利用 する必然性を吟味し、代 替表現も検討すること。 WebKit RMSDK
  14. 14. text-combine* WebKit NB Adobe Digital Editions CSS3 Writing Mode EPUB 3 CSS Profile 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. 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. 16. • 基本的に正立と横倒しの使い 分けができれば十分。• WebKitはvertical-rightとupright をサポート• 正立させたからといって行の 中心に文字が来るとは限らな い。 WebKit• RMSDKはこのプロパティをサ ポートしていないため、半角/ 全角の使い分けや縦中横で代 用する他ないだろう。• RMSDKの文字化けした記号類 はWindows版では表示された。 利用するフォントの違い。 RMSDK
  17. 17. text-orientation WebKit NB Adobe Digital Editions CSS3 Writing Mode EPUB 3 CSS Profile 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. 18. ルビ• HTML5の標準のタグに含まれている。• モノルビ、グループルビ、(モノルビを ベースにした)熟語ルビを記述でき る。• 両側ルビは記述できない。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 使える 注意が必要
  19. 19. WebKit RMSDK• RMSDKでは先頭のrt要素のルビ文字しか表示されない。 すべての親文字をrb要素で囲めば全てのルビ文字を表示できるが、 rb要素はHTML5に含まれていないため、正しいHTML5にならない。 <ruby><rb>鬼</rb><rt>き</rt><rb>門</rb><rt>もん</rt></ruby>• 行高が十分に確保されない場合、WebKitでは行を後ろずらしてルビ 文字を収める。RMSDKでは隣接する行にルビ文字が重なる。
  20. 20. 圏点• CSS Text Level 3のtext-emphasis系プロパ ティを使って指定する。• キーワードを組み合わせて10種類+αの 圏点の形状を指定する。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 使える 使える
  21. 21. • WebKitは仕様に忠実な 実装。• RMSDKは ユーザ指定の圏点が利 用できない。 塗りのみを指定した構 文をサポートしていな い。 短縮構文をサポートし ていない。 色を指定できない。 表示する側を指定でき る といったの特徴がある が、実用できるレベル には達している。 WebKit RMSDK
  22. 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. 23. 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-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. 24. ひとまずまとめ• 紙面のデザインでできることに比べるとかな り物足りないかもしれませんが、シンプルな 出版物は十分に表現可能です。 むしろシンプルに作るのがコツ。• 各分野の関係者の尽力により、EPUBの日本語 表現は年々確実に良いものとなっています。• 特にWebKitに更なる改良を加えたACCESS社 のReadiumや Book Reader EPUB Editionへの取 り組みは注目です。• EPUBが一過性のブームではなく、より良い日 本語表現の場として育ってゆくよう、これか らも見守ってください。
  25. 25. 超おまけ• 時間上の制約により、ここから先の内 容はお話しない予定の資料です。
  26. 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. 27. line-break WebKit NB Adobe Digital Editions CSS3 Text EPUB 3 CSS Profile 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. 28. 句読点ぶら下げ• 行頭に句読点が来た時、その句読点を前の行 の基本版面の外にぶら下げることがある。• CSS Text Level 3ではこれを実現するhanging- punctuationプロパティがある。• …が、EPUB 3 CSS Profileには含まれていない。• WebKit、RMSDKともに実装されていない。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 厳しい 厳しい
  29. 29. hanging-punctuation WebKit NB Adobe Digital Editions CSS3 Text EPUB 3 CSS Profile r122778 1.8 prev4 20120119WD (=20110412WD) (Mac OS X) (Mac OS X)property hanging-punctuation ― ― ― none ― ― ― first ― ― ― value last ― ― ― force-end ― ― ― allow-end ― ― ―
  30. 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. 31. text-align-last WebKit NB Adobe Digital Editions CSS3 Text EPUB 3 CSS Profile 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. 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. 33. text-transform WebKit NB Adobe Digital Editions CSS3 Text EPUB 3 CSS Profile 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. 34. ルビのスタイリング• CSS 3 Ruby Moduleではルビ文字の上付 き、中付き、下付きや前後の文字への ルビかけルールなどを指定できるが、 EPUB 3 CSS Profileには含まれていない。• RMSDKでは“-adobe-”接頭辞付きのプロ パティで先行実装している。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 厳しい 使える
  35. 35. CSS3 Ruby Module CSS3 Ruby WebKit NB Adobe Digital Editions EPUB 3 CSS Profile 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. 36. 段組み• 段組みはCSS Multi-column Layout Moduleで指定す る。• WebKit自体は幾つかのプロパティをサポートしてい るが、ページ表示するビューワに組み込んでリフ ローと共存させるのは極めて難しい。• RMSDKはプロパティをサポートしておらず、 制作 者が指定することはできないものの、ウィンドウ幅 や文字サイズによって自動的に段組表示を行う。 WebKit NB Adobe Digital Editions r122778 1.8 prev4 (Mac OS X) (Mac OS X) 厳しい 厳しい
  37. 37. 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 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. 38. 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-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. 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. 40. ご清聴ありがとうございました。

×