カテゴリー別アーカイブ: EPUB

国際電子出版エキスポ終了、多数の方のご来場ありがとうございました

7月7日~9日東京国際展示場で行なわれた「国際電子出版エキスポ」は無事終了しました。今年は、開発中の「クラウド型汎用書籍編集・制作サービス」(CAS-UB)を中心にご案内しました。
 
CAS-UBはアンテナハウスの次世代主力サービスとして開発を進めているものです。クラウドサーバ上に置いた書籍の原稿を多人数で共同編集します。完成した原稿は、PDF、EPUBの両方の形式で出力できます。印刷書籍から電子書籍へ、パラダイム・シフトの時代に対応できる出版物制作サービスと位置づけています。
 
現在、印刷する出版物の多くはInDesignというDTPソフトで作られて、PDFから印刷されていると思われます。一方で、EPUBはWebの制作に近いものです。このためDTPとWebの間をスムーズに移行するのが難しく、EPUB制作の多くは手作りに依存しているのが実情と思われます。
 
EPUBでは、電子的なぺージナビゲーションが必要ですので、ナビゲーションに必要な目次やリンクなどを手間をかけずに自動的につくることも必要です。
 
こうした作業を自動化してPDFと同時にEPUBを作成できるサービスはおそらく世界にも類を見ないものと思います。
 
展示会では、CAS-UBについて多くの方にデモをご覧いただくことができました。特に、7月8日の午前中に行なわれたJEPAの「EPUB3 標準化動向と日本のサービス紹介」で10分ほど時間をいただいて紹介しましたが、そのデモをご覧になって、もっと詳しく知りたいということでブースにおいでいただいた方が大勢いらっしゃいました。
大きな関心をもっていただけたことを大変ありがたく、感謝いたします。
 
なお、CAS-UBについてはさらに次の通り、セミナーにて紹介いたします。
なにとぞ、よろしくお願いします。
 
アンテナハウス 電子出版サービス・情報インデックス


「コンテンツのデジタル化でビジネス活性化」無償ご招待枠のご案内

MEDIVERSE主催の「コンテンツのデジタル化でビジネス活性化」セミナーが7月1日に開催されます。
コンテンツホルダ(出版及び電子文書)がビジネス改善をするためのポイントや注意点を分析し、今後のビジネスの活性化に役立てるセミナーです。
MEDIVERSEの小笠原氏がモデレータとなり、アンテナハウス、オープンエンド、サイバーテック、ロココの4社がそれぞれ一押しのビジネス活性化サービスのご案内をします。
アンテナハウスは、Web上でコンテンツを制作しEPUBとPDFを作成する「汎用書籍編集・制作サービス」(CAS-UB)の説明とデモを約20分予定しています。
○Webページ
http://bit.ly/j4PqbP
【本セミナーの特徴】
・コンテンツを管理することの意義がわかる。
・直接のコストダウンのヒントが得られる。
・無理のないプロセス・フローが考えられる。
・IT化の流れに自社を合わせられる。
・将来にわたって成長できるロードマップが描ける。
日時: 2011年7月1日(金) 18:30-20:45
会場: 東京産業労働局秋葉原庁舎第2会議室
定員: 40名
会場は秋葉原のすぐそばです。
http://www.tokyo-kosha.or.jp/support/jigyo/hall/index.html
Webページのご案内では、有償(5,000円)となっていますが、アンテナハウスに無償の招待枠があります。こちらにメールをいただければ登録しますので、ぜひご参加ください。
・メールあて先:sales@antenna.co.jp
上のメールアドレス宛に、メールの表題に「コンテンツのデジタル化でビジネス活性化」セミナー申し込み とお書きいただき、お名前をご記入の上、メールをお送りください。弊社の方で参加登録いたします。
よろしくお願いします。
○汎用書籍編集・制作サービス
Webページ:http://www.cas-ub.com/


CAS-UB で制作したPDFからプリントオンデマンドで本ができました。

アンテナハウスが準備中の「汎用書籍編集・制作サービス」(CAS-UB)は、ひとつのコンテンツから紙の本を作るためのPDFと電子書籍(EPUB)の両方を作り出すことのできるサービスです。
 
本サービスは、商用化をめざして開発を継続中ですが、現在、いくつかの出版プロジェクトが進んでいます。
 
