I love software!

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ファイルをダウンロード

いよいよゴールデンウィークが迫ってきました。楽しいお休みを考えて心ここにあらずの方もいらっしゃるかもしれませんが、4月最終週、最後の追い込みで頑張りましょう。

弊社も今週はいくつか納品があって忙しい週です。

ところで、連休明けにはソフトウエア開発環境展があります。次はソフトウエア開発環境展の情報です。

今回は、OEMグループが初めてのちらしを準備しています。PDF Viewer SDKをはじめとしてOEM製品のご紹介をいたします。ぜひ、お立ち寄りください。

　=========================================================
　　　　　第２０回　ソフトウェア開発環境展（SODEC）
　=========================================================

《開催情報》
　■会期：　5月11日（水）～13日（金） 10～18時（最終日は17時で終了)
　■主催：　リードエグジビジョンジャパン（株）

《弊社出展場所》
　■会場/ブース番号：東京ビッグサイト　東展示棟 / 東３８－２３
※（株）デジタルコミュニケーションズ共同ブース

《アンテナハウスの：主な出展内容》

　■Webと印刷の統合するXML/HTML組版ソフト「AH Formatter」
　　『ソリューション事例集』準備完了！
　　　・SIerの皆様へ　ビジネスヒントが満載で！
　　　・ユーザーの皆様へ　XMLソリューション事例がシーン別にご覧頂けます。

　□社内文書をサーバ上でPDF化し管理する「AH PDFServer」
　　　・5月末リリース予定の最新版をデモ予定

　■サーバサイドでMS-Office文書をPDF、各種画像へ変換する
　　「ServerBasedConverter」

　□PDFに電子署名、タイムスタンプを付与する「PDF電子署名モジュール」
　　　・PDF国際標準ISO 32000-1に準拠!!

　■PDFを生成するドライバとPDFを加工する「PDFDriverAPI/PDFToolAPI」
　　　・新機能：PDF作成処理の並列処理を実現！！

　□クラウド時代のサーバ組込用テキスト抽出エンジン
　　「TextPorter」

　■OEM製品（PDF ViewerSDK,PDF Driver,PDFtoExcel変換ライブラリ等々）
　　　・弊社OEM営業が対応させて頂きます。

★展示会詳細は下記公式サイトにてご覧頂けます。
　ソフトウェア開発環境展サイト ： http://www.sodec.jp

１昨日の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ファイルをダウンロード

アンテナハウスは、本日より、バーコードジェネレータオプションなど機能追加した、AH Formatter V5.3　をリリースをリリースしました。

新しいバージョンでは次の機能が追加になりました。
(1) バーコード画像を生成して出力する、バーコードジェネレータオプションを追加いたしました。
(2) FO中にオプション設定の追加や、ハイフネーション情報を追加できるようになりました。
(3) 機能拡張により、次のことが可能になりました。
・行番号の回転
・略語とみなす文字数の指定
・ハイフン付けされている語をハイフネーションするかどうかの指定
・ページ番号の前置文字列と後置文字列の無効化
(4) CJK文書中に現れた別の言語をハイフネーション処理することができるようになりました。
(5) PostScript出力に以下の設定が追加されました。
・フォントを埋め込むかどうかの指定
・相対アドレスで指定された外部へのリンクを、PDF のリンクプロパティの動作種別のいずれかに指定可能

○本製品のニュース・リリース
http://www.antenna.co.jp/news/AHF53_20110427.html

○製品のWebページ
http://www.antenna.co.jp/AHF/

簡単操作でPDFの作成ができる人気ソフト「瞬簡PDF」が、操作画面の一新と新しい機能を追加して、大幅リニューアルしました。

さらに！「瞬簡PDF4」の機能のほかにPDF⇒WORD,EXCEL等に変換や透明テキスト付きPDFが作成できる「瞬簡／リッチテキストPDF6.1」も発売致しました。

