メタデータ

内容紹介

レイアウトは次にあるいずれかのメタデータ フィールドの使用により指定できます。

1) <meta property="rendition:layout">prepaginated</meta>

2) <meta name="fixed-layout" content="true"/>

必須。固定レイアウトのある本として本を特定します。

rendition:layout メタデータの有効な値は reflowable または pre-paginated です。デフォルト値は reflowable です。

fixed-layout メタデータの有効な値は true または false です。デフォルト値は false です。

<meta name="original-resolution" content="1024x600"/>

必須。コンテンツがデザインされた元の解像度を特定します (「1024 x 600」は例の 1 つ)。スクリーン解像度はすべての正の整数。上記の値は元のコンテンツの縦横比全体に比例している必要があります。

本のコンテンツの向きは、次のいずれかのメタデータ フィールドを使用して指定できます。

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

2) <meta name="orientation-lock" content="landscape"/>

注: iOS では現在サポートされていません。

オプション。

rendition:layout メタデータの有効な値は、

portrait、landscape、auto です。縦方向あるいは横方向に本の向きを固定します。値が auto の場合、縦方向と横方向の両方の向きに対応します。デフォルト値は auto です。

orientation-lock メタデータの有効な値は、portrait、landscape、none です。縦方向あるいは横方向にコンテンツの向きを固定します。値が none の場合、縦方向と横方向の両方の向きに対応します。デフォルト値は none です。

Amazon では、縦と横のいずれの方向でもテキストを読みやすい場合には、向きを固定しないことを推奨しています。

<meta name="primary-writing-mode" content="horizontal-rl"/>

オプション。ページの表示順序、読み取りモード、およびリーダー ナビゲーション (Kindle テキスト ポップアップ、Kindle パネル ビュー、Kindle 仮想パネルを含む) を定義します。有効な値は、horizontal-lr、horizontal-rl、vertical-lr、vertical-rl です。デフォルト値は horizontal-lr です。

<div class="page" id="p3">

<div class="pimg" id="img_003"/>

<p id="p3_2" class="ptxt">僕はときどき

<br />調査に出る。何でも調べるよ。

<br/>岩のにおいを嗅いだり、 葉をかじったり。<br />何が起こるか

<br />わからない。

<br/>だから油断は禁物なんだ。<br/></p>

</div>

</div>

.ptxt{
font-family: "billy";
font-size: 450%;
line-height: 95%;
position: absolute;
top: 0%;
left: 2.35%; }

<div class="page" id="p3">

<div class="overlay" id="o3_1">元気? </div>

<div class="overlay" id="o3_2">僕の</div>

<div class="overlay" id="o3_3">名前</div>

<div class="overlay" id="o3_4">は</div>

<div class="overlay" id="o3_5">チョコ。</div>

</div>

.overlay{

position: absolute;
font-family: "billy";
opacity: 0;
color: red;
font-size: 500%;
line-height: 107%;
text-align: center;
}

…

#o3_1{top: 39.5%; left: 6.7%; font-size: 450%; }

#o3_2{top: 41.5%; left: 15.5%; font-size: 450%; }

#o3_3{top: 44.2%; left: 24.5%; font-size: 500%; }

#o3_4{top: 44.1%; left: 4.2%; font-size: 450%; }

#o3_5{top: 46.6%; left: 9.9%; font-size: 500%; }