リフロー電子書籍での画像表示

2015/6/2 [14:18:58] (火)

kindleとibooksで指定のしかたや表示が違ってたのでメモ…ていうか今さら。

kindleでは意図通りの表示だったのに、ibooksだと画像のサイズ指定が効かなくてでろ〜んと大きな画像となってしまっていた。もちろんepubcheckではエラーなどない真っ当なepub3ファイルだ。

1ページに1枚の画像だけ、というのはkindleもibooksもほぼ問題はない。同じhtml、cssで意図通りの同じ表示となる。

ところが、本文中に画像が入るケースがよろしくない。
画像のサイズ指定が意図した通りに伝わらず、でろ〜んな画像となってしまった例。

iTunes connectのヘルプページにあるibooksの要件（iBooksAssetGuide5.1Revision2_JPN.pdf）にリフローでの画像の指定例が載っていて。

・画像のサイズは画像をくるんだ要素の方(ラッパー、コンテンナ)に指定する
・画像はwidth:100%

てことなので、これはもう随分前から

こんなhtmlとcssを使ってたんだけど…ところが、幅（width）の指定が効いてくれていないっぽい。

ということで、リフローで雑誌＝写真も多数入りこんでいて、クオリティに定評のある電子雑誌 『トルタル』 をダウンロードしてibooksで拝見したところ、綺麗にレイアウトされている。さすがです。
ダウンロードしたepubファイルを解凍して中身を確認したところ、このiTunes connectの要件PDFと書き方はほぼ同じ。

わたしのファイルと縦横が違うだけやなあ…というところで、もしやといじってみたらほぼ意図通りの画像サイズとなった。

なんのこたない。
横で幅（width）指定が効くんだから、縦は高さ（height）指定だろうと。CSS（image-wrap）に幅25%で指定していたところを高さ25%で指定しただけ。

ところが、同じファイルをkindle previewerに読みこませると、これ、高さ25%以上はあるよなあ…。


スタイルシートを個別に対応させると管理が大変なので（間違いの元なので）インラインでスタイルを書くか、と思ったらば、どうやらibooksはインラインのスタイルを見てくれない。致命的でもないので、kindleはこれでOKとする。


無料販売本に既刊案内ページをつけるのに、やっぱ表紙画像はあったほうがいいよなあ、ということでゴソゴソやっていて、kindleとibooksのリフローでの画像の違いに気づいた。

kindleはmobiに変換する時に「よきにはからって」幅指定でも大丈夫だったので気づかなかった。
実用書などは横書きばかりなので幅指定で問題なく意図通りとなっていた。
ibooksやkoboでもらう本文中の画像はむしろ小さいもの＝原寸表示ばかりだったので縦書きでも指定が効いてないことに気づかなかった。

今まで「たまたま」うまく行ってただけ、という事実に我ながらアキレタ。


[06/02 16:35:51]追記。
kindleはインラインのスタイルが生きるので、そっちで調整。

画像に関しては端末やアプリでの差分吸収が面倒くさいでござるなあ。

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

»電子書籍制作代行についてはこちら