AozoraEpub3で「電書協 EPUB 3 制作ガイド 表示確認用サンプルファイル」と同じ表示になるようにやってきましたが。出力される内容もほぼおなじになるように色々調整していく。ただ、あまりいじりすぎると影響範囲がわからなくなるので、程々に抑えようと思う。
#c001 ボックスモデル簡易確認
#c002 右開き（右綴じ）書籍中での横組みページ確認
これはめんどくさそうだったのでやめとこうかなと思っている。
横組は、 class="hltr"と指定すればできる。ただし、書き換えるのをどうするかは決めていない。
画像の表示
#001 ページフィット（改ページせず挿入）
<p><img class="fit" src="../image/img-w1536xh2048.jpg" alt=""/></p>
画像の表示でclassでfitを指定する。これを画像注記で出力する場合に標準にした。
というのも以前までは、画像サイズが画面より大きい場合にはみ出したり折り返して表示されることがあった。
fitクラスを指定すると、画面より大きい場合には、縮小して表示する。画面より小さい場合はそのままのサイズで表示する。
これをsvgラッピングにするかを悩んだ。例えば、1ページそのまま画像として表示したい場合に、縮小されて表示されるのはどうも不自然に感じる。
ただ小さい画像を無理やり引き延ばせば見た目が汚くなるという懸念もある。
青空文庫ではキャプションというのがあって、画像の下に説明を表示する注記がある。そのために、画像を全画面で表示したくない場合もある。ただ、そういう指定をするスタイルシートがどのリーダーにも対応しているわけではないので使わないほうが良いのかも。
AozoraEpub3では画像が大きい場合に1ページ画像にするために改ページをすることがある。改ページ注記で挟むやり方もある。
#001 ページフィット
#001-f 改ページして行頭寄せ
標準で、天付きだから注記としてなくても良いのかなと思っていたが、改めて見るとなんとなく不自然な気もしてきた。<body class="p-image">は単ページ画像化したものに、入れるものらしいが。スタイルシートは中央寄せになっていた。
body.p-image {
margin: 0;
padding: 0;
text-align: center;
}
<body class="p-image">
<div class="main align-start">
<p><img class="fit" src="../image/img-w1200xh400.jpg" alt=""/></p>
</div>
</body>
/* 行頭揃え */
.align-left,
.align-start {
text-align: left;
-webkit-text-align-last: left;
-epub-text-align-last: left;
}
#001 ページフィット
#001-g 改ページして行末寄せ
/* 地付き */
<div class="btm">
</div>
div.btm, div.btm p { text-align: right; }
［＃ここから地付き］
［＃sample（sample.jpg）入る］
［＃ここで地付き終わり］
地付きのクラス指定をalign-rightにしたほうが良いかもしれない。
<body class="p-image">
<div class="main align-end">
<p><img class="fit" src="../image/img-w1200xh400.jpg" alt=""/></p>
</div>
</body>
/* 行末揃え */
.align-right,
.align-end {
text-align: right;
-webkit-text-align-last: auto;
-epub-text-align-last: auto;
}
