User`s guide

Publishing on Kindle: Guidelines for Publishers

dismiss Panel View at any time to view the entire page. For an example of Panel View, see the following

images.

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:

a. "targetId":"<string:elementId>" = unique element id of the Panel View HTML

element that represents the enlarged region

b. "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>

</div>

<a class="app-amzn-magnify" data-app-amzn-magnify='{"targetId":"pagehij-1-

magTargetParent", "ordinal":1}'></a>

</div>

Kindle Publishing Guidelines Amazon.com 43