Publishing on Kindle: Guidelines for Publishers
4.2 Content Requirements
4.2.1 Requirement #1: Using HTML File Structure
Fixed-layout content must have a single HTML file for each page represented on a Kindle device.
Publishers may use the OPF metadata to create double-page spread reading experiences.
Portrait orientation lock:
1 print page = 1 HTML file
Example:
Landscape orientation lock:
2 print pages (1 two-page spread) = 1 HTML file
Example:
4.2.2 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 example below.
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
Kindle Publishing Guidelines Amazon.com 31
Publishing on Kindle: Guidelines for Publishers 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.
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 ( http://www.w3schools.com/json/json_syntax.asp
) as part of the data-app-amzn-magnify value: a. "targetId":"<string:elementId>" = unique element id of the magnification area
(position and font size are set in CSS file) b. "sourceId":"<string:elementId>" = unique element id of the source that will be magnified c. "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. 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. When magnification is activated, the source text is no longer displayed. It is also important to not position a popup directly abutting the right or bottom edges of the screen. Differences between device types can create content overflow error if popups 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.
•
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
Example:
Kindle Publishing Guidelines
Same sample page with Region Magnification activated
Amazon.com 32
