I love software!

« 【第20回ソフトウェア開発環境展 出展情報】 | メイン | バーコードジェネレータオプションなど機能追加した AH Formatter V5.3　をリリース »

2011年04月26日

EPUBで画像の大きさを指定する方法について、続きです

１昨日のEPUBで画像の大きさを指定する方法について、もう少し継続して調べてみました。

XHTMLファイルの構造は次のようになっています。

<div ...>
<img src="画像ファイルへのパス" ... />
</div>

ケース１、ケース３は直接imgに対してwidth属性またはCSSのwidthプロパティで幅を指定しました。この両方ともブラウザやAdobe Digital Editionsでは幅指定が有効になります。これは正常な動作と思います。

ケース２は、img要素の親要素であるdivにwidth属性を指定しました。

ケース４は、img要素の親要素であるdivにCSSのwidthプロパティで幅を指定しました。

ケース２は、ブラウザやAdobe Digital Editionsでは幅指定が無視されます。XHTML1.0の文書型を調べると、width属性を指定できるのは、img、table関連の要素オブジェクト要素などとなっておりdivにはwidth属性は指定できません。従って、divに指定したwidth属性を無視するのは正常と思います。

問題はケース４です。CSSのwidth属性は、CSS2.1仕様をみると「非置換のインライン要素と表の行を除く全て要素に適用できる」とあります。非置換ってわからないのですが、divはインラインではないのでwidthを適用できるはず。で、なぜ、画像の幅が期待通りにならないのか？

調べてみますと、どうやらimgに指定した画像ファイルのもともとの大きさが幅1024ピクセル、高さ768ピクセルと大きいのですが、imgに幅を指定していないので、画像ファイルのサイズのままで表示しているようです。

それで今度はimg幅を明示的に指定してみました。CSSを簡単に書くとこのようになります。

div {
width:30%;
}

img {
width:100%;
}

つまり、imgの親要素のdivに幅を指定し、img自体にはその親要素の表示幅に合わせて画像を表示するように指定します。

そうすると今度はブラウザでもAdobe Digital Editions でも画像が期待した大きさで表示されます。どうもこれが正しいようです。

iBooksはimgに100%指定がなくてもあるものとして解釈しているようですね。やはりiBooksは特殊というべきでしょうか。

○結論としては、現時点で、ブラウザ、Adobe Digital Editions、iBooks(1.2)で共通になるようなイメージの大きさ指定は、このケース４の方法しかない、ということになりそうです。

○テストデータ
Case4aファイルをダウンロード

投稿者 koba : 2011年04月26日 09:54

トラックバック

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

コメント

コメントしてください