This template is a companion to:

ISBN: 978-0-9821538-5-7

Available in Kindle format exclusively
at Amazon or from the publisher.

For further information,
or to purchase a copy, please visit:

www.fantasycastlebooks.com

NOTE: Double-click the image above to view it at full size!

This work is licensed under a
Creative Commons Attribution-ShareAlike 3.0
Unported License (CC BY-SA 3.0).

This template is a companion project file
designed for use with the ebook tutorial
"How to Make Kindle Comics & Children's Books"
by R. Scot Johns

You are free to use its structure
as the basis for your own projects,
but all embedded text and image content
is copyright material and must be removed
from any commercial works based on it.

The template itself may be freely distributed,
along with any or all of its content,
so long as this credit page is included.

Kindle Fixed-Layout Template

Table of Contents

Image Insert Method 1: CSS............................5
Image Insert Method 2: HTML......................6
Landscape Image 2-Page-Spread...............7
Mag Region Example 1: SourceId...............9
Text Positioning Examples...............................11
Mag Region Example 2: TargetId.............13
Image Switching Example...............................14
Mag Region Example 3: PanelView........15
Mag Region Example 4: LightBox.............17

NOTE: The entries above contain active links to the relevant page. The default hyperlink styling has been altered using CSS.

This balloon
will disappear when
you double-tap the
background!

This page uses the “page-spread” spine item property to connect it with the next page in the landscape view. *

View this page in Landscape
orientation to see these
two separate images
combined into one!

* This feature is not yet
available on all Kindles!

The previous pages
use the “facing-page” spine
property to insert a space between them.

Z

All remaining pages include “live” text layers that are not part of the image, and can be interacted with!

Tap & hold the text to access notes,
highlights, search and dictionaries.
You can also bookmark a page!

Double-tap the image to
view it without
the layers!

Look! There's no space between the pages!

Z

Example of Mag Zoom Tap Target using “sourceId”

Double-tap this area to view it larger! Double-tap expanded text boxes to dismiss them and return to normal size.

This example shows how the default text disappears when zoomed. The magnified content can be in any location you choose!

This example also illustrates how to position multiple Tap Targets on the same page, and adds some formatting to the magnified text!

An example of Region Magnification using alternate text placement.

4

U

Double-tap the correct answers to complete the quiz!

Cogito
Ergo
Sum

Z

Tap to Translate!

This example demonstrates how to fill a magnified region with a background image.

Text
Positioning

This page demonstrates

how to position text so that

it appears to be wrapping

around an image.

This section of text

is right-aligned and

uses both word &

letter spacing to

control its width.

Line breaks are

used to control

the length of

each individual

line of text.

This section uses the

"text-indent" element

to position the line

around a curved edge.

Tap the text!

Example of Mag Zoom Tap Target using “TargetId”

Knock!

Knock!

Who could that be?

Double-tap the dialogue balloon to see who's at the door!

The example below shows how to swap one image for another when there is no text to anchor the Tap Target.

Double-tap the canvas to paint it!

Example of Region Mag using PanelView

The following page shows how to magnify selected sections of an image and dim the background using accurately positioned Mag Regions and Lightbox fills.

One way to make positioning Tap Targets easier is to temporarily fill them in with a semi-transparent color so that you can see exactly where they are!

Lucyloo!

Uh-oh...

Ta-da!!

Using a TargetParent with a Lightbox fill

Tap here for an example of a lightbox used to fill a text mag target with a semi-transparent background color

Tap anywhere!

Example of a full-page Tap Target that changes the entire page