20120607_openend_ebookpro_mediverse_EPUB3_FixedLayout_FontEmb

EPUB3技術解説セミナー1
固定レイアウト／フォント埋め込み／ウェブフォント

2012年6月7日（木）15:00-16:40

境祐司
@commonstyle ¦ 電子書籍メディア論

proﬁle

YOUJI SAKAI
Instructional Designer | eBook Designer
境祐司

BOOKS
最新刊

ウェブレイアウトの EPUB3スタンダード Webデザイン基礎
教科書デザインガイド改訂３版

community

電子書籍メデア論
ィ
http://www.facebook.com/eBookStrategy

デザインの未来
http://www.facebook.com/TheFutureDesign


本日のテーマ：

固定レイアウト
フォント埋め込み
ウェブフォント


Fixed-Layout

Fixed-Layout
テキストや図版を画像化した
絶対配置紙面を配置

Fixed-Layout
テキストや図版を絶対配置

・座標値を指定してテキストや図版を配置する方法
・文字サイズは固定されているものが多い
リーディングシステム側で文字サイズの変更ができない
・電子書籍のデータサイズは、
リフロー形式の電子書籍とあまり変わらない
・テキストの選択や本文検索などは実行できる

Fixed-Layout
iPad at Work
Volume 2
Apple iBookstore

Fixed-Layout
画像化した紙面を配置

・DTPデータからイメージ変換する方法
・もしくは、印刷物を取り込み、補正する方法
・コミックや写真集、絵本などは、JPEG、PNGなどの
ラスターグラフィックスが多い
・雑誌や凝ったレイアウトの実用書などは、PDFが多い
・リフロー形式やテキストや図版を絶対配置する方式と
比較した場合、データサイズが大きくなってしまう

Fixed-Layout
.net
Apple Newsstand

インタラクティブ
レプリカ

Fixed-Layout
Country's Best Cabins
Amazon Kindle Store

プリントレプリカ

Fixed-Layout
There Was an Old Monkey Who Swallowed a Frog
Amazon Kindle Store
固定レイアウト（Kindle Format 8）


固定レイアウトの検証環境


Readium Version 0.3.2
http://readium.org/

6月2日リリースのバージョン／Chrome 19.0.1084.54（2012.6.7現在）


about:flags


CSS領域を有効にする
「有効にする」をクリック


「今すぐ再起動」をクリック


Readium mobile
Chrome for Android 4.0
http://github.readium.org/


公開されているEPUB3固定レイアウトのサンプル

epub-samples
http://code.google.com/p/epub-samples/

ダウンロードリスト
http://code.google.com/p/epub-samples/downloads/list


EPUB3固定レイアウトのサンプル
haruko-html-jpeg-20120524.epub
Fixed layout manga, jpeg embedded in xhtml
haruko-jpeg-20120524.epub
Fixed layout manga, jpeg directly in the spine
sous-le-vent_svg-in-spine-20120418.epub
fixed-layout document, using SVG in spine
svg-in-spine-20120417.epub
sous-le-vent-20120403.epub
fixed-layout document, using SVG embedded in XHTML
cole-voyage-of-life-20120320.epub
reflowable content with interspersed fixed-layout pages
page-blanche-20120314.epub
fixed layout document, using XHTML spine items that embed bitmaps

IDPF - EPUB 3 Fixed-Layout Documents

EPUB 3
Fixed-Layout
Documents
http://idpf.org/epub/fxl/


EPUB 3 Fixed-Layout Documents

・IDPFの情報文書（Informational Document）
・IDPF EPUB working group が作成
・2012年3月13日、IDPF 理事会によって承認


Editors:

Markus Gylling - IDPF
マーカス・ギリング

Dave Cramer - Hachette
デイヴ・クレイマー


Authors:
Takeshi Kanai (Sony) ソニー
Peter Sorotokin (Adobe) アドビ
Roger Webster (Barnes & Noble) バーンズ & ノーブル
James Lester (Barnes & Noble) バーンズ & ノーブル
Brady Kroupa (Barnes & Noble) バーンズ & ノーブル
Garth Conboy (Google) グーグル
Brady Duga (Google) グーグル
MURATA Makoto (JEPA) ジェパ
Edward O Connor (Apple) アップル
Luc Audrain (Hachette Livre) アシェット・リーブル
Hadrien Gardeur (Feedbooks) フィードブックス



