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

EPUBの日本語レイアウト
できること／苦手なこと
高瀬拓史（イースト株式会社）
takase@est.co.jp

INDD 2012 【B2】EPUB概要事例
20 July 2012

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

今日お話しすること

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

前提知識：仕様編
• コンテンツのレイアウトは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;}

前提知識：ビューワ編
• ビューワが採用する描画エンジンの主要なものに、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 Adobe Digital Editions
r122778 1.8 prev4
(Mac OS X) (Mac OS X)

使える使える

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

WebKit RMSDK

テキストの縦横混在
• 一つのページの中で縦書きと横書きの
テキストが混在するケース。
• 縦書きの書籍でも表やキャプションな
どは横書きの場合がある。
• 幾つかのブロックにそれぞれ異なる
writing-modeを指定して検証。
r122778 1.8 prev4

注意が必要厳しい

WebKit RMSDK

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

writing-mode
CSS3 Writing Mode EPUB 3 CSS Proﬁle
r122778 1.8 prev4
20120301WD (=20110428WD)

-webkit-writing-mode
property 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要素にのみ指定可能。

縦中横
• CSS Writing Mode Level 3にあったtext-
combineプロパティを利用して表現する。
• このプロパティは現在のCSSの草稿にはも
はや存在せず、text-combine-horizontalと
text-combine-modeに置き換わっている。
• まだ安定していないプロパティと言える。
r122778 1.8 prev4

注意が必要注意が必要

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

WebKit RMSDK

text-combine*
r122778 1.8 prev4
20120301WD (=20110428WD)

-webkit-text-combine
property 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 horizontal
property text-combine-mode ― ― ―
auto ― ― ―
compress ― ― ―
value
no-compress ― ― ―
use-glyphs ― ― ―

縦書きの文字の向き
• 正立、横倒し（時計回り90度回転）な
ど文字の向きを指定するには、CSS
Writing Mode Level 3のtext-orientationプ
ロパティを利用する。
• 最新のCSSの草稿とEPUBが参照する草
稿では値が異なっている。

r122778 1.8 prev4

注意が必要厳しい

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

RMSDK

text-orientation
r122778 1.8 prev4
20120301WD (=20110428WD)

-webkit-text-orientation
property 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 ― ―

ルビ
• HTML5の標準のタグに含まれている。
• モノルビ、グループルビ、（モノルビを
ベースにした）熟語ルビを記述でき
る。
• 両側ルビは記述できない。
r122778 1.8 prev4

使える注意が必要

WebKit RMSDK
• RMSDKでは先頭のrt要素のルビ文字しか表示されない。
すべての親文字をrb要素で囲めば全てのルビ文字を表示できるが、
rb要素はHTML5に含まれていないため、正しいHTML5にならない。
<ruby><rb>鬼</rb><rt>き</rt><rb>門</rb><rt>もん</rt></ruby>

• 行高が十分に確保されない場合、WebKitでは行を後ろずらしてルビ
文字を収める。RMSDKでは隣接する行にルビ文字が重なる。

圏点

• CSS Text Level 3のtext-emphasis系プロパ
ティを使って指定する。
• キーワードを組み合わせて10種類＋αの
圏点の形状を指定する。

r122778 1.8 prev4

使える使える

• WebKitは仕様に忠実な
実装。

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

text-emphasis*
CSS3 Text EPUB 3 CSS Profile
r122778 1.8 prev4
20120119WD (=20110412WD)
-webkit-text-emphasis-style
property 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> ―

text-emphasis*
r122778 1.8 prev4
20120119WD (=20110412WD)
-webkit-text-emphasis-color
property 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-emphasis
property text-emphasis -epub-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）
には対応していない。

r122778 1.8 prev4

注意が必要注意が必要

line-break
r122778 1.8 prev4
20120119WD (=20110412WD)

-webkit-line-break
property 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 ―

句読点ぶら下げ
• 行頭に句読点が来た時、その句読点を前の行
の基本版面の外にぶら下げることがある。
• CSS Text Level 3ではこれを実現するhanging-
punctuationプロパティがある。
• …が、EPUB 3 CSS Proﬁleには含まれていない。
• WebKit、RMSDKともに実装されていない。

r122778 1.8 prev4

厳しい厳しい

hanging-punctuation
r122778 1.8 prev4
20120119WD (=20110412WD)

property hanging-punctuation ― ― ―

none ― ― ―

ﬁrst ― ― ―

value last ― ― ―

force-end ― ― ―

allow-end ― ― ―

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

r122778 1.8 prev4

厳しい厳しい

text-align-last
r122778 1.8 prev4
20120119WD (=20110412WD)

property text-align-last -epub-text-align-last ― ―

auto auto ― ―

start start ― ―

end end ― ―

value left left ― ―

right right ― ―

center center ― ―

justify justify ― ―

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

厳しい厳しい

text-transform
r122778 1.8 prev4
20120119WD (=20110412WD)

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に持ち越しの方向。

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

厳しい使える

CSS3 Ruby Module
CSS3 Ruby WebKit NB Adobe Digital Editions
EPUB 3 CSS Proﬁle r122778 1.8 prev4
20110630WD
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-edge
property ruby-overhang ― ― -adobe-ruby-overhang
auto ― ― auto
start ― ― ―
value
end ― ― ―
none ― ― none

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

厳しい厳しい

CSS Multi-column Layout Module
CSS3 Multicol
20110630CR
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 ―

CSS3 Multicol
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 ― ―


CSS3 Multicol
20110630CR

property break-inside break-inside ― ―

auto auto ― ―

avoid avoid ― ―
value


property column-span ― -webkit-column-span ―

none ― ― ―
value
all ― all ―

property column-ﬁll column-ﬁll ― ―

auto auto ― ―
value
balance balance ― ―

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

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

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)