Graphic novels, manga, and comics (hereafter referred to as graphic novels) are the most common fixedlayout books with image pop-ups or Virtual Panels. They are similar to children's books, but present a unique challenge because they tend to be longer and have more complex content.

Graphic novels include a large amount of detail in images that displays on a 1920 x 1200 screen. To overcome this and other accessibility concerns, Amazon encourages the use of customized content and our Kindle Panel View feature, which optimizes the content for a high-resolution reading experience. See details on Kindle Comic Creator.

This format supports Enhanced Typesetting, provided that there is no hybrid text in the eBook (see details on hybrid text).

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

Contents

• Metadata Guidelines
• Image Guidelines
• Panel View (Region Magnification)
• Virtual Panels in Comics and Manga
• Optimizing Content for the Graphic Novel Experience
• Text Guidelines
• Guided View

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 image pop-ups or Virtual Panels should not be applied to any other format, such as fixed-layout books with text pop-ups.

Image Guidelines

When optimized for the 2013 Kindle Fire HD 8.9", graphic novels should maintain a 1920 x 1200 aspect ratio. The image resolution will differ depending on the zoom factor required for Kindle Panel View.

However, Amazon recommends planning for a high quality reading experience at 2X magnification. Images must be in the JPEG format. Amazon recommends using an image resolution of at least 300 ppi.

There are five standard zoom factors:

Image quality for graphic novels requires that images follow the resolution standards listed in this section and maintain a consistent aspect ratio. Most importantly, optimize images for clarity of background art as well as readability of text. These two factors guarantee the highest quality for the graphic novel format.

Panel View (Region Magnification)

Panel View for graphic novels offers a unique reading experience. It addresses accessibility and lets users experience the flow of action on each page in a high-resolution, easy-to-use manner. Users can dismiss Panel View at any time to view the entire page. For an example of Panel View, see the images in this section.

The user activates Panel View by double tapping a "tap target". The active area (source element) is hidden and the Panel View (target element) is displayed.

To support Panel View, the following steps are required:

1. Set the tap target by creating a well-defined container (<div>) element that contains an anchor (<a>) element. The <div> provides the size and position of the tap target. The <a> is sized to fill the <div> and 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 Panel View HTML element that represents the enlarged region
   2. "ordinal":<integer:reading order> = reading order of the magnification areas (the order in which panels appear as part of the reading flow)