最初のプロジェクトで作成した本は、既に、4月にPDF版(電子版)を販売開始しています。過日、CAS-UBで初めてできた書籍をPDFで発売したことをご報告しました。
○CAS-UBで制作した書籍のPDF版を発売しました。
http://d.hatena.ne.jp/cassupport/20110401/1301660683
 
このPDFを使って、この本を著者自らプリントオンデマンド(POD)で本にしたものができました。B6版横書きで200ページ程度の本ですが、表紙、本文をやや厚手の紙を使用しカバーはPP加工無しの仕様で、10部作成し1,098円(1冊あたり)とのことです。カバーは著者の方でデザイン手配しています。
tenshoku.png
こうした本にしてみますと、PDFの時には気がつかなかった課題が見えてきます。コンテンツについての課題もありますが、組版レイアウト指定の問題、組版エンジン(AH Formatter)の改良すべき点あるいはFOの使いこなしノウハウが多々見つかっています。
やはり、こうした紙の本を自ら作ってみることが大事との印象を強くしました。
CAS-UBは今度の国際電子出版エクスポに出展する予定ですが、それまでにもう少しできばえを良くしたサンプルをPOD(BOD)で作って出展したいと考えています。
○国際電子出版エクスポ出展情報
http://www.antenna.co.jp/news/EBOOK2011.html
○CAS-UB
http://www.cas-ub.com/
 
○AH Formatter
http://www.antenna.co.jp/AHF/


マニュアル/ドキュメント多言語組版「ここだけ」の実践DITAセミナー

アンテナハウスでは、(株)ナビックス社、(株)エクスイズムと協同でDITAの実践セミナーを開催いたします。
DITAの話は沢山聞いた。でも、ちっとも実体が見えてこないと感じている皆さんへ、実務者による実務者のための「ここだけ」のノウハウをお教えします。
これなら、あなたもDITAが見えてきます。
【開催概要】
開催日時:2011年6月27日(月) 13時00分~16時30分(受付開始12時30分)
開催場所:日本橋公会堂集会室
 東京都中央区日本橋蛎殻町1-31-1  日本橋区民センター2F 
東京メトロ
・半蔵門線「水天宮前」駅 6番出口 徒歩2分
・日比谷線「人形町」駅 A2出口 徒歩5分
・東西線「茅場町」駅 4a出口 徒歩7分
都営地下鉄
・浅草線「人形町」駅 A3出口 徒歩7分
→ http://mappage.jp/dtl/infolist.php?KanriNo=13102S040041&mode=md

募集人数:定員80名(事前予約制)
予約申し込み → http://www.exism.co.jp/contact/form/seminarinq.html
申込み締切:2011年6月20日(月) 
参加費 :2,000円(消費税込み)
 参加費のお支払い方法は、お申込受付後ご案内致します。
【セミナー内容】
◆DITAとは?DITAの重要な機能
 トピック、マップ、条件処理、conref等、DITAの基本を平易に解説する。
アンテナハウス株式会社 小林具典)
◆エディタの機能でDITAを使いこなす  
 サンプルを交えながら「DITAの移行ポイント」を紹介する。ツールからDITAを学ぶという視点でotherprops属性を使った条件分岐、関連テーブル、Subversionクライアントでの差分チェックなど、これまで紹介されなかったエディタを使ったDITAの具体的な利用方法を解説する。
株式会社ナビックス シニアコンサルタント 楳田克浩)
◆DITA Open Toolkitによる多言語組版
 多言語展開を見据えたDITA Open Toolkitの利用方法について紹介する。
 PDF作成のポイントであるFOプラグインとレイアウトの再現性、今話題のEPUBプラグインを解説する。
(株式会社ナビックス ソリューションエンジニア 大谷芳正)
◆翻訳を見据えたスモールスタートのすすめ
 制作と翻訳の課題を交えながらシンプルなDITAの運用方法を紹介する。
 「不真面目なDITA」をもとに、できるだけDITAの仕様に合わせないライティング手法やモジュール化の重要性、多言語展開のメリットを解説する。
(株式会社ナビックス テクニカルディレクター 矢内英彦)
※セミナー案内書兼申込書は→http://www.exism.co.jp/pdf/dita/seminar0627.pdf
【お問い合わせ先】
株式会社エクスイズム
TEL:03-5229-8761(代表)  MAIL:exsales@exism.co.jp


