EPUBで画像の大きさを指定する方法を調べた。iBooks (1.2)はちょっと特殊だ！

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

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

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

ケース１. imgのwidth属性の値としてイメージの大きさを指定する
ケース２. imgの親のdivにwidth属性の値としてイメージの大きさを指定する
ケース３. imgにCSSでイメージの大きさを指定する
ケース４. imgの親のdivにCSSでイメージの大きさを指定する

２．表示結果

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

次の図はケース４の表示結果

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

このブログの著者は、Liz Castroさんという方で、コンピュータ関連書籍（HTML, CSS）を書いているようですが、iBooksは、「completely non-standard」（完全に非標準）と言っています。

iBooksで画像の大きさを指定するには、imgに対して指定してもだめで、imgの親のdiv要素に指定する必要があるということだ。しかし、これは他の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)でも試してみた。
ケース１. IE、FF共にwidthの値にemで指定したときを除き、画像が期待通りの大きさになる。
ケース２. IE、FF共に大きさ指定が無視される。
ケース３. IE、FF共に画像が期待通りの大きさになる。
ケース４. IE、FF共に大きさ指定が無視される。

○テストデータは次のブログにアップしてあります。
http://blog.antenna.co.jp/ILSoft/2011/04/epubibooks_12.html