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 Profile
• CSS2.1 + CSS3の一部で構成される。 EPUB 3 CSS Profile
• 策定途上にある不安定なプロパティ
や値には、“-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 Profile
r122778 1.8 prev4
20120301WD (=20110428WD)
(Mac OS X) (Mac OS X)
-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要素にのみ指定可能。

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 Profile
r122778 1.8 prev4
20120301WD (=20110428WD)
(Mac OS X) (Mac OS X)
-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 ― ― ―

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 Profile
r122778 1.8 prev4
20120301WD (=20110428WD)
(Mac OS X) (Mac OS X)
-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 ― ―

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

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-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

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 Profile
r122778 1.8 prev4
20120119WD (=20110412WD)
(Mac OS X) (Mac OS X)
-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 ―

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.
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.
均等割り
• 字間を均等に空け，文字列の両端を行頭及び行末
に える方法。
• 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 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.
文字の変換
• 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 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.
ルビのスタイリング
• 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.
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-edge
property 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 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.
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.
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.
ご清聴ありがとうございました。