4.3.5 Recommendation #5: Future-Proofing Fixed-Layout Content in Children’s Books. Amazon Kindle

Publishing on Kindle: Guidelines for Publishers

4.3.5 Recommendation #5: Future-Proofing Fixed-Layout Content in Children’s Books

By definition, fixed-layout is designed for a single screen size. To future-proof your content, Amazon recommends using percentage or em values instead of pixels or points for all positioning of text blocks and Region Magnification pop-ups. Specifying text position or font size with pixels prevents the content from scaling to new devices.

For example, the children’s book example at www.amazon.com/kindleformat (under the KindleGen

Examples heading) includes a sample style sheet (style-150.css) that demonstrates the minimal set of changes required to scale to a device that is 150% larger. These changes are limited to a base font-size and changes in the container height and widths (approximately 5 updates).

4.3.6 Recommendation #6: Including Specific Fonts

Fixed-format titles do not 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-format 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

*/

}

4.3.7 Recommendation #7: Including HTML Front Cover

Include an HTML front cover page with the cover image set as a background image. This will act as the beginning of the book. This HTML page must be the first page listed in the <spine> in the OPF file, with

the linear attribute assigned to yes. See sections 3.2.2 and 3.2.3 for other guidelines surrounding

cover images.

4.3.8 Recommendation #8: Including Back Cover

While Kindle ebooks in previous formats and reflowable text 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 fixedformat children’s book design. Remove barcodes, price listings, and promotional content from the back cover image. Do not include popups for any text on the back cover unless the back cover includes story text.

4.4 Creating Children’s Books 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.

4.4.1 Using Side-by-Side Images to Form a Double-Page Spread When Orientation-Lock Is Set to

Landscape

Many books have two-page spread that consists of a single image. Other books have a two-page spread that consists of two side-by-side images.

In the example below, the double-page spread is 1024 x 600 pixels, which is full-screen resolution for the

Kindle Fire. 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.

Kindle Publishing Guidelines Amazon.com 34

Publishing on Kindle: Guidelines for Publishers

HTML

<div class="fs">

<div id="fs1-left" class="leftPage"></div>

<div id="fs1-right" class="rightPage"></div>

</div>

CSS

/* Region sized for both pages */ div.fs {

height: 600px;

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

position: relative;

} div.leftPage {

position: absolute;

background-repeat: no-repeat;

height: 600px;

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

} div.rightPage {

position: absolute;

Kindle Publishing Guidelines Amazon.com 35