10.6 Creating Fixed-Layout Books With Text Pop-Ups With Multipage Background Images and Text

Publishing on Kindle: Guidelines for Publishers
10.5.2 CSS Files For Fixed-Layout Books

To increase page-turn performance on fixed-layout books, CSS files may be split so that each group of
HTML pages has its own CSS file. CSS files should only contain information that is directly referenced by
the associated HTML files.
10.5.3 Optimizing Content for Full Screen

Kindle books are read across a wide variety of devices (e.g., Fire tablets and other manufacturers
smartphones and tablets) and a wide variety of screen dimensions. The 2013 Kindle Fire has a
resolution of 1920 x 1200 pixels. Design the content to maintain this aspect ratio, if possible.
For the best user experience, Amazon strongly encourages publishers to design fixed-layout content to
maximize the available space of the screen dimensions. If the content has a different aspect ratio or size,
the Kindle devices and applications display it scaled to fit the screen, centered, and surrounded by a
white margin (letterbox).
Fixed-layout and other image-heavy content is more likely to be magnified because customers prefer to
read with Kindle Panel View or on devices with large screens. The best practice is to use the highest
resolution images possible. Amazon recommends submitting images scaled to support at least 2X
magnification with high quality. For example, if planning for the 2013 Kindle Fire HD 8.9", the image pixel
dimensions should be at least 3840 x 2400 (this matches the aspect ratio and would support 2X zoom).
Always use Kindle Previewer to validate the quality of the content.
10.5.4 Using Large Region Magnification Tap Targets in Fixed-Layout Books with Text Pop-Ups
The primary purpose of Region Magnification is to aid accessibility and is more effective when the tap
target is larger than the area being magnified. To enable a larger area, consider adding a padding of 20 to
40 pixels to the app-amzn-magnify anchor elements, but do not let the tap targets overlap.
10.5.5 Using position:absolute for Text on Image

For text on an image that needs to be positioned exactly, use the position:absolute attribute. Only
use this attribute for books that need a fixed layout h text specifically
positioned in relation to background image elements.
10.5.6 Future-Proofing Fixed-Layout Content with Text Pop-Ups

By definition, fixed-layout is designed for a single screen size. To future-proof your content, Amazon
recommends using pixels for text size and positioning text blocks. Specifying font size or text position in
percentages can result in fractions of pixels which may be interpreted differently across devices.
10.6 Creating Fixed-Layout Books with Text Pop-Ups with Multipage Background
Images and Text
This section explains the proper way to create pages that contain a single background image and text.
While there are many potential solutions, goal is to ensure that markup is easily portable with
minimal effort. The provided template meets this goal by updating the CSS rules without changing the
HTML.
10.6.1 Using Side-by-Side Images When Orientation-Lock Is Set to Landscape

Many books have a landscape spread that consists of a single image. Other books have a landscape
spread that consists of two side-by-side images stitched together.
In the example below, the landscape spread is 1024 x 600 pixels, which is full-screen resolution for the
Kindle Fire (1st generation). The images for each page should have dimensions exactly half the width of
the full screen: 512 x 600 pixels. The unique parts of each element are labeled using CSS IDs; the
common parts use CSS classes. The left image displays on the left side of the spread. The right image is
Kindle Publishing Guidelines Amazon.com 46

shifted to the right side of the page by defining a margin-left style set to the width of the left side
image.
The end result is two pages stitched together to make a single image to be viewed in landscape mode.
This differs from a synthetic spread, where one page is visible in portrait mode and two side-by-side
pages are visible in landscape mode, which is unique to the comic book-type. Guidance on synthetic
spreads can be found in section 11.4.1.
HTML:
<div class="fs">
<div id="fs9-img" class="lPage"></div>
<div id="fs10-img" class="rPage"></div>
</div>
CSS:
/* Region sized for both pages */
#fs9-img {
background-image: url("../images/005a.jpg");
background-size:100% 100%;
#fs10-img {