EPUB3.0のProposed Specification公開。今年の終りに勧告へ

IDPFは5月23日にEPUB3.0のProposed Specificationを公開しました。
○International Digital Publishing Forum(IPDF):
http://idpf.org/
○ニュースリリース:
http://idpf.org/epub3_proposed_spec_released
○仕様:
http://idpf.org/epub/30
○ドキュメントの索引:
http://idpf.org/epub/30/index.html
■EPUB3.0で追加された主な項目:
このニュース・リリースによると次の通りです。「EPUB3は、2010年5月に開発を開始した。この仕様は、会員および公開レビュー、早期の実装者による採用を目指している。EPUB3は、今夏遅くに最終の勧告仕様になることを期待している。」
IDPFは組織が小さいだけにスピードが速いですね。W3Cはこのスピードについていけていない。
○EPUB2からEPUB3への変更点
http://idpf.org/epub/30/spec/epub30-changes.html
大よそは「電子書籍交換フォーマット標準化プロジェクト(調査報告書)」のpp.52~56に解説があるが一部新しくなっているようだ。
1.仕様文書構成
http://idpf.org/epub/30/spec/epub30-changes.html#sec-history-intro
3.新規機能
3.1 コンテンツの記述
・XHTML5ベースとする
・SVGをSpineに記述可能
・MathMLをサポート
・Semantic Inflection
・Content Switching switch 要素の単純化
3.2 ナビゲーション EPUB Navigation Documentsが必須
3.3 リンク EPUB Canonical Fragment Identifier (epubcfi) Specification (5/6~)
3.4 スクリプトと対話性
3.5 スタイルとレイアウト
  CSS、埋め込みフォント、フォント難読化
3.6 リッチメディア
  音声、映像、メディアオーバレイ
3.7 メタデータ
3.8 スピーチ
3.9 マニフェスト・フォールバック
3.10 束縛
音声と映像以外はOCF内におく。MIMETYPE記述の末尾スペースの許容。OCFファイル名で利用できない文字の拡張。
3.11 XMLとUnicode
XML1.1ではなくXML1.0に準拠しなければならない。
XML1.0のFifth Edition(Unicode 5.0)
※EPUB2.0はXML1.0の第4版準拠(Unicode2.0)
4.EPUB3で置き換えられた機能
4.1 EPUB2.0仕様書から削除
DTBook
Out-of-Line XML Islands
Tours
Filesystem Container
4.2 非推奨となる
Guide
NCX
以上
http://d.hatena.ne.jp/cassupport/20110524/1306189337 より転載


Adobe Digital Editions はどうやら最初に指定したプロパティが有効に働かないようだ(←間違いの記録)

先日からAdobe Digital Editionsの奇妙な動作に嵌っていますが、いろいろ試したところどうやら分かってきたのは、最初に指定したプロパティがうまく働かないようだということです(CSSの場合、スタイルシートがいくつも使えるので、最初と言う言葉の定義も難しいですが)。
5/18追記:どうやらCSSにUTF-8のBOM(Byte Order Mark)が付いていたのが原因のようです。Adobe Digital Editionsの問題ではなくて、CSSの方の問題ということです。詳しくは次のTweetをご覧ください。
1.http://twitter.com/#!/MurakamiShinyu/status/70471711665033216
2.http://twitter.com/#!/MurakamiShinyu/status/70474839609180160
いやあ、やはり、@MurakamiShinyu はプロだよ!
ということで、下記は一応参考のために残しておきますが。もはや内容は単なる間違いの記録に過ぎません。皆様ご注意ください。
一応参考のために実験して分かってきたことを整理しておきます
「CSSで目的とする.fig {width}指定の前に、何らかのプロパティ指定(これは何でもよい)が入ると、Adobe Digital Editions では期待通りに表現される」
○資料
——————————————————-
1 re-Error-css-p-tuika.epub
——————————————————-
元ファイルの css にて、.fig の前に、 [.p] の backgland-color 指定を
入れる。
→正常に表示されている。
〈構文〉
.p {
background-color: pink;
}
.fig {
border-style: solid;
border-width: thin;
border-color: black;
width: 50%;
}
(以下、元ファイルと一緒)
—————————————————–
2 re-size-of-image.epub
—————————————————–
.fig のレイアウト指定を二つに分割。width 要素を最後に持ってくる。
HTMLでは、正常に表示する。
Adobe Digital Editionsでは、イメージのサイズは期待通り表示されるがborderは表示されない。
〈構文〉
/* test */
/* re-size-of-image */
.fig {
border-style: solid;
border-width: thin;
border-color: black;
}
img.case-2 {
width:100%;
}
img.case-3 {
max-width: 100%;
}
.fig {
width: 50%;
}
—————————————————–
3 re-Error-css-fig-bunkatsu2.epub
—————————————————–
.fig のレイアウト指定を二つ分割。最初に width 要素を持ってくる。
HTMLでは正常に表現されるが、Adobe Digtal Editionでは.figにwidthが反映されない。
(しかし、2とは逆にborderは表示されている。)
〈構文〉
/* test */
/* re-Error */
.fig {
width: 50%;
}
img.case-2 {
width: 100%;
}
img.case-3 {
max-width: 100%;
}
.fig {
border-style: solid;
border-width: thin;
border-color: black;
}
これから見ると、どうやら指定順序が影響しているようだが、おそらくこれはAdobe Digital Editionsのバグではないだろうか。
1.のデータ
ファイルをダウンロード
元ファイルの css にて、.fig の前に、 [.p] の backgland-color 指定を入れる。
2.のデータ
ファイルをダウンロード
.fig のレイアウト指定を二つに分割。width 要素を最後に持ってくる。
3.のデータ
ファイルをダウンロード
.fig のレイアウト指定を二つ分割。最初に width 要素を持ってくる。


