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

Tweet

EPUBにおけるフォント埋め込みについて少し調べてみましたのでメモとして整理しておきます。
１．@font-face規則とフォント埋め込み
CSSではフォントリソースを指定する@font-faceルールが規定されている。@font-faceルールを使って閲読環境にないフォントリソースを指定しておき、そのフォントリソースをスタイルシートで利用することができる。EPUBではフォントリソースをEPUBファイルに同梱して、そのリソースを@font-faceで指定することでフォント埋め込みを実現している。
2．@font-face仕様の変遷
2.1 CSS2.0
@font-faceはCSS2.0で規定されている。
15.3.1 Font Descriptions and @font-face
2.2 CSS2.1
しかし、@font-face規則はCSS2.1で削除された。CSS2.1は@font-faceをサポートしない。
2.3 CSS3
@font-faceはCSS3で復活する。
CSS3仕様書：　
CSS Fonts Module Level 3
http://www.w3.org/TR/css3-fonts/#font-face-rule
2.3.1 @font-face
@font-face { }
の形式は descriptor: value; のリスト。
font-family:ファミリー名;
src: url(上記ファミリー名フォントのリソースURI);
とするとダウンロード可能なフォントを記述できる。
ダウンロード可能なフォントはそれを参照している文書のみで利用可能とするべき。
ローカルフォントを使いたいとき
src: local(フォントフェース名);
3. EPUBの場合
3.1 EPUB2.0
EPUB2.0 Open Publication Structure (OPS)仕様では@font-faceルールを利用可能としている。次の記述子をサポートする。
・font-family
・font-style
・font-variant
・font-weight
・font-size
・src
3.2 EPUB3.0
http://idpf.org/epub/30/spec/epub30-contentdocs.html#sec-css-fonts
（4月19日現在）
EPUB3.0では、@font-faceルールをCSS3 Fonts に従って使うこととされている。
閲読システムは、最低限、次の記述子をサポートする。
・font-family
・font-style
・font-weight
・src
・unicode-range
4. フォントファイルの難読化
フォントファイルなにも細工しないでEPUBに同梱すると、EPUBはZIP形式なのでZIPを解凍してフォントファイルを取り出すことができてしまう。この防止のため、EPUBのファイル形式を定めるOpen Container Format（OCF）でフォントをそのままでは利用できないようにする難読化の方法が提案されている。
4.1 OCF2.0
Font Embedding for Open Container Format Files
http://idpf.org/epub/20/spec/FontManglingSpec.html
（日本語訳）Open Container Format ファイルへのフォントの埋め込み
http://lost_and_found.lv9.org/FontManglingSpec_ja.html
4.2　OCF3.0
EPUB Open Container Format (OCF) 3.0
「5 Font Obfuscation」の項
http://idpf.org/epub/30/spec/epub30-ocf.html#font-obfuscation
※このメモの内容は、cassupportの日記の（4/19）に書いた内容とおおよそ同じです。
http://d.hatena.ne.jp/cassupport/

Tweet

EPUBを作る上では、コンテンツとレイアウトを分離することが重要な理由を少し説明します。
1980年代の中ごろにWYSIWYGという技術が登場して、ワープロからDTP(デスクトップ・パブリッシング）までWYSIWYGを実現するソフトが大人気です。
　
最近の若い社員にはWYSIWYGという言葉を知らない人も見受けられますが、WYSIWYGとは、What You See Is What You Getの頭文字を集めた言葉で、その意味するところは「画面で見たとおりにプリントが得られる」ということです。
　
一見、画面が主体のようですが、これは、紙に印刷することを想定して画面上でレイアウトするという方法にもつながります。すなわち、紙をコンピュータの画面上で仮想する、すなわち、画面上で紙のまねをすることです。
　
問題点は紙は用紙の規格がいくつかに決まっており、その用紙に印刷することを予め予想してレイアウトすることになります。つまり、A4に印刷することを想定して、画面上をA4用紙に見立ててレイアウトし、そのレイアウトした状態を保存、印刷することになります。
　
この四半世紀に発展してきた印刷物制作のこのような方法は、読書端末上をつかって読むEPUBのような電子書籍制作ではかなり難しくなります。電子書籍端末の画面の大きさ（縦・横のドット数、その比率）は端末毎にばらばらなのに加えて、EPUBでは、リーダでEPUBを表示した状態で文字の大きさの設定を変更できます。そうなりますと、１行の文字数、画面の行数が変わります。特定の画面サイズを想定したレイアウト結果はめちゃくちゃになってしまいます。
つまり、大きさが固定の紙に対するレイアウトという、従来のやり方が通用しないのです。このようなときには、コンテンツとレイアウトを分離しておいて、レイアウトは出力装置にあわせて自在に切り替える仕組みが有効になります。ということで、コンテンツとレイアウトの分離方法の詳細についてはまた後日。
　
○コンテンツとレイアウトを分離する制作を徹底追及するCAS-UB
・http://www.cas-ub.com/

Tweet

アンテナハウスでは、電子書籍（PDF, EPUB)を編集・制作するWebサービス「クラウド型汎用書籍編集・制作サービス（略称：CAS-UB）」を開発しています。
　
CAS-UBは現在商用化に向けて、機能の充実を図っていますが、このためにCAS-UBを実際に使って書籍を制作していただけるグループを募集しています。実証実験として電子書籍を実際に作っていただきながら、ご意見を伺い、サービス機能の拡充を行なっていきたいと考えています。
　
募集期間は4月から6月までとなっています。この間にご応募いただきましたグループの方には1年間、無償で出版プロジェクトを設定してお使いいただくことができます。
　
関心をお持ちの方は、下記のWebページをご参照の上、弊社までご連絡ください。
なにとぞ、よろしくお願いします。
　
○CAS-UB出版プロジェクト募集の詳細
http://www.cas-ub.com/user/index.html#user2
　

Tweet