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