2
1
3



対応付け

機能
領域



プロパティ Preﬁxマッピング

・rendition:layout
・rendition:orientation
コンテント
・rendition:spread
ディメンションズ
・page-spread-*


プロパティの定義
Property Deﬁnitions

・rendition:layout プロパティ
・rendition:orientation プロパティ
・rendition:spread プロパティ
・page-spread-* プロパティ



・リフロー／ページ区切りの指定
・スクリーンの方向（縦・横）
・見開きの指定
・見開きの配置指定（左・右・中央）


Prefixマッピング
Prefix Mapping

prefix属性で URI
http://www.idpf.org/vocab/rendition/# にマッピング

<package …
prefix="rendition: http://www.idpf.org/vocab/rendition/#">

</package>


コンテント・ディメンションズ
Content dimensions

meta要素のviewportで指定

<head>
<meta name="viewport" content="width=1200, height=600" />
</head>

<head>
<meta name="viewport" content="width=512, height=600" />
</head>


コンテント・ディメンションズ
Content dimensions


Preﬁxマッピング
Preﬁx Mapping




コンテント・ディメンションズ XHTML
Content dimensions


Preﬁxマッピングパッケージドキュメント
Preﬁx Mapping


プロパティの定義パッケージドキュメント


サンプルファイルを確認
epub-samples
http://code.google.com/p/epub-samples/


haruko-html-jpeg-20120524.epub
Fixed layout manga, jpeg embedded in xhtml
haruko-jpeg-20120524.epub
Fixed layout manga, jpeg directly in the spine
sous-le-vent_svg-in-spine-20120418.epub
svg-in-spine-20120417.epub
sous-le-vent-20120403.epub
fixed-layout document, using SVG embedded in XHTML
cole-voyage-of-life-20120320.epub
reflowable content with interspersed fixed-layout pages
fixed layout document, using XHTML spine items that embed bitmaps



解凍



Image



Text



Style



パッケージドキュメント（.opf）




プロパティ Preﬁxマッピング

・rendition:layout
・rendition:orientation
コンテント
・rendition:spread
ディメンションズ
・page-spread-*



コンテンツキュメント（.xhtml）



6ページ目のXHTMLファイル



1200 1577px


rendition:layout プロパティ

リフロー／ページ区切りの指定



・reﬂowable（リフロー）
・pre-paginated（ページ区切り）



・reﬂowable（リフロー）
・pre-paginated（ページ区切り）

<meta property="rendition:layout">reﬂowable</meta>
<meta property="rendition:layout">pre-paginated</meta>


rendition:orientation プロパティ

スクリーンの方向（縦・横）



・landscape（横方向）
・portrait（縦方向）
・auto（制限なし）



・landscape（横方向）
・portrait（縦方向）

<meta property="rendition:orientation">landscape</meta>
<meta property="rendition:orientation">portrait</meta>


rendition:spread プロパティ

見開きの指定



・none
・landscape（横方向のみ）
・portrait（縦方向のみ）
・both（横方向・縦方向）


Double Pages


例：
ランドスケープモード（横向き）にすると
見開きで表示される


例：
ランドスケープモード（横向き）にすると
見開きで表示される

ランドスケープモード（横向き）では、
見開きではなく、シングルページの
拡大表示で読みたい、という読者もいる


読者が、シングルページ、
ダブルページ（見開き）を自由に選択
できたほうがよい場合もある


page-spread-* プロパティ

見開きの配置指定（左・右・中央）



・page-spread-left プロパティ
（左側に配置）
・page-spread-right プロパティ
（右側に配置）
・rendition:page-spread-center
（中央に配置）




タイトルページは右側に配置する




spine itemref要素でこのように指定してもよい


補足

<meta property="rendition:layout">
pre-paginated
</meta>



Appendix A. Examples
http://idpf.org/epub/fxl/#examples


Example 1

・固定レイアウト
・横向きでは合成された見開き
・縦向きでは見開きにしない


Example 1


Example 2

・合成された見開きにしない
・横向きで固定


Example 2


