Embed Size (px)
DESCRIPTION
INDD 2012 Tokyo B-2 EPUBの概要・事例 発表資料
Citation preview
自己紹介• 高瀬 拓史（たかせ ひろし）• イースト株式会社勤務• EPUB普及を公私に渡ってお手伝い。• JEPA「Minimal Requirements on EPUB
for Japanese Text Layout」• 電子出版環境整備事業「EPUB日本語拡張仕様策定」
• a.k.a. ろす／@lost_and_found
今日お話しすること
• EPUB 3では新たに様々な日本語テキストの表現が可能となった。• では、どんな表現ができるの？ どんな表現が苦手なの？• 仕様とビューワの対応状況から見てゆきましょう。
前提知識：仕様編• コンテンツのレイアウトはCSSで指定するのが基本。
• EPUB 3の仕様では（ビューワが対応すべき）CSSのプロパティや制約が定義されている。→ EPUB 3 CSS Profile
• CSS2.1 + CSS3の一部で構成される。
• 策定途上にある不安定なプロパティや値には、“-epub-”の接頭辞を付けた利用が推奨される。例: html{-epub-writing-mode:vertical-rl;}
CSS2.1
CSS3
EPUB 3 CSS Profile
前提知識：ビューワ編• ビューワが採用する描画エンジンの主要なものに、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の両方を搭載したビューワもある。
チェック内容• 出版社が重視する日本語組版表現は電書協「EPUB3.0日本語組版要望表」によくまとまっています。
• …が、時間的な制約により、項目は 超基本的なものにとどめます。
• HTMLとCSSに関する項目にとどめます。
• 対象はWebKit（r122778）for Mac OS XとAdobe Digital Editions 1.8 Preview4 for Mac OS Xだけです。
• 私の独断と偏見で以下の判定します。飽くまで現時点のものです。
使える 注意が必要 厳しい
（単純な）縦書き• CSS Writing Mode Level 3のwriting-modeプロパティを利用する。
• horizontal-tb: 横書き• vertical-rl: 行が右から左に送られる縦書き。＝日本語の縦書き
• vertical-lr: 行が左から右に送られる縦書き。WebKit NB
r122778 (Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
使える 使える
• いずれのエンジンでも縦書きで文章を表示できる。• 縦書き固有のグリフにも対応している。
WebKit RMSDK
テキストの縦横混在• 一つのページの中で縦書きと横書きのテキストが混在するケース。• 縦書きの書籍でも表やキャプションなどは横書きの場合がある。• 幾つかのブロックにそれぞれ異なる
writing-modeを指定して検証。WebKit NB
r122778 (Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
注意が必要 厳しい
WebKit RMSDKWebKit
• WebKitでは全てのwriting-modeをサポート。ただしページ表現するビューワではリフローの結果レイアウトが破綻する可能性もある。
• RMSDKではwiriting-modeを指定できるのがhtml要素のみであるため、混在は不可能。
• RMSDKを前提とした場合、ページ内での縦横の混在は断念せざるをえない。
writing-modeCSS3 Writing Mode
20120301WDEPUB 3 CSS Profile(=20110428WD)
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
property writing-mode -epub-writing-mode-webkit-writing-mode-epub-writing-mode ※-epub-writing-mode
value
horizontal-tb horizontal-tb horizontal-tb ※horizontal-tb
value vertical-rl vertical-rl vertical-rl ※vertical-rlvalue
vertical-lr vertical-lr vertical-lr ―
• ※html要素にのみ指定可能。
縦中横• CSS Writing Mode Level 3にあったtext-
combineプロパティを利用して表現する。• このプロパティは現在のCSSの草稿にはもはや存在せず、text-combine-horizontalとtext-combine-modeに置き換わっている。
• まだ安定していないプロパティと言える。WebKit NB
r122778 (Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
注意が必要 注意が必要
• エンジンによって文字の収め方、行内に収まらない場合の挙動が異なる。
• WebKitは小さいグリフを用い、収まらない場合は縦中横を解除。RMSDKはグリフは変化せず、収まらない場合は隣接する行に重なる。
• 行高（line-height）は十分に確保すること。
• 3桁以上の縦中横は利用する必然性を吟味し、代替表現も検討すること。
WebKit RMSDK
text-combine*CSS3 Writing Mode
20120301WDEPUB 3 CSS Profile(=20110428WD)
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
property text-combine-horizontal -epub-text-combine -webkit-text-combine-epub-text-combine
-epub-text-combine
value
none none none none
value
all ― ― ―
value
numeric ― ― ―
valuedigits ― ― ―
valuealpha ― ― ―
value
latin ― ― ―
value
alphanumeric ― ― ―
value
― horizontal <number>? horizontal horizontal
property text-combine-mode ― ― ―
value
auto ― ― ―
valuecompress ― ― ―
valueno-compress ― ― ―
value
use-glyphs ― ― ―
縦書きの文字の向き• 正立、横倒し（時計回り90度回転）など文字の向きを指定するには、CSS Writing Mode Level 3のtext-orientationプロパティを利用する。• 最新のCSSの草稿とEPUBが参照する草稿では値が異なっている。
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
注意が必要 厳しい
WebKit
RMSDK
• 基本的に正立と横倒しの使い分けができれば十分。
• WebKitはvertical-rightとuprightをサポート
• 正立させたからといって行の中心に文字が来るとは限らない。
• RMSDKはこのプロパティをサポートしていないため、半角／全角の使い分けや縦中横で代用する他ないだろう。
• RMSDKの文字化けした記号類はWindows版では表示された。利用するフォントの違い。
text-orientationCSS3 Writing Mode
20120301WDEPUB 3 CSS Profile(=20110428WD)
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
property text-orientation -epub-text-orientation -webkit-text-orientation-epub-text-orientation ―
value
mixed-right vertical-right vertical-right ―
value
upright upright upright ―
value
sideways-right rotate-right ― ―value
sideways-left rotate-left ― ―value
sideways rotate-normal ― ―
value
use-glyph-orientation auto ― ―
ルビ• HTML5の標準のタグに含まれている。• モノルビ、グループルビ、（モノルビをベースにした）熟語ルビを記述できる。• 両側ルビは記述できない。
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
使える 注意が必要
• RMSDKでは先頭のrt要素のルビ文字しか表示されない。すべての親文字をrb要素で囲めば全てのルビ文字を表示できるが、rb要素はHTML5に含まれていないため、正しいHTML5にならない。<ruby><rb>鬼</rb><rt>き</rt><rb>門</rb><rt>もん</rt></ruby>
• 行高が十分に確保されない場合、WebKitでは行を後ろずらしてルビ文字を収める。RMSDKでは隣接する行にルビ文字が重なる。
WebKit RMSDK
圏点
• CSS Text Level 3のtext-emphasis系プロパティを使って指定する。• キーワードを組み合わせて10種類＋αの圏点の形状を指定する。
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
使える 使える
WebKit RMSDK
• WebKitは仕様に忠実な実装。
• RMSDKはユーザ指定の圏点が利用できない。塗りのみを指定した構文をサポートしていない。短縮構文をサポートしていない。色を指定できない。表示する側を指定できるといったの特徴があるが、実用できるレベルには達している。
text-emphasis*CSS3 Text
20120119WDEPUB 3 CSS Profile(=20110412WD)
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
property text-emphasis-style -epub-text-emphasis-style -webkit-text-emphasis-style-epub-text-emphasis-style -epub-text-emphasis-style
value
none none none none
value
filled filled filled filled
value
open open open open
value
dot dot dot dot
value circle circle circle circlevalue
double-circle double-circle double-circle double-circle
value
triangle triangle triangle triangle
value
sesame sesame sesame sesame
value
<string> <string> <string> ―
text-emphasis*CSS3 Text
20120119WDEPUB 3 CSS Profile(=20110412WD)
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
property text-emphasis-color -epub-text-emphasis-color -webkit-text-emphasis-color-epub-text-emphasis-color ―
value <color> <color> <color> ―
property text-emphasis-position ― ― -adobe-text-emphasis-position
value
above ― ― above
valuebelow ― ― below
valueright ― ― right
value
left ― ― left
property text-emphasis -epub-text-emphasis -webkit-text-emphasis-epub-text-emphasis ―
ひとまずまとめ• 紙面のデザインでできることに比べるとかなり物足りないかもしれませんが、シンプルな出版物は十分に表現可能です。むしろシンプルに作るのがコツ。
• 各分野の関係者の尽力により、EPUBの日本語表現は年々確実に良いものとなっています。
• 特にWebKitに更なる改良を加えたACCESS社のReadiumや Book Reader EPUB Editionへの取り組みは注目です。
• EPUBが一過性のブームではなく、より良い日本語表現の場として育ってゆくよう、これからも見守ってください。
超おまけ• 時間上の制約により、ここから先の内容はお話しない予定の資料です。
禁則ルール• WebKit、RMSDKともに禁則処理がなされる。
• 細かい禁則ルールはCSS Text Level 3のline-breakプロパティで指定する。
• WebKit、RMSDKともに緩い禁則（loose）には対応していない。
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
注意が必要 注意が必要
line-breakCSS3 Text
20120119WDEPUB 3 CSS Profile(=20110412WD)
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
property line-break -epub-line-break-webkit-line-break-epub-line-break -epub-line-break
value
auto auto ― auto
value
loose loose ― ―
value normal normal normal normalvalue
strict strict ― strict
value
― ― after-white-space ―
句読点ぶら下げ• 行頭に句読点が来た時、その句読点を前の行の基本版面の外にぶら下げることがある。
• CSS Text Level 3ではこれを実現するhanging-punctuationプロパティがある。
• …が、EPUB 3 CSS Profileには含まれていない。• WebKit、RMSDKともに実装されていない。
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
厳しい 厳しい
hanging-punctuationCSS3 Text
20120119WDEPUB 3 CSS Profile(=20110412WD)
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
property hanging-punctuation ― ― ―
value
none ― ― ―
value
first ― ― ―
value last ― ― ―value
force-end ― ― ―
value
allow-end ― ― ―
均等割り• 字間を均等に空け，文字列の両端を行頭及び行末に揃える方法。
• CSS Text Level 3ではこれを実現するtext-align-lastプロパティがある。
• WebKit、RMSDKともに実装されていない。• ブラウザではInternet ExplorerやFireFoxが実装している。
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
厳しい 厳しい
text-align-lastCSS3 Text
20120119WDEPUB 3 CSS Profile(=20110412WD)
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
property text-align-last -epub-text-align-last ― ―
value
auto auto ― ―
value
start start ― ―
value
end end ― ―
value left left ― ―value
right right ― ―
value
center center ― ―
value
justify justify ― ―
文字の変換• EPUBではCSS Text Level 3のtext-transformプロパティによって次の変換ができるとしている。
• -epub-fullwidth 半角文字→全角文字• -epub-fullsize-kana 小書きの仮名→通常の仮名• …が、これらの値はWebKit、RMSDKともに実装していない。
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
厳しい 厳しい
text-transformCSS3 Text
20120119WDEPUB 3 CSS Profile(=20110412WD)
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
property text-transform text-transform text-transform text-transform
value
full-width -epub-fullwidth ― ―
value
※full-size-kana -epub-fullsize-kana ― ―
• ※full-size-kanaはCSS Text Level 3の範囲から落とされLevel 4に持ち越しの方向。
ルビのスタイリング• CSS 3 Ruby Moduleではルビ文字の上付き、中付き、下付きや前後の文字へのルビかけルールなどを指定できるが、EPUB 3 CSS Profileには含まれていない。
• RMSDKでは“-adobe-”接頭辞付きのプロパティで先行実装している。
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
厳しい 使える
CSS3 Ruby ModuleCSS3 Ruby
20110630WDEPUB 3 CSS Profile
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)property ruby-position -epub-ruby-position ― -epub-ruby-position
value
before over ― over
valueafter under ― under
valueinter-character inter-character ― ―
value
inline ― ― ―property ruby-align ― ― -adobe-ruby-align
value
auto ― ― auto
value
start ― ― start
value
left ― ― left
value
center ― ― center
value end ― ― endvalue
right ― ― right
value
distribute-letter ― ― distribute-letter
value
distribute-space ― ― distribute-space
value
line-edge ― ― line-edge
property ruby-overhang ― ― -adobe-ruby-overhang
value
auto ― ― auto
valuestart ― ― ―
valueend ― ― ―
value
none ― ― none
段組み• 段組みはCSS Multi-column Layout Moduleで指定する。
• WebKit自体は幾つかのプロパティをサポートしているが、ページ表示するビューワに組み込んでリフローと共存させるのは極めて難しい。
• RMSDKはプロパティをサポートしておらず、 制作者が指定することはできないものの、ウィンドウ幅や文字サイズによって自動的に段組表示を行う。
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
厳しい 厳しい
CSS Multi-column Layout ModuleCSS3 Multicol20110630CR EPUB 3 CSS Profile
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
property column-width column-width -webkit-column-width ―
value<length> <length> <length> ―
valueauto auto auto ―
property column-count column-count -webkit-column-count ―
value<integer> <integer> <integer> ―
valueauto auto auto ―
property columns columns columns ―
property column-gap column-gap -webkit-column-gap ―
value<length> <length> <length> ―
valuenormal 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 ―
CSS3 Multicol20110630CR EPUB 3 CSS Profile
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
property break-before break-before ― ―
value
auto auto ― ―
value
always always ― ―
value
avoid avoid ― ―
value
left left ― ―value right right ― ―value
page page ― ―value
column column ― ―
value
avoid-page avoid-page ― ―
value
avoid-column avoid-column ― ―property break-after break-after ― ―
value
auto auto ― ―
value
always always ― ―
value
avoid avoid ― ―
value
left left ― ―value right right ― ―value
page page ― ―value
column column ― ―
value
avoid-page avoid-page ― ―
value
avoid-column avoid-column ― ―
CSS Multi-column Layout Module
CSS Multi-column Layout Module
CSS3 Multicol20110630CR EPUB 3 CSS Profile
WebKit NBr122778
(Mac OS X)
Adobe Digital Editions1.8 prev4
(Mac OS X)
property break-inside break-inside ― ―
value
auto auto ― ―
valueavoid avoid ― ―
valueavoid-page avoid-page ― ―
value
avoid-column avoid-column ― ―
property column-span ― -webkit-column-span ―
valuenone ― ― ―
valueall ― all ―
property column-fill column-fill ― ―
valueauto auto ― ―
valuebalance balance ― ―
ご清聴ありがとうございました。
