How to Create a Fixed Format Ebook (Part 6): KF8 Magnify Text

In this series, I have covered how to setup a fixed format ebook, how to add images, how to place text, how to embed fonts, and how to implement the read aloud function. In this post I’ll go over how code for KF8, so that hot spots (where you touch the page) can magnify text. This only works for Kindle ebooks, so you will have to create/copy your current epub file and make a new one. You will also want to delete all the code for the read aloud functionality, since it will not work for Kindle.

But first, some good news! Recently, Amazon released a new tool that makes it really easy to create illustrated ebooks for Kindle, which includes the text magnification. You can download the tool here (available for Mac and Windows). So now there are two ways to code KF8, and I’ll cover them both.

Kindle Kids Book Creator

After you download the Kindle Kids’ Book Creator, open it up to make your ebook. Just follow the instructions, step by step, and fill in your book information.

Next, choose whether to get your cover file from a PDF version of the book (if you already have a print version) or from an image file (.jpg, .png, etc.)

Now, choose the images for the rest of your book.

Click on “Add Pop-Up” in the upper left corner, and add your text.

You can even easily embed your own fonts, under “Add Font” in the top menu, and you can choose the color of the text. (I added my Smilage font). What a cool program!

Manually Coding KF8

Implementing KF8 code manually is a little more work than the read aloud code for iPad. The main changes you will have to make will be in the CSS file, and you will need to add code for every single page. Just like in the read aloud post, I recommend using a text editor, such as Text Wrangler, to add the magnification.

Below is the CSS for the first two pages of my Apple’s Adventures picture ebook.

Notice how there are three main sections in the CSS. In KF8, each page is actually a spread. That means you have half the number of HTML pages to work with, and each one deals with 2 pages worth of text an images (a spread). This first section splits up the spreads:

div.fs {
height: 600px;
width: 1024px;
position: relative;
}
div.leftpage {
position: absolute;
background-repeat: no-repeat;
height: 600px;
width: 512px; /* Half the fixed spread width */
}

div.rightpage {
position: absolute;
background-repeat: no-repeat;
height: 600px;
width: 512px;
left: 512px;
}

The second section is the code that specifies the magnification (code enclosed in /* just means it’s a comment):

/* UI region displayed around zoomed text */
div.target-mag {
/* Box model */
position: absolute;
display:none;

/* UI Styling */
font-size: 150%; /* Relative Zoom */
border: 5px solid #cdcdcd;
border-radius: 8px;
padding: 5px;

/* Sample background
background-image: url(“images/image-background.jpg”);
opacity:.95;
*/

background-color: #FFFFEF;
}

The third section tells where to place the text and image on the page, and where the magnified text should appear:

/* Blocks of text on individual pages */
/* Page 1 */
.fs1-txt1 {
top: 10%;
left: 11%;
}

#fs1-txt1-magTarget {
top: 4%;
left: 3%;
}

#fs2-img
{
background-image: url(“images/page02.jpg”);
}

.fs2-txt1 {
top: 10%;
left: 11%;
}

#fs2-txt1-magTarget {
top: 4%;
left: 3%;
}

Once you have the CSS code set up, all you need to do is add a few lines to the HTML/XHMTL. Here are what the first two pages of my book look like in code form:

A couple things to keep in mind. One my page 1, I left the “leftPage” blank, because I do not have an image for that side of the page. The other main thing to keep in mind is to keep track of the numbers in your code. For example, this

<a class=”app-amzn-magnify”
data-app-amzn-magnify='{“targetId”:”fs1-txt1-magTarget”, “sourceId”:”fs1-1-txt“, “ordinal”:1}’>
<div id=”fs1-1-txt”>

is about the area of text on the page I wanted magnified (notice the red for emphasis). For the second area,

<div class=”txt fs2-txt1″>
<a class=”app-amzn-magnify”
data-app-amzn-magnify='{“targetId”:”fs2-txt1-magTarget”, “sourceId”:”fs2-1-txt“, “ordinal”:2}’>
<div id=”fs2-1-txt”>

the 1 is replaced by 2. And so on. This ensures that as a reader taps through, the text will magnify in the correct order.

Once you’ve finished, your ebook will look something like this when the hotspot is tapped on:

And now you have everything you need to know to create your own fixed format ebook. If you have any questions or tips to add, please share in the comments!