Example 3

・リフローのコンテンツ
・タイトルページだけ固定レイアウト
・合成された見開きを表示するときは
右側に配置


Example 3


Example 5

・リフローのコンテンツ
・固定レイアウトの
右配置ページと左配置ページを
合成された見開きページとして表示
・リフローのページも見開き表示のまま


Example 5


Example 7

・横向きでは合成された見開き
・縦向きでは見開きにしない
・進行方向は右から左（日本のマンガ）


Example 7



復習



XHTMLファイル



貼付ける画像の準備

Readiumで確認


本日、2つ目のテーマ：



Font embedding

Web Fonts


EPUB 3
フォントのコアメディアタイプ

OpenTypeフォント
application/vnd.ms-opentype

WOFFフォント
application/font-woff


OS
A フォント

コンテンツリーディング
（電子書籍）システム

フォントなしフォント


OS
B フォント


フォントなしフォントなし


OS
C フォント


フォントフォントなし


OS
D フォント


フォントフォント


2Dfacto honto
ビューアアプリ


デバイスインストール
フォントフォント


縦書きビューワ
for Android
※EPUBは簡易対応


縦書きビューワ
for Android


OS
A フォント


フォントなしフォントなし


iPadで使用できるフォント
iOS5
※リーディングシステムによっては表示できないので検証必須


中国語


日本語


iOS Fonts
http://iosfonts.com/


font-family

p{
font-family:
"Hiragino Mincho ProN",
"ヒラギノ明朝 ProN W3",
serif;
}


iBooks
iOS WebKit

ヒラギノ明朝 ProN W3


デフォルトヒラギノ明朝 ProN W3


com.apple.ibooks.display-options.xml


com.apple.ibooks.display-options.xml

iBooks


参考情報
Mac OS XとiOSでは表示が一部異なる
・指定なし：
Mac OS X［明朝］／iPad［明朝］
・serif：
Mac OS X［明朝］／iPad［ゴシック］
・ヒラギノ明朝 ProN：
Mac OS X［明朝］／iPad［ゴシック］
・Hiragino Mincho ProN：
Mac OS X［明朝］／iPad［明朝］


Font embedding


Adobe Digital Editions 1.8


iBooks
iOS WebKit


DL Reader
iOS WebKit


Kinoppy
iOS WebKit


サンプルの場合

TrueType


@font-face {
font-family: Prophecy Script;
font-style: normal;
font-weight: normal;
src:url("Fonts/Prophecy_Script.ttf");
}

p.letter {
font-family: "Prophecy Script";
}


p.letter {
font-family: "Prophecy Script";
}

<p class="letter">
Dear sir I received your letter and I
am sorry that I can not comply with
your wishes ....
</p>


wasteland-woﬀ-20120118.epub


スタイルシート
@font-face {
font-family: 'OldStandard';
font-style: normal;
src:url(OldStandard-Regular.woﬀ) format('woﬀ');
}

body {
font-family: 'OldStandard', sans-serif;
}


スタイルシート
@font-face {
font-family: 'OldStandard';
font-style: normal;
src:url(OldStandard-Regular.woﬀ) format('woﬀ');
}

body {
font-family: 'OldStandard', sans-serif;
} fallback


流用を防止するための「難読化」
EPUB Open Container Format (OCF) 3.0
5 Font Obfuscation（フォントの難読化）
http://idpf.org/epub/30/spec/epub30-ocf.html#font-obfuscation


EPUBオーサリングソフト
「Sigil」はフォントデータの
難読化をサポート


フォント難読化


encryption.xml


Font embedding

復習


日本語フォント埋め込みの注意点

フォントの権利処理
EPUBファイルの肥大化

EPUB3の最新情報は
IDPFのサイトで確認してください

http://idpf.org/

Thank you for your attention.
ご清聴ありがとうございました

20120607_openend_ebookpro_mediverse_EPUB3_FixedLayout_FontEmb

Recommended

Recommended

More Related Content

More from 一般社団法人メディア事業開発会議

More from 一般社団法人メディア事業開発会議 (20)

Recently uploaded

Recently uploaded (10)

20120607_openend_ebookpro_mediverse_EPUB3_FixedLayout_FontEmb