background-image: url("../images/005b.jpg");
background-size:100% 100%;
div.fs {
height: 600px;
width: 1024px; /* 2 x page width */
position: relative;
div.lPage {
position: absolute;
background-repeat: no-repeat;
height: 600px;
width: 512px; /* 1 x screen width */
div.rPage {
position: absolute;
background-repeat: no-repeat;
height: 600px;
width: 512px; /* 1 x screen width /
margin-left: 512px; /* this value equals the value of the left side image width */
10.6.2 Positioning Text Blocks

Specify the proper position and font size using percentages. This allows the position to scale consistently
at different resolutions, ensuring compatibility across a wider range of devices and screens. Each
paragraph should be grouped within a single <div> element, with multiple lines broken by <br/>
elements. If custom line spacing is required, assign this via CSS style declarations instead of adding extra
markup such as multiple <div> containers or extra line break tags.
The example in section 10.4.2, Requirement #2: Using Region Magnification (Pop-Ups), expands on the
two-page image example and illustrates how to place text on top of a background image: text is
positioned within a fixed spread block, uses percentages for the margin attribute, and is aligned and
spaced via CSS. Text pop-ups should be positioned so that they cover the corresponding text in the
background.

10.6.3 Aligning Text

By default, text aligns to the upper left corner of the containing HTML element. Many books may have text
that is right-aligned, bottom-aligned, or justified. The easiest way to identify the alignment is to imagine an
outline around the text and identify which edges of the paragraph are associated with a margin (top, left,
right, bottom).
Never use non-breaking space ( ) characters for text alignment. Instead, use CSS top, right,
bottom and left to position <div> elements that contain absolutely positioned text. Use two adjacent
sides to position each <div> element. For example, top and left but never top, left, and bottom. CSS
text-indent and line-height are useful in aligning text within HTML block elements.
11 Creating Fixed-Layout Books with Image Pop-Ups or Virtual Panels

Graphic novels, manga, and comics (hereafter referred to as graphic novels) are the most common fixed-
layout books with image pop-ups or Virtual Panels. They are similar to books, but present a
unique challenge because they tend to be longer and have more complex content.
Graphic novels include a large amount of detail in images that displays on a 1920 x 1200 screen. To
overcome this and other accessibility concerns, Amazon encourages the use of customized content and
our Kindle Panel View feature, which optimizes the content for a high-resolution reading experience. For
more details on Kindle Comic Creator, see section 2.2.3.
This format supports Enhanced Typesetting, provided that there is no hybrid text in the eBook (see
section 11.6).
Important: Nested anchor tags are not supported in fixed-layout books. Fixed-layout books with nested
anchor tags will be suppressed.
11.1 Metadata Guidelines

The OPF file specifies metadata necessary for fixed-layout books. For a demonstration, see the graphic
novel example at www.amazon.com/kindleformat (under the KindleGen Examples heading in the
sidebar).
While similar, the various types of fixed-layout formats have key differences. Unless explicitly stated,
guidance for fixed layout books with image pop-ups or Virtual Panels should not be applied to any other
format, such as fixed-layout books with text pop-ups.
Metadata Description
Layout can be specified using one of the following Required. Identifies the book as having a fixed
metadata fields: layout.
1) <meta Valid values for rendition:layout metadata are

property="rendition:layout">pre- reflowable or pre-paginated. The default
paginated</meta> value is reflowable.
2) <meta name="fixed-layout" Valid values for fixed-layout metadata are
content="true"/>
true or false. The default value is false.

Metadata Description
<meta name="original-resolution" Required. Identifies the original design resolution of

content="1024x600"/> the content . The
pixel dimensions can have any positive integer
value. These values must be in proportion to the
overall aspect ratio of the original content.
Orientation can be specified using one of the Optional (but recommended).

following metadata fields:
Valid values for rendition:orientation
1) <meta metadata are portrait, landscape, or auto.
property="rendition:orientation">lands Locks the orientation of the book to either portrait or
cape</meta> landscape. If the value is auto, both portrait and
landscape modes are supported. The default value
2) <meta name="orientation-lock"
is auto.
content="landscape"/>
Valid values for orientation-lock metadata are
Note: This is not currently supported in iOS.
portrait, landscape or none. Locks the
orientation of the content to either portrait or
landscape. If the value is none, both portrait and
landscape modes are supported. The default value
is none.
<meta name="primary-writing-mode" Required for Virtual Panels in manga with right-to-

content="horizontal-rl"/> left reading order; optional for other fixed-layout
books. Defines page rendering order, reading
mode, and reader navigation (including Kindle Text
Pop-Up, Kindle Panel View, and Kindle Virtual
Panels). Valid values are horizontal-lr,
horizontal-rl, vertical-lr, and vertical-
rl. The default value is horizontal-lr.
The default behavior is horizontal-lr when the

page progression direction is left-to-right or not
specified. Use the value horizontal-rl to set
the page progression direction to right-to-left.
Use the value vertical-rl to set a page

progression direction of right-to-left for Chinese,
Japanese, and Korean books.

10.6 Creating Fixed-Layout Books With Text Pop-Ups With Multipage Background Images and Text

Uploaded by

Copyright:

Available Formats

10.6 Creating Fixed-Layout Books With Text Pop-Ups With Multipage Background Images and Text

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

10.6 Creating Fixed-Layout Books With Text Pop-Ups With Multipage Background Images and Text

Uploaded by

Copyright:

Available Formats

Publishing on Kindle: Guidelines for Publishers

10.5.2 CSS Files For Fixed-Layout Books

10.5.3 Optimizing Content for Full Screen

10.5.5 Using position:absolute for Text on Image

10.5.6 Future-Proofing Fixed-Layout Content with Text Pop-Ups

10.6.1 Using Side-by-Side Images When Orientation-Lock Is Set to Landscape

Kindle Publishing Guidelines Amazon.com 46

/* Region sized for both pages */

Kindle Publishing Guidelines Amazon.com 47

width: 1024px; /* 2 x page width */

width: 512px; /* 1 x screen width */

width: 512px; /* 1 x screen width /

10.6.2 Positioning Text Blocks

Kindle Publishing Guidelines Amazon.com 48

10.6.3 Aligning Text

11 Creating Fixed-Layout Books with Image Pop-Ups or Virtual Panels

11.1 Metadata Guidelines

1) <meta Valid values for rendition:layout metadata are

Kindle Publishing Guidelines Amazon.com 49

<meta name="original-resolution" Required. Identifies the original design resolution of

Orientation can be specified using one of the Optional (but recommended).

<meta name="primary-writing-mode" Required for Virtual Panels in manga with right-to-

The default behavior is horizontal-lr when the

Use the value vertical-rl to set a page

Kindle Publishing Guidelines Amazon.com 50

You might also like