Creating Fixed-Layout Books Without Pop-Ups

English | Help | Sign in | Give Feedback

Help Topics

Contact Us

Have feedback? Can't find your answer in our Help pages?

Creating Fixed-Layout Books Without Pop-Ups

In cases where a fixed layout is needed to maintain the layout of the original book, but where text selection, dictionary, and highlighting are still required, fixed-layout without pop-ups may be used. This conversion technique is ideal for content that has text large enough to be easily read without magnification, which can also be accomplished by redesigning the eBook to optimize for digital reading (on a 7" tablet device, capital letters in body text must be at least 2mm high in non-children's books and at least 4mm high in children's books).

The HTML and CSS of this format follows the specifications for Fixed-Layout Books with Text Pop-Ups, including the CSS reset and embedded fonts. Fonts must be embedded, as is the standard for all fixed-layout books.

This format does not currently support Enhanced Typesetting.

Metadata Guidelines

The OPF file specifies metadata necessary for fixed-layout books. Unlike other fixed-layout books, this format does not include meta name="book-type" or meta name="RegionMagnification".

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. 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. Amazon recommends only unlocking orientation when text is readable in both portrait and landscape.
<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 value is horizontal-lr.

Text Guidelines

In this format, each page contains a background image that is larger than the screen size, so that the page renders a high-quality, readable image. The text can then be created with either of the two following methods and both methods can be used in the same book. With either method, capital letters in body text must be at least 4mm high for children's content, or 2mm high for other content, when viewed on a 7" device.

Live HTML Text

In this method, the background image is stripped of text and the majority of text in the book is rendered as live HTML text. The text can be repositioned as needed for a good eBook experience. This method also allows search and dictionary functionality.

HTML:

<p id="p3_2" class="ptxt">Sometimes I go outside

<br />to investigate. I check everything.

<br/>I sniff rocks. I bite leaves. You

<br />never know.

<br/>I must always be on guard.<br/></p>

</div>

CSS:

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

Invisible Text Overlay

For text that is part of an image, or is irregularly sized, angled, or curved, you can capture that text as part of the background and use invisible overlay text (using the opacity:0 property in the CSS file) to enable selection, dictionary lookup, and search. The invisible overlay text should be positioned directly over the corresponding text in the base image, and should be sized so that the highlight area of the invisible text corresponds to the text in the base image.

HTML:

<div class="overlay" id="o3_5">Honey!</div>

</div>

Due to the angled text, every word must be positioned individually so that the invisible HTML text overlays the correct word.

CSS:

.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%; }

Make more money and reach more readers through Kindle Unlimited. Learn More

Total KDP Select Author Earnings

October 2024

•

$58.2 Million

How would you rate your experience using this page?

Visit our help center for resources to common issues

Thank you for your feedback.

Help Topics

Contact Us

Creating Fixed-Layout Books Without Pop-Ups

Metadata Guidelines

Text Guidelines