Adobe Digital Editions 画像表示サイズの奇妙な現象

昨日、「iBooksとAdobe Digital Editionsの画像表示動作の違いにご注意」(http://d.hatena.ne.jp/cassupport/20110512/1305162472)という日記をかいたのですが、制作された大石さんから次のようなコメントをもらいました。
『CSSに「img {width:100%;}」と追加してみました。一見大丈夫なようですが、画面サイズを左右に広げた場合、Adobe Digital Editionsでは2段組となり、firefoxのアドオンEPUBreaderではどこまでも画面に追随するため偏平な画像になってしまいます。』
まず、前段の画面サイズを左右に広げたときの話ですが、Adobe Digital Editionsでは文字を小さくするとか、あるいは、表示幅を広くすると2段組で表示するのが通常動作のようです(Windows版で確認)。Sony Readerなどでは画面のサイズが決まっていますので問題ないのではないでしょうか。
firefoxのEPUBreaderで画面幅に追随して扁平になるのを避けるには、max-width:100% とすれば良いようです。max-widthに対する動作もEPUBReaderで少し違うようなのでこのあたりはまた調べてみようと思います。
それと関係して、Adobe Digital Editionsの画像サイズに関する奇妙な動作に嵌ってしまいました。
※バージョンは1.7.2.1131(Windows7)の環境です。
先日、次のように書きました。
——
div {
width:30%;
}
img {
width:100%;
}
imgの親要素のdivに幅を指定し、img自体にはその親要素の表示幅に合わせて画像を表示するように指定するとiPadでも、Adobe Digital Editionsでも画像の表示サイズが同じになります。
——
http://d.hatena.ne.jp/cassupport/20110426/1303775762
ところが今日同じ様なファイルを作ってみたところAdobe Digital Editionsでそうならないのです。
○divにwidth:50%;を指定したつもりなのに次のようになってしまいます。
http://f.hatena.ne.jp/cassupport/20110513200405
※スタイルシートの内容(一部)
/* test */
.fig {
width: 50%;
}
img.case-2 {
width:100%;
}
img.case-3 {
max-width: 100%;
}
テストファイル:ファイルをダウンロード
これはおかしいと思い、さんざん調べました。でたまたま指定の順序を入れ替えたのです。
※スタイルシートの内容(一部:変更後)
/* test */
img.case-2 {
width:100%;
}
img.case-3 {
max-width: 100%;
}
.fig {
width: 50%;
}
○今度はなんと次のようになってしまいます。2枚目は期待通りになりますが1枚目が画像本来のサイズのままになってしまっています。
1枚目http://f.hatena.ne.jp/cassupport/20110513200406
2枚目http://f.hatena.ne.jp/cassupport/20110513200407
Adobe Digital Editions はスタイルシートの指定順序で画像の大きさが変わってしまいます。
テストファイル:ファイルをダウンロード
ブラウザ(ForefoxやそのEPUB Readerプラグイン)では2つの画像の両方とも画面サイズの50%の幅で表示されます。
この現象はどういうことなんでしょうかね。まだ原因は分かっていません。


Book on Demandの現状と可能性を考えてみました

アンテナハウスのCAS-UB(http://www.cas-ub.com/)は書籍のコンテンツを編集・制作するサービスです。
CAS-UBで編集した結果はEPUBとPDFに同時に出力できますので、BOD(ブックオンデマンド)にも最適です。
 
BODというのは聞きなれないかもしれません。まだ一般的に定着した言葉ではないようで、まったく別の意味に用いているケースも見受けられます。
世間一般にはPOD(プリントオンデマンド)と言う言葉の方が普及しているようです。しかし、PODというとダイナミックに変動する需要に応じて印刷するという幅広い概念で、ちらしやDMのようなものの印刷まで含むと思います。
いわゆるページもの(論文、冊子、書籍)の場合は、印刷だけではなく、製本や断裁の工程が追加になります。ページものを対象にするときは、製本・断裁などを含む言葉として、BOD(ブックオンデマンド)と言うほうがPODよりも意味が明確になると思います。
1.Espresso Book Machine(EBM)
BODの装置で有名なのがこのEBMです。三省堂の神田本店にEBMがあります。ここでは絶版本などの印刷・製本サービスを行なっています。三省堂のメニューを見ますと一般読者向けの書籍が多いようです。詳しく比較したわけではありませんが、通常の店頭書籍とあまり変わらない価格という印象を受けます。
現在は、自分で作ったPDFを本にして欲しいと言ってもだめなようです。このマシン用のデータはオンデマンドブックス社のサーバ上にあるようで、それが理由かもしれませんね。システム上はオンサイトのデータ入力も可能らしいので、持ち込みPDFの印刷・製本もやればできるのでしょうけど。ぜひ持ち込みPDFベースのBODにも対応して欲しいです。そうなったら試してみたいと思っています。
2. BODのできるPOD機械
 
EBMの特徴はコピーから製本まで一連の加工を短時間で行うことにあります。同じような機能を実現する装置としては、キヤノン、富士ゼロックス、コニカミノルタなどのプロダクションプリンティングのメーカから、プリント装置(コピー機)と連動する大型のインライン自動製本機も販売されています。しかし、これらは機械全体としては高額であり、比較的低価格のものはEBMのみのようです。
2. BOD書籍の販売
「だれが「本」を殺すのか」(佐野 眞一著、プレジデント社)には、地方出版社の経営者の言葉として、印刷会社への支払いがきついということがでてきます。印刷した本は在庫になりますので、印刷会社への支払いだけではなく税金負担もあります。コンテンツを販売する立場からは在庫負担のないBODは理想的な手段に見えます。
2.1 書籍の流通でBODを利用する
三省堂のEBMは、BODを書店が利用する例ですが、オンライン流通業者がBODを行なっているケースがあります。
(1) Bookparkのオンデマンド出版
富士ゼロックスの関連会社で、コンテンツワークスという会社はBOD流通サイトを運営しています。
http://www.booknest.jp/
コンテンツワークスはもともと富士ゼロックスの事業から由来しているようです。BODで本を作るだけではなく販売もしてもらえます。
利用している人のTweetによりますと、コピー費用は4円/ページですが、諸経費含めて1頁10円位とのことです。
 
http://twitter.com/#!/mao3mao3/status/64517440792567810
(2) アマゾンがBODでの販売を始めた
アマゾンが米国でBODで本を作っている話は前から紹介されています。先月、日本でも始めるというニュースが出ました。
http://japan.internet.com/wmnews/20110419/2.html
http://internet.watch.impress.co.jp/docs/news/20110419_440705.html
アマゾンのWebページにはまだ英語の書籍が多いようです。
http://www.amazon.co.jp/b?ie=UTF8&node=2229003051
現在、日本語の書籍のBOD販売の準備を進めているようです。検討してみた方の声がブログに紹介されていました。これで出版ビジネスに新規参入するのは難しいようです。
 
「AmazonのPODは新規参入出版社にとってきつい」
 
2.2 出版社がBODを利用する例
Webを探したところ出版社でBODで本を販売しているケースを見つけました。
(1) 森北出版
BOD書籍のご案内
http://www.morikita.co.jp/pod.html
BOD書籍のリスト
http://www.morikita.co.jp/bunya/20-1.html
ざっとみると平均:約215頁、3,582円。1頁あたり16.6円になります。一番安いもので13円弱。高いものが22円強です。専門書なので比較的高価です。
(2) 角川学芸出版
BOD書籍
http://www.kadokawagakugei.com/ondemand/list-c.php
角川地名大辞典、角川選書、源氏物語評釈のBOD本が出ています。比較的ポピュラーと見られる角川選書でも最低価格は3,000円です。かなり高価という印象を受けます。
3. BODの可能性は?
3.1 市販本の出版
一般に市販する書籍を数を出そうとするとある程度安くする必要があると思いますが、森北出版や角川学芸出版のケースでみますと、一般の書籍と比べてかなり高価になっています。これだとどうしても必要な人を除いてなかなか売れないでしょう。
流通業者を利用することを考えてみると、ブックネストにしてもアマゾンにしても、BOD印刷・製本コストに加えて販売手数料がかかります。
書籍はひとつづつ内容が違いますので、一見差別化しやすいようですが、しかし類似書籍が大量にありますので差別化は難しいと思います。そうしますと、一般読者に売るときはどうしても他の書籍と価格競争になります。
市販の書籍の印刷・製本コストは、現在のBODコストの1/3以下ではないでしょうか?結局、BODベースでは印刷・製本した書籍に価格的に太刀打ちできないだろうと思います。
但し、三省堂書店のEBMは価格的な魅力を感じます。書店の店頭にEBMが普及したとき初めてBODベースの出版ビジネスが成立する可能性があります。
3.2 私家書籍あるいは企業内書籍
上述のようにBOD本を一般に販売するときは、印刷製本済みの書籍との価格競争に巻き込まれます。ので、この領域でのBODの将来性はなかなか厳しいと思います。
BODはむしろ自費出版(著者が負担する出版)、私家書籍(私蔵用)、企業・団体で本をつくるのに向いているような気がします。
「なぜ日本は大東亜戦争を戦ったのか」(田原総一郎著、PHP研究所)には北 一輝が「国体論及び純正社会主義」を書き上げて自費出版して、世の中と勝負する経緯が出てきます(pp.324~329)。北は自費出版で書を出して一部で高い評価を得るも、わずか6日間で権力と御用新聞によって発禁処分となり闇に葬られたようです。出版とはむしろそういうものかもしれません。
 
3.3 電子書籍との関係
 
BODは手作りと言う点では今流行の自炊と似通っています。BODは電子から紙という方向なので紙をスキャンして電子化する自炊とは反対方向です。そうするとBODと言わずに「お袋の味」とでもというと流行るかもしれません。
 
EPUBなどの電子書籍が普及する過程は、とりあえずは形を欲しがる著者と読者にはBODで提供し、形にこだわらない著者と読者にはEPUBで提供したらどうでしょうか?


CSSではイメージの表示サイズをどのように決めているか?

イメージの大きさの決定について、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.画像の表示サイズの決定
前回のケース4で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の仕様とは違うということになります。


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

1昨日のEPUBで画像の大きさを指定する方法について、もう少し継続して調べてみました。
XHTMLファイルの構造は次のようになっています。
<div …>
<img src="画像ファイルへのパス" … />
</div>
ケース1、ケース3は直接imgに対してwidth属性またはCSSのwidthプロパティで幅を指定しました。この両方ともブラウザやAdobe Digital Editionsでは幅指定が有効になります。これは正常な動作と思います。
ケース2は、img要素の親要素であるdivにwidth属性を指定しました。
ケース4は、img要素の親要素であるdivにCSSのwidthプロパティで幅を指定しました。
ケース2は、ブラウザやAdobe Digital Editionsでは幅指定が無視されます。XHTML1.0の文書型を調べると、width属性を指定できるのは、img、table関連の要素オブジェクト要素などとなっておりdivにはwidth属性は指定できません。従って、divに指定したwidth属性を無視するのは正常と思います。
問題はケース4です。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)で共通になるようなイメージの大きさ指定は、このケース4の方法しかない、ということになりそうです。
○テストデータ
Case4aファイルをダウンロード


Pages: Prev 1 2 3 4 5 6 7 8 9 10 11 Next