I love software!

« PDF作成処理の並列処理を実現！！「Antenna House PDF Driver API V5」近日リリース予定 | メイン | 【第20回ソフトウェア開発環境展 出展情報】 »

2011年04月24日

EPUBで画像の大きさを指定する方法を調べた。

EPUB2.0で画面に表示される画像の大きさを指定する方法を調べてみた。
ちなみにEPUB2.0の仕様をみると

(1)XHTMLのimg要素を使うことができるが、属性としてwidthを使えるかどうかは明記されていない。XHTML1.1と同じであればimgにwidth属性を使えるはずである。
(2)使えるCSSのプロパティリストにはwidthがある。

１．次の4つのケースでデータを作成

ケース1 imgのwidth属性の値としてイメージの大きさを指定する
ケース2 imgの親のdivにwidth属性の値としてイメージの大きさを指定する
ケース3 imgにCSSでイメージの大きさを指定する
ケース4 imgの親のdivにCSSでイメージの大きさを指定する

２．表示結果

ケース１ Adobe Digital Editionsで期待通りの大きさになる。iBooksでは大きさ指定が無視される。
ケース2 Adobe Digital Editionsも、iBooksも共に大きさ指定が無視される。
ケース3 Adobe Digital Editionsで期待通りの大きさになる。iBooksでは大きさ指定が無視される。
ケース4 Adobe Digital Editionsでは大きさ指定が無視される。iBooksでは期待通りの大きさになる。

iBooksについては、次のブログでも類似の実験結果が紹介されている。
http://www.pigsgourdsandwikis.com/2010/05/controlling-image-size-in-ibooks-on.html

iBooksで画像の大きさを指定するには、imgに対してwidthを指定してもだめで、imgの親のdiv要素にCSSを使ってwidthを指定する必要があるということになる。Adobe Digital Editionsやブラウザ（下記の参考を参照）では、img自体のwidth属性やimgにCSSで指定したwidthが有効になるので、iBooksとAdobe Digital Editionsやブラウザの挙動はまったく異なっている。

このようにiBooksが他のReaderやブラウザと互換がないのはとても困る。かなり大きな問題ではないだろうか？将来のバージョンで変更になることを期待したい。

※使用したバージョン
Adobe Digital Editions：1.7.2
iBooks：1.2.1

CSSでのwidthの値は次の4種類を試した。
.a {width:200px;}
.b {width:100pt;}
.c {width:30%;}
.d {width:10em;}

○参考としてInternet Explorer(8.0)とFireFox(3.6.16)でも試してみた。
ケース1 IE、FF共にwidthの値にemで指定したときを除き、画像が期待通りの大きさになる。
ケース2 IE、FF共に大きさ指定が無視される。
ケース3 IE、FF共に画像が期待通りの大きさになる。
ケース4 IE、FF共に大きさ指定が無視される。

つまりブラウザでは、imgに指定したwidth属性もimgにCSSでwidthを指定した場合も両方とも意図通りに表示されるが、divそのものやdivにCSSでwidthを指定しても無視される。

○テストデータ
Case1ファイルをダウンロード
Case2ファイルをダウンロード
Case3ファイルをダウンロード
Case4ファイルをダウンロード

投稿者 koba : 2011年04月24日 13:17

トラックバック

このエントリーのトラックバックURL:
http://blog.antenna.co.jp/PDFTool/mt-tbng2.cgi/1609

コメント

コメントしてください