Certain books have elements with fixed dimensions and text positioning that don't allow fonts to be resized or text to be reflowed. For example, coffee table books and children's picture books have full-page images with text set precisely in relation to the background art, although this format isn't exclusive to these types of books.

Fixed-layout books don't support reflowable text and should only be used when the entire book is well suited to a fixed-layout format. Books can't be partially reflowable or partially fixed-layout. See details on creating this type of eBook with Kindle Kid's Book Creator.

This format does not currently support Enhanced Typesetting.

Important: Nested anchor tags are not supported in fixed-layout books. Fixed-layout books with nested anchor tags will be suppressed.

Contents

• Metadata Guidelines
• Cover Image Guidelines
• Text Guidelines
• Content Requirements
• HTML and CSS Guidelines
• Creating Fixed-Layout Books with Text Pop-Ups with Multipage Background Images and Text

---

Metadata Guidelines

The OPF file specifies metadata necessary for fixed-layout books. While similar, the various types of fixed-layout formats have key differences. Unless explicitly stated, guidance for fixed-layout books with text pop-ups should not be applied to any other format, such as fixed layout books with image pop-ups or Virtual Panels.

Metadata	Description
Layout can be specified using one of the following metadata fields: 1) <meta property="rendition:layout">prepaginated</meta> 2) <meta name="fixed-layout" content="true"/>	Required. Identifies the book as having a fixed layout. Valid values for rendition:layout metadata are reflowable or pre-paginated. The default value is reflowable. Valid values for fixed-layout metadata are true or false. The default value is false.
<meta name="original-resolution" content="1024x600"/>	Required. Identifies the original design resolution of the content ("1024x600" is only an example). 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 following metadata fields: 1) <meta property="rendition:orientation">lands cape</meta> 2) <meta name="orientation-lock" content="landscape"/> Note: This is not currently supported in iOS.	Optional (but recommended). Valid values for rendition:layout metadata are portrait, landscape, or auto. Locks the orientation of the book to either portrait or landscape. If the value is auto, both portrait and landscape modes are supported. The default value is auto. Valid values for orientation-lock metadata are 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" content="horizontal-rl"/>	Optional. 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 verticalrl. 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.
<meta name="book-type" content="children"/>	Optional for children's books. Removes reader functionality (e.g., share) which may not be relevant for certain books such as children's eBooks. Valid values are children or comic.

---

Cover Image Guidelines

While Kindle books in reflowable format do not use back covers, it provides a sense of closure to the narrative for children's content. It is best to include a back cover as part of the design of children's books. (Non-children's books that use this format do not need to provide a back cover.) Remove barcodes, price listings, and promotional content from the back cover image. Text pop-ups are required for story text on the back cover and recommended but not required for other back cover text.

---

Text Guidelines

Fixed-layout titles don't allow users to choose and vary fonts. Using CSS @font-face and packaging fonts with the title guarantees book design look-and-feel to be consistent across all devices and screens. This not only ensures that the exact fonts used for the source are used in the fixed-layout title, but that HTML text has more fluid rendering between the page view and the Region Magnification view.

Example:

@font-face { font-family: "Arial"; /* assigns the name of the font to use */ src: url(../fonts/arial.otf); /* includes the file for the correct font */ }

Accessibility Tip: Thin fonts are harder to read and can impact the perceived contrast of the text with the background. Amazon recommends avoiding thin fonts for the body text of your manuscript.

---

Content Requirements

Requirement #1: Using HTML File Structure

Fixed-layout content must have a single HTML file for each page represented on a Kindle device. This can be accomplished by using one image in the HTML file or by using the HTML file to stitch two images together to be viewed as one page when orientation-lock is set to landscape.

Portrait orientation lock:

print page = 1 HTML file

Example:

Landscape orientation lock:

2 print pages (1 two-page image) = 1 HTML file

Example:

Requirement #2: Using Region Magnification (Pop-Ups)

Fixed-layout content does not allow the user to change the font size; allowing font sizes to change could obfuscate content relevant to storytelling. Kindle uses Region Magnification (pop-ups) to enlarge fixedlayout text without altering the original layout. For an example of Region Magnification, see the image near the end of this section.

The user activates Region Magnification by double tapping an "active area" on touch screen devices. (On non-touch screen devices, clicking the up arrow on the 5-way controller selects the region and clicking the center button activates Kindle Text Pop-Up or Kindle Panel View.) During Region Magnification, the active area (source element) is hidden and the magnification area (target element) is displayed. When an eBook is set up to support Region Magnification, KindleGen automatically detects the Region Magnification code and sets the Region Magnification metadata value in the OPF file to "true".

To support Region Magnification, the following steps are required:

1. Set the active area by creating a well-defined HTML anchor (<a>)element around the text to be enlarged. The anchor must specify the app-amzn-magnify class. The anchor should also have the following attributes stored in a JSON object as part of the data-app-amzn-magnify value:
   1. "targetId":"<string:elementId>" = unique element id of the magnification area (position and font size are set in CSS file)
   2. "sourceId":"<string:elementId>" = unique element id of the source that will be magnified
   3. "ordinal":<integer:reading order> = reading order of the magnification areas (the order in which panels appear as part of the reading flow). This is required for all text that uses Region Magnification.
2. When magnification is activated, the source text is no longer displayed. Create a target <div> element that is aligned to completely cover the text being magnified and positioned to minimize covering the background art of the page. This ensures that when a user activates Region Magnification, the source text will not disappear from the page view. It is also important to not position a pop-up directly abutting the right or bottom edges of the screen. Differences between device types can create content overflow error if pop-ups are too close to these edges. Check content on as many different kinds of devices as possible before publishing.
3. The font size of text in the Region Magnification <div> should be set to 150% of the regular font size on the page. There are several exceptions to this:
   • One exception is when the text on the page is so large that magnifying it to 150% would make it harder to read instead of improving readability. Region Magnification is not necessary for text with a height of at least 4mm in children's content or a height of at least 2mm in nonchildren's content on a 7" device.
   • Another exception is when the text on the page needs to be increased by more than 150% to improve readability in the Region Magnification <div>. For example, if the font size of the text on the page is 45%, the font size of the text in the Region Magnification <div> may need to be magnified to 225% to be readable.

Fixed-layout sample page

Same sample page with Region Magnification activated

Example:

<div id="fs3-1-org" class="txt fs3-txt1"> <a class="app-amzn-magnify" data-app-amzn-magnify='{"targetId":"fs3-txt1-magTarget", "sourceId":"fs3-1-txt", "ordinal":2}'> <p id="fs3-1-txt">Lorem Ipsum dolor sit amet.</p></a></div> … <div id="fs3-txt1-magTarget" class="target-mag fs3-txt1"></div>

---

HTML and CSS Guidelines

Applying CSS Reset

Apply a CSS reset to fixed-layout books. A CSS reset removes the inconsistent styles that browsers automatically apply, such as font sizes, margins, etc. Adding a CSS reset, such as the YUI reset, removes these inconsistencies, allowing designers to build on a dependable styling template.

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.

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 HD 8.9" 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.

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.

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, such as children's picture books with text specifically positioned in relation to background image elements.

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.

---

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, Amazon's 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.

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 shifted to the right side of the page by defining a margin-left style set to the width of the left side image.

The 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.

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 */ }

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.

See an example that 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.

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 (&nbsp;) 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.