20120726_openend_ebookpro_mediverse_sakai_font_emb

EPUB3技術解説セミナー3
フォント埋め込み／ウェブフォント／最新動向

2012年7月26日（木）15:00

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

proﬁle

YOUJI SAKAI
Instructional Designer | eBook Designer
境祐司

BOOKS

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

InDesign CS6で作るEPUB 3 標準ガイドブック
森裕司, 境祐司, 林拓也, 向井領治

community

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

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

EPUB3技術解説セミナー3

本日のテーマ：

フォント埋め込み
ウェブフォント

EPUB3 最新動向

EPUB 3 Font embedding / Web Fonts

電子書籍の検証方法


検証用のEPUBファイルを作成


Sigil http://code.google.com/p/sigil/

Making epub happen
The development blog of Sigil, the epub editor
http://sigildev.blogspot.jp/


メタエディター


EPUBファイルを
保存


テキストをコピー
見出しのマークアップ


大見出し
タイトル


中見出し
章のタイトル


小見出し
節のタイトル

を削除


［見出しから目次を生成］


ファイル名を付けて保存


リーディングシステムで確認

Adobe Digital Editions 1.8.x


iOS, Androidで確認


Dropboxにコピーする


Himawari Reader Pro


Himawari Reader Pro

デフォルトスタイル


iPad


iBooks


iBooks

デフォルトスタイル


検証用のスタイルシートを追加


空のスタイルシートを追加


*{
margin: 0;
padding: 0;
}


font-size: 100%; を追加


font-weight: normal; を追加


デフォルトスタイルスタイルのリセット


Font embedding

Web Fonts


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

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

WOFFフォント
application/font-woff


OS
A フォント

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

フォントなしフォント


OS
B フォント


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


OS
C フォント


フォントフォントなし


OS
D フォント


フォントフォント


GALAPAGOS
STORE
ビューアアプリ


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


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


縦書きビューワ
for Android


Himawari
Reader Pro
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


Font embedding


Adobe Digital Editions 1.8

sample;
Pigs, Gourds, and Wikis: Embedding Fonts in EPUB- iPad, iPhone AND nook
http://www.pigsgourdsandwikis.com/2011/04/embedding-fonts-in-epub-ipad-iphone-and.html


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";
}


Dear sir I received your letter and I
am sorry that I can not comply with
your wishes ....


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

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

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


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

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

<manifest>
<item id="font.OldStandard.regular"
href="OldStandard-Regular.woﬀ"
media-type="application/font-woﬀ"/>
</manifest>

パッケージドキュメント（.opf）
<manifest>
<item id="font.OldStandard.regular" href="OldStandard-Regular.woff"

<item id="font.OldStandard.italic" href="OldStandard-Italic.woff"

<item id="font.OldStandard.bold" href="OldStandard-Bold.woff"
</manifest>


流用を防止するための「難読化」
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


Web Fonts


海外では2010年頃から、
画像を極力使用せず、CSSの指定だけで
デザインされたウェブサイトが増えてきた


ウェブフォントはサーバに置かれており
指定されたフォントを配信

閲覧者のデバイスにフォントデータが
インストールされていなくても、
同一の表示が可能になる


ウェブフォント配信サービスでは
すでに権利処理が完了しているため
制作者はCSSでフォントを指定するだけでよい


問題点：

ダウンロードからレンダリングまでの
タイムラグがあるため
指定したフォントに切り替わる様子が
見えてしまう


ダイナミック・サブセッティング・テクノロジー
Dynamic Subsetting Technology


文字のサブセットを効率よくダウンロード

ダイナミック・サブセッティング・テクノロジー
Dynamic Subsetting Technology


TypeSquare http://typesquare.com/


・モリサワのフォントから154書体を利用可能
・閲覧環境に応じてTrueType
もしくはWOFFフォーマットで配信


利用したいサイトのURLを登録
生成されるスクリプトをページの
head要素内にコピー

フォント指定は、font-familyプロパティ
例：font-family: "Ryumin Regular KL" ;


現在、埋め込みフォントの扱いには制限がある

ブラウザベースの電子書籍コンテンツであれば
利用者の閲覧環境に左右されないページデザイ
ンが可能になる...かもしれない


EPUB3 最新動向

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

http://idpf.org/

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

20120726_openend_ebookpro_mediverse_sakai_font_emb

Recommandé

Recommandé

Contenu connexe

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

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

Dernier

Dernier (9)

20120726_openend_ebookpro_mediverse_sakai_font_emb