日別アーカイブ: 2011年4月24日

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

EPUB2.0で画面に表示される画像の大きさを指定する方法を調べてみた。
ちなみにEPUB2.0の仕様をみると
(1)XHTMLのimg要素を使うことができるが、属性としてwidthを使えるかどうかは明記されていない。XHTML1.1と同じであればimgにwidth属性を使えるはずである。
(2)使えるCSSのプロパティリストにはwidthがある。
1.次の4つのケースでデータを作成
ケース1 imgのwidth属性の値としてイメージの大きさを指定する
ケース2 imgの親のdivにwidth属性の値としてイメージの大きさを指定する
ケース3 imgにCSSでイメージの大きさを指定する
ケース4 imgの親のdivにCSSでイメージの大きさを指定する
2.表示結果
ケース1 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ファイルをダウンロード