Hatena::ブログ(Diary)

cassupportの日記

2011-04-24

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

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

ちなみにEPUB2.0の仕様をみると

(1)XHTMLのimg要素を使うことができるが、属性としてwidthを使えるかどうかは明記されていない。XHTML1.1と同じなら使えるはずである。

(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では期待通りの大きさになる。

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

f:id:cassupport:20110424133845p:image:medium

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)でも試してみた。

ケース1. IEFF共にwidthの値にemで指定したときを除き、画像が期待通りの大きさになる。

ケース2. IEFF共に大きさ指定が無視される。

ケース3. IEFF共に画像が期待通りの大きさになる。

ケース4. IEFF共に大きさ指定が無視される。

○テストデータは次のブログにアップしてあります。

http://blog.antenna.co.jp/ILSoft/2011/04/epubibooks_12.html

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証