両製品の発売を記念して「瞬簡PDF4」「瞬簡／リッチテキストPDF6.1」のダウンロード版　特価キャンペーンを5月末まで開催します！

━━━━━━━━　PDF作成ソフト「瞬簡PDF4」の主な機能　━━━━━━━━

●様々なアプリケーションの"印刷"からPDFファイルを作成することができる
　PDF変換ドライバ『Antenna House PDF Driver』を搭載！
●"Microsoft Word/Excel/PowerPoint"などの文書を一括でPDF変換
●PDFの分割・結合・ページ削除
●PDFのパスワードによる閲覧制限／編集制限／印刷制限を設定・解除

その他詳細は製品のWebサイトをご覧ください。
　http://www.antenna.co.jp/spd/

ダウンロード版　特価！　　2,310円⇒2,200円（税込）☆消費税分　お値引き！
https://web.antenna.co.jp/shop/html/products/detail.php?product_id=193

━━━━━━━━「瞬簡／リッチテキストPDF6.1」の主な機能━━━━━━━━

●「瞬簡／リッチテキストPDF6.1」には「瞬簡PDF4」がついています！
　
　　　　　　　　　　　さ・ら・に！

●　PDFをWord、Excel、PowerPoint、一太郎に変換！
●　スキャナで作成した画像や画像PDFも文字・罫線を認識させてOCR変換！
●　PDFから透明テキスト付きPDFを作成！

その他詳細は製品のWebサイトをご覧ください。
　http://www.antenna.co.jp/rpd/

ダウンロード版　特価！ 9,870円⇒7,700円（税込）　☆20％お値引き！
　https://web.antenna.co.jp/shop/html/products/detail.php?product_id=166
↑
これは安い！

◆オンラインショップのご利用についてはこちら
http://www.antenna.co.jp/sales/qa.html
※ダウンロード版の返品はお受付しておりません。

イメージの大きさの決定について、CSS 2.1仕様との関係を整理しておきます。

この記事は、昨日の「EPUBで画像の大きさを指定する方法について、続きです」の続きです。初めての方は、前の記事をお読みいただくとわかりやすいと思います。

1．非置換インラインとは

CSS 2.1の3.1 定義に置換要素の定義があります。
http://www.w3.org/TR/CSS2/conform.html#replaced-element

置換要素とはイメージ、埋め込みオブジェクト、アプレットなど、内容が普通の要素とは別のものに置換されて可視化されるものとなっています。置換要素には固有な大きさ（width、height）があることが多いという説明があります。

ここから「非置換のインライン要素」というのは、画像などではないインライン要素（spanなど）のことであることがわかります。span要素のような通常の文書内のンライン要素にwidthを指定したとしても、CSSではwidthの指定は適用されず無視されることになります。

2．画像の表示サイズの決定

前回のケース４でdivに幅を指定したとき、その子供のimgの表示サイズは次のようになっていました。

(1)ブラウザやAdobe Digital Editionsではimgにwidth:100％を指定しないとイメージ固有の大きさで表示されwidth:100％を指定したときに初めて、親のdiv要素に指定した幅で表示される。
(2)iBooksはimgにwidth:100％を指定しなくても親のdiv要素に指定した幅で表示される。

2種類の挙動のうちどちらが正しいのでしょうか？

CSS 2.1の仕様では「10.3幅とマージンの計算」の「10.3.2 置換インライン要素」の項

http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width

に次のような記述があります。

「もし、heightとwidthが共に'auto'になり、かつ、要素が固有の幅をもつならば、固有の幅をwidthの値として使用する。」

widthもheightの初期値は'auto'です。「imgになにもwidthを指定しない」とwidthの値は初期値の'auto'になりますのでこの記述が適用されます。

つまり、imgにwidthもheightも明示的に指定しない場合はイメージの固有サイズで表示するのが正しいことになります。

このことからiBooksの挙動はCSS2.1の仕様とは違うということになります。