EPUB 3 Fixed-Layout Documents

> 用例 1

完全な固定レイアウト、横長（ランドスケープ）では合成された見開きを用いて表現することを意図とし、縦長（ポートレート）では見開きをしない。

Package Document

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

XHTML

全てのコンテンツドキュメントに含まれる。

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

注記：Reading System に見開きの動作を依存するには、rendition:spread 要素のどちらかを省略するか、または ‘auto’ を設定する。

> 用例 2

完全な固定レイアウト、見開きせず表示することを意図とし、横長（ランドスケープ）固定。

Package Document

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

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

XHTML

全てのコンテンツドキュメントに含まれる。

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

> 用例 3

タイトルページが1枚の固定レイアウトページであるリフローコンテンツで、固定レイアウトページは、デバイスが合成された見開きを表示した時に、右手の位置に配置されるのを意図している。

Package Document

<meta property="rendition:layout">reflowable</meta>
<meta property="rendition:spread">auto</meta>        
…

<itemref id="titlepage" properties="page-spread-right rendition:layout-pre-paginated"/>

XHTML

コンテンツドキュメントにはタイトルページがあることを示している。

<meta name="viewport" content="width=684, height=1024"/>

この用例は、rendition:layout と rendition:spread プロパティの両方が初期値にセットされ、これらの2つの meta 要素は表示結果にいかなる影響を与えることなく省略できることを意味していることに注意してください。

> 用例 4

（もし使用しているなら）合成された見開きは両ページにまたがる図版によって機能しないようにしなければならない（must）、完全な固定レイアウトのコンテンツ。

Package Document

<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:spread">auto</meta>
…
<itemref id="center-plate" properties="rendition:page-spread-center"/>

XHTML

コンテンツドキュメントに両ページにまたがる図版コンテンツが含まれている。

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

rendition:spread=none の表現は、rendition:page-spread-center プロパティがすでに合成された見開きを無効する指示をするセマンティクスが指定されていると、center plate 項目を必要としないことに注意してください。

この例では、rendition:spread プロパティが初期値に設定され、表示結果にいかなる影響を与えることなく省略することができることにも注意してください。

> 用例 5

固定レイアウトの2ページの両ページにまたがる図版を含むリフローコンテンツは、デバイスの向きに関わらず、合成された見開きを使用して表現されることを意図している。出版物の未定義の他のリフロー部分は rendition:spread の全体の値が ‘auto’ に初期化されるため、見開いたままになる。

Package Document

<spine page-progression-direction="ltr">
    …
    <itemref id="center-plate-left" properties="rendition:spread-both page-spread-left"/>
    <itemref id="center-plate-right" properties="rendition:spread-both page-spread-right"/>
    …
</spine>

XHTML

2つのコンテンツドキュメントは両ページにまたがる図版コンテンツを表示する。

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

> 用例 6

[MediaQueries] を使用して3つの異なる種類のデバイスに使用する3つに独立したスタイルシートを含む完全な固定レイアウトのコンテンツ。

Package Document

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

XHTML

<link rel="stylesheet" href="eink-style.css" media="(max-monochrome: 3)"/>
<link rel="stylesheet" href="skinnytablet-style.css" media="((color) and
    (max-height:600px) and (orientation:landscape), (color) and (max-width:600px)
    and (orientation:portrait))" />
<link rel="stylesheet" href="fattablet-style.css" media="((color) and
    (min-height:601px) and (orientation:landscape), (color) and (min-width:601px)
    and (orientation:portrait)" />

> 用例 7

日本のマンガのページ進行方向は右から左である。各コンテンツドキュメントはビットマップ以外に何も含んでいない、とても単純な HTML で、CSS スタイルシートに関連付けられていない。

Package Document

<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:spread">landscape</meta>
…
<spine page-progression-direction="rtl">
    …
</spine> 

HTML コンテンツドキュメントのページ進行方向は 'rtl' ではなく 'ltr' であることに注意してください。これは Reading System が、通常、標準の CSS スタイルシートを使用し、暗黙的にページ進行方向を 'ltr'（原文では rtl だが、ltrと思われる）とするからである。各見開きは、はじめに右ページを使用して、次に左ページによって作成される。

XHTML

全てのコンテンツドキュメントに含まれる。

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

> 用例 8

トップレベルのコンテンツの表示にビットマップ画像を用いる完全固定のレイアウトの出版物は、XHTML フォールバックを使用する。

Package Document

<meta property="rendition:layout">pre-paginated</meta>
…
<manifest>
    <item id="ch1" href="ch1.png" fallback="ch1x" … />
    <item id="ch2" href="ch2.png" fallback="ch2x" … />
    <item id="ch1x" href="ch1.xhtml" … />
    <item id="ch2x" href="ch2.xhtml" … />    
</manifest>
<spine>
    <itemref idref="ch1" />
    <itemref idref="ch2" />
</spine> 

XHTML

全てのフォールバックをする XHTML コンテンツドキュメントに含める。

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