2. Create a target view panel <div> element that is sized and positioned to display the action that best reflects the tap target.
   
   

   Snapshot of fixed-layout content

   Snapshot of the same content with Panel View activated

   Example:

   <div> <img src="images/page_002.jpg" alt="Comic Book Images" class="singlePage" /> </div> <div id="page_002-1"> <a class="app-amzn-magnify" data-app-amzn-magnify='{"targetId":"page_002-1magTargetParent", "ordinal":1}'></a> </div> … <div id="page_002-1-magTargetParent" class="target-mag-parent"> <div class="target-mag-lb"> </div> <div id="page_002-1-magTarget" class="target-mag"> <img src="images/page_002.jpg" alt="Comic Book Images"/> </div> </div>

   
   

   ---

   Virtual Panels in Comics and Manga

   The Virtual Panels feature is activated for comics and manga books in the absence of publisher-provided panels. The RegionMagnification metadata is used to identify whether the publisher has provided panel information. If the publisher has included Region Magnification panels on any page, the Kindle Virtual Panel view is not enabled.

   By default, every page is divided into four panels based on the primary-writing-mode value. The examples below indicate the order of the panels.

   Example:

   Portrait mode:

   

   Horizontal-lr, Horizontal-rl

   

   Vertical-rl, Vertical-lr

   
   

   Landscape mode:

   

   Vertical-lr and Horizontal-lr, Horizontal-rl and Vertical-rl

   Some devices accommodate synthetic spreads:

   

   Vertical-rl, Vertical-lr

   Requirement #1: Using a Synthetic Spread When Orientation-Lock Equals None

   If orientation is not locked, content should be designed for both portrait and landscape mode. Some devices show a synthetic spread with two pages side-by-side in landscape mode. Every page intended to be used in a synthetic spread is expected to have a defined paired page in landscape orientation. In portrait orientation, the pairs are ignored.

   Pages to be used in synthetic spreads should be tagged with the properties page-spread-left or page-spread-right. Every left page should have a right page associated and vice-versa. Single pages can be centered on the device in landscape mode by using the property page-spread-center.

   

   In portrait mode, the two pages will be rendered separately:

   

   If none of the properties are specified or if a page is tagged page-spread-left without a matching page-spread-right (or vice-versa), Kindle assumes page-spread-center and centers pages with no page-spread property when the device is in landscape mode.

   The following example assumes primary-writing-mode equals horizontal-lr or vertical-lr.

   Example:

   <spine> <itemref idref="page1" /> <!--NOTE: assumed to be properties="page-spread-center" --> <itemref idref="page2" /> <!-- NOTE: assumed to be properties="page-spread-center" --> <itemref idref="page3" properties="page-spread-left"/> <!-- NOTE: synthetic spread's left viewport --> <itemref idref="page4" properties="page-spread-right"/> <!-- NOTE: synthetic spread's; right viewport --> </spine>

   The following example assumes primary-writing-mode equals horizontal-rl or vertical-rl.

   Example:

   <spine> <itemref idref="page1" /> <!-- NOTE: assumed to be properties="facing-page-right" --> <itemref idref="page2" /> <!-- NOTE: assumed to be properties="facing-page-left" --> <itemref idref="page3" properties="page-spread-right"/> <!-- NOTE: synthetic spread's right viewport --> <itemref idref="page4" properties="page-spread-left"/> <!-- NOTE: synthetic spread's left viewport --> </spine>

   In cases where a left page does not have an equivalent right page (or vice-versa), the publisher may insert a blank HTML page and add the property layout-blank to the page, unless it is the last page. Optionally, the blank page can include the book title and watermark by design.

   Pages with the layout-blank property are only rendered in landscape mode and are ignored in portrait mode.

   In some cases, the publisher may wish to insert a blank page that always renders in both portrait and landscape modes. In this instance, do not use the layout-blank property. Use the same synthetic spread rules as noted above and reference an image file that contains a "blank" JPEG.

   The following example assumes primary-writing-mode equals horizontal-lr or vertical-lr.

   Example:

   <spine> <itemref idref="page1" /> <!-- NOTE: assumed to be properties="page-spread-left" --> <itemref idref="blank-page" properties="layout-blank"/> <!-- NOTE: assumed to be properties="page-spread-right". Ignored in portrait mode. --> <itemref idref="page2" properties="page-spread-left"/> <!-- NOTE: synthetic spread's left viewport --> <itemref idref="page3" properties="page-spread-right"/> <!--NOTE: synthetic spread's right viewport --> </spine>

   
   

   ---

   Optimizing Content for the Graphic Novel Experience

   Optimizing Tap Targets

   Tap targets should effectively cover 100% of the screen. This ensures that the user gets a magnified experience whenever the user double taps the graphic novel.

   
   

   Optimizing View Panels

   View panels should be 150% of the tap target by default. It is acceptable to use different size view panels to emphasize a specific action scene within the tap target.

   Position view panels so that they cover the corresponding image in the background. They should be positioned over base panels and aligned to margins where possible.

   When preserving context across multiple panels, it is acceptable to overlap slightly with other view panels.

   

   To use the default 150% default zoom factor, an action scene often needs to be divided into two view panels (typically a left and right or top and bottom). This is a better user experience than using a smaller zoom factor, because it preserves accessibility and gives the user a higher resolution reading experience.

   Split the tap targets so that the first tap target is between 50 and 75% of the width of the entire area, and the second tap target is the remaining amount necessary to reach 100%. This ensures that when a user double taps an area near the middle of the action panel, they experience the first view panel first, and then the second view panel when they move forward.

   To preserve the flow of the action, view panels should display a small amount of overlapped action.

   First view panel of an action scene divided into two view panels

   Second view panel of an action scene divided into two view panels

   
   

   ---

   Text Guidelines

   For fixed-layout books with image pop-ups: Images should be at least 300 ppi, and text should be crisp and legible, with no pixilation or blur, and capital letters must be at least 2mm high in pop-ups, when viewed on a 7" device. As a best practice, this usually means 150% magnification or greater.

   For fixed-layout with virtual panels: Images should be at least 300 ppi and text should be crisp and legible, with no pixilation or blur when magnified to 2mm high, when viewed on a 7" device.

   To display large amounts of text, Amazon suggests a hybrid text treatment that mixes the experiences of the graphic novels and children's books. Amazon recommends limiting the use of the hybrid text treatment to sections of text that are too wide to be magnified effectively. The hybrid text treatment should mimic the formatting of the text it represents in line-height, italic and/or boldface, and general appearance. This provides a better user experience.

   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.

   Enhanced Typesetting does not support graphic novels with hybrid text.

   

   Hybrid Text HTML Example:

   <div id="Title_page-2-magTargetParent" class="target-mag-parent"> <div class="target-mag-lb"></div> <div id="Title_page-2-magTarget" class="target-mag" amzn-ke-id-rtbar="amzn-ke-idrtbar"> <div class="target-mag-text" id="amzn-ke-id-rtbar-Title_page-2-magTarget"> <span id="amzn-ke-id-rtbar-Title_page-2-magTarget-2"></span> <span class="" id="amzn-ke-id-rtbar-Title_page-2-magTarget-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ab aquiline regem. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui official deserunt mollit anim id est laborum.</span>

   Hybrid Text CSS Example:

   div.target-mag div.text{ height: 100%; padding: 5px; background-color: #000000; font-size: 150%; font-family: "Arial"; }

   
   

   ---

   Guided View

   Guided View is a series of enhancements to the comic eBook reading experience that are now available for some Kindle comics. These enhancements allow readers to view a comic on a panel by panel basis suitable for mobile devices in a way that mimics the natural motion of the user's eye through the comic. Guided View animates panel to panel movement with each swipe to give a clear indication of how the story progresses across each page. Guided View features include:

   • A guided panel by panel reading experience using the panel order set by the publisher
   • Panels magnified to full-screen size and centered
   • Custom masking colors around each panel when magnified

   
   

   Guided View is automatically applied to compatible Kindle Comics and uses the existing Panel View code to properly position panels in Guided View. Amazon is continuously working to make Guided View compatible with more titles and will automatically enable Guided View enhancements for your Kindle comic when possible.