English | Help | Sign in

Please rate your experience using this page


Delighted

Satisfied

Disappointed

Thank you! We appreciate your feedback.

Click here to take our survey and give us detailed feedback. If you're having a problem and need assistance, please contact us.

Help Topics

Contact Us

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

Contact Us

Creating Fixed-Layout Books with Image Pop-Ups or Virtual Panels

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

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.

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 (but recommended).

Valid values for rendition:orientation 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.

<meta name="primary-writing-mode" content="horizontal-rl"/>

Required for Virtual Panels in manga with right-toleft reading order; optional for other fixed-layout books. 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.

The default behavior is horizontal-lr when the page progression direction is left-to-right or not specified. Use the value horizontal-rl to set the page progression direction to right-to-left.

Use the value vertical-rl to set a page progression direction of right-to-left for Chinese, Japanese, and Korean books.

<itemref idref="page-id" properties="page-spread-left"/>

Required for Virtual Panels in comics and manga; optional for other fixed-layout books. Allows publishers to specify page layouts (synthetic spreads) at the page level and can vary throughout the book. The page properties should be specified in the itemref elements (child of <spine> element in the OPF file).

Valid values are page-spread-left, pagespread-right, page-spread-center, facing-page-left, facing-page-right, and layout-blank. The value layout-blank can be used independently or in conjunction with other valid values.

The default value is page-spread-center.

<meta name="book-type" content="comic"/>

Required for all graphic novels; optional for other fixed-layout books. Removes reader functionality (e.g., share) which may not be relevant for certain books such as children's. Valid values are children or comic.



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:

Zoom Factor

When to Use

Required Image Resolution

100%

Avoid using this zoom factor. It offers no magnification and poses an accessibility challenge for users.

1920 x 1200 pixels

125%

Only use this zoom factor when it is absolutely necessary to enlarge a very large panel. This allows the user to see a large action scene, but with the downside of limited enlargement.

2400 x 1500 pixels

150%

This is the default and preferred zoom factor. Use this zoom factor whenever possible.

2880 x 1800 pixels

200%

Use this zoom factor for small text.

3840 x 2400 pixels

250%

Only use this zoom factor when two physical pages are stitched together in the HTML file and displayed at once and content appears especially small as a result. The downside is that the enlarged panel only represents a small portion of the original page.

4800 x 3000 pixels

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

    The Guided View reading experience has been developed by comiXology. See a visual introduction to the Guided View experience.

    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.


An unexpected error occurred. Please try again later.
Your session has expired

Please sign in to continue

Sign In
edit