レイアウト

固定レイアウトの出版物は、各ページのサイズ（高さと幅）が固定されている出版物です。これらのページのコンテンツはピクセル単位でレイアウトされ、要素にはレンダリングされる固定座標があります。

固定レイアウトは、一般的に画像を使用して作成されますが、CSSによる絶対位置指定を使用してHTMLでも作成できます。固定レイアウトは、コミック、マンガ、子供向けの絵本、料理本、教科書の作成によく使用されますが、ピクセル単位の正確なレイアウトを再現しようとするあらゆる書籍で使用されています。

EPUBでは、固定レイアウトを作成するための、主に二つのアプローチがサポートされています。

  1. HTMLベースのレイアウト- HTMLページに高さと幅を設定し、コンテンツをその領域内に配置します。
  2. SVGベースのレイアウト- コンテンツの作成に画像形式（SVG、JPEG、PNGなど）を使用します。

場合によっては、これらのアプローチが混在します。たとえば、HTMLまたはSVGドキュメントを使用して画像形式を表示すると、代替テキストや拡張説明も提供できます。

注記

HTMLおよびSVG固定レイアウトの代替として、EPUBのspineに直接画像を組み込む方法があります。このアプローチのサポートとアクセシビリティは限定されているので、このトピックは「spine内の画像」ページで最小限の説明のみを行っています。

製作

パッケージメタデータ

主に固定レイアウトでできている出版物と、全体のうちの数ページのみが固定レイアウトである出版物との唯一の違いは、パッケージドキュメントのメタデータにあります。

出版物が完全に、または大部分が固定レイアウトページで構成されている場合、 rendition:layoutプロパティのグローバル宣言が一度だけ必要です。

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

リフロー型のドキュメントがある場合は、そのドキュメントのspine項目参照でrendition:layout-reflowableプロパティを使用して上書きできます。

<spine>
   …
   <itemref ref="p211"/>
   <itemref ref="index" property="rendition:layout-reflowable"/>
</spine>

固定レイアウトを使用するページが少数の場合は、前述のプロセスを単純に逆にします。リフロー型の出版物ではグローバルにrendition:layoutプロパティを指定する必要はありませんが（EPUBではこれがデフォルトです）、次のように追加できます。

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

固定レイアウトページは、関連するspine項目参照のrendition:layout-pre-paginated値を使用してこの設定を上書きします。

<spine>
   …
   <itemref ref="c01"/>
   <itemref ref="plate-01" property="rendition:layout-pre-paginated"/>
   <itemref ref="plate-02" property="rendition:layout-pre-paginated"/>
   <itemref ref="c02"/>
   …
</spine>

ページサイズ

パッケージメタデータ宣言は、どのページを固定レイアウトとしてレンダリングするかをリーディングシステムに伝えるだけです。リーディングシステムがページを適切なサイズの領域にレンダリングできるように、ページのサイズは指定する必要があります。

固定レイアウトのXHTMLとSVGのページサイズは、それぞれのフォーマットのマークアップ機能に依存するので異なります。

HTMLレイアウトの場合、ページの高さと幅は、HTMLヘッダーのviewport宣言を使用してピクセル単位で指定します。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
      <title>Page 1</title>
      <meta name="viewport" content="height=1200,width=800"/>
      …
   </head>
   …
</html>

SVGレイアウトの場合、ページの高さと幅はviewBox属性を使用してピクセル単位で指定します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1200">
   …
</svg>

表示メタデータ

EPUB3には、固定レイアウトページのレイアウトと表示を制御するための、次のメタデータプロパティがあります。

rendition:orientation

rendition:orientationプロパティを使って、固定レイアウトページを表示するための画面の優先方向を、コンテンツ製作者が指定できます。

値は、 portrait 、 landscape 、またはauto（優先なし）のいずれかになります。

このプロパティは、 metaタグを使用してすべてのページに対してグローバルに宣言できます。

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

または、properties属性を使用して、spineの特定のページに設定できます。

<itemref idref="pg22" <strong>properties="rendition:orientation-portrait"</strong>
rendition:spread

rendition:spreadプロパティを使って、固定レイアウトのページを合成された見開き（つまり、隣り合う２ページにまたがったレイアウト）で表示する箇所を、コンテンツ製作者が指定できます。

値はlandscape（デバイスが横向きに保持されている場合のみ）、 both（デバイスが横向きまたは縦向きのいずれかの場合）、 auto（優先なし）、 またはnoneのいずれかになります。

このプロパティは、 metaタグを使用してすべてのページに対してグローバルに宣言できます。

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

または、properties属性を使用して、spineの特定のページに設定できます。

<itemref idref="pg124" <strong>properties="rendition:spread-both"</strong>/>
rendition:page-spread-left, -right または -center

rendition:page-spread-*プロパティを使って、固定レイアウトページを２ページの見開きのどのスロットに表示するかを、コンテンツ製作者が指定できます。

-rightや-leftプロパティと異なり、 page-spread-centerプロパティでは、見開きページの中央の単一のスロットにページを表示します。

page-spreadプロパティは、 properties属性を使用して、spine内の特定のページに対してのみ設定できます。

<itemref idref="pg2" <strong>properties="rendition:page-spread-left"</strong>/>
<itemref idref="pg3" <strong>properties="rendition:page-spread-right"</strong>/>

アクセシビリティ

固定レイアウトの出版物には、次のような、アクセシビリティに関するいくつかの課題があります。

達成できるアクセシビリティの程度は、使用されるレイアウトの種類とコンテンツの複雑さの組み合わせに大きく依存します。たとえば、複雑な教科書を作成するよりも、単純な児童書をアクセシビリティ対応にする方が簡単でしょう。多くの場合、固定レイアウトのコンテンツは、代替のシリアライズが提供された場合にのみアクセシビリティ対応になります。

注記

WCAG 2.1では、レベルAA適合のための新しいリフロー型の達成基準が導入されていますが、ほとんどの固定レイアウトの出版物ではその標準に準拠するのは困難です。

ナレッジベースのこのセクションでは、固定レイアウトの出版物のアクセシビリティを向上させる手法について説明しますが、出版物を広くアクセシブルにする必要がある場合は、通常、リフロー型のコンテンツを作成することをお勧めします。

関連リンク

  1. EPUB 3 —固定レイアウト
  2. EPUB 3 —パッケージレンダリング語彙（package rendering vocabulary）