楽天koboコンテンツ制作ガイド
1. EPUB2とEPUB3の違い 2. OPFにおける注意点
3. 目次の作り方
組版表現Tips（1/8）
• 縦書時の左右中央配置（扉表現）の実現方法
•
横書<html>に縦書<div>ブロックを挿入する
<html style=“-epub-writing-mode: horizontal-tb;”><body>
<div style=“margin-left: auto; margin-right: auto;
-epub-writing-mode: vertical-rl; height: 100%;”>
<p style=“text-align: left;”>Title</p>
</div>
</body></html>
※ 横書<html>は横書<body>でもOK
•
文章量が多い場合は正しく表示されない場合があります
• 電書協ガイドの非推奨方法（横書<html>に縦書<body>）は Koboビューワーでは正しく表示されない場合があります
【参考】縦横ブロックの組み合わせ
横書<html>
縦 書
<div>
テ キ ス ト
margin-left: auto margin-right: auto
文字 進行方向
組版表現Tips（2/8）
• 改ページ可能な扉表現（非推奨）
•
縦書<div>と横書<div>ブロックに「dir」属性を指定する
<html style=“-epub-writing-mode: vertical-rl;”><body>
<div style=“-epub-writing-mode: horizontal-tb;” dir=“rtl”>
<div style=“margin-left: auto; margin-right: auto;
-epub-writing-mode: vertical-rl; height: 100%;” dir=“ltr”>
<p style=“text-align: left;”>Title</p>
</div>
</div>
</body></html>
•
2ページ以内に収まる場合はうまく表示される場合があります
• 現在のKoboビューワーでは、この方法はおススメしません
【参考】縦横ブロックの組み合わせ（改）
margin-left: auto margin-right: auto
<vid>書横
文字 進行方向
dir=“rtl”
縦書
<div>
テ キ ス ト
dir=“ltr”
縦 書
<html>
組版表現Tips（3/8）
• 縦中横の実現方法 その1
•
部分的に横書モードにする
<span style="-epub-writing-mode: horizontal-tb”>12</span>
• 縦中横の領域だけ「line-height: 1em;」などのように 行間を調整しないと上下に不自然な空白が生まれます
• 縦中横の実現方法 その2
•
「text-combine」を使用する
<span style="-epub-text-combine: horizontal;">12</span>
•
電書協ガイドではこちらが推奨されている
組版表現Tips（4/8）
• 縦書時の傍線の引き方
•
border-right
<span style="border-right: 1px solid #000000”>text</span>
•
overline
<span style="text-decoration:overline">text</span>
• 楽天koboでは「border-right」をおススメします
• 「overline」の場合、ルビや縦中横が含まれる場合に、
Koboビューワーでは正しく表示されない場合があります
• 「border-right」の場合、外字画像にも傍線が付与できます
• ただし、電書協ガイドでは「overline」が推奨されています
【参考】 傍線の引き方による違い
border-right overline
組版表現Tips（5/8）
• ルビの種類
•
モノルビ
<ruby>京<rt>きょう</rt></ruby><ruby>都<rt>と</rt></ruby>
•
グループルビ
<ruby>京都<rt>きょうと</rt></ruby>
•
熟語ルビ
<ruby>京<rt>きょう</rt>都<rt>と</rt></ruby>
• ルビ使用時の注意点
• 現在のKoboビューワーでは、熟語ルビはモノルビと同様に 泣き別れますが、EPUB3目次では使用しないで下さい
•
長過ぎるルビは見切れることがあるので適度に分割して下さい
組版表現Tips（6/8）
• 泣き別れが禁止される挙動
•
禁則文字が連続した場合
〕〉》」』】
•
グループルビが付与された文字列
<ruby>京都<rt>きょうと</rt></ruby>
•
「inline-block」要素で囲まれた文字列
<span style=“display: inline-block;”>京都</span>
•
タグで囲まれた全角文字の集合
<span>あ</span><span>い</span><span>う</span>
<span>え</span><span>お</span>
※ 期待する表示にならない場合があるので注意
組版表現Tips（7/8）
• 外字に圏点を付与したい場合
•
圏点をルビとして指定する
<ruby><img src=“gaiji.png" class="gaiji” /><rt>●</rt></ruby>
•
外字を文字に変換する
※ JIS第一・第二水準外のために外字画像化された文字の場合、
UnicodeベースのEPUB3では文字に戻せる可能性があります
※ Koboビューワーでは「JIS X 0213:2004, Adobe-Japan1-6」
相当の日本語グリフが使用できます
• 圏点とルビの同時使用について
• 現在のKoboビューワーでは、ルビが優先されます
組版表現Tips（8/8）
• 縦書または横書を意識して制作をお願いします
•
EPUB3では縦書／横書の切り替えが標準化されていません
• 現在のKoboビューワーでは、ビューワー側でユーザが 縦書と横書を切り替えることができません
• 縦書用と横書用の2種類のCSSを用意することは出来ますが、
それらを切り替える仕様がまだ標準化されていません
• 作業負荷の軽減の意味でも一方に絞ることをおススメします
•
句読点などを除き、記号類の変換は自動では行われません
• 例えば、横書で使用されるダブルコーテーション「“”」は、
縦書では制作時に「〝〟」に変換することをおススメします
• 日付のような数字列は、縦書では縦中横の指定を行うか、
全角数字に変換して正立させることをおススメします