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

In this series on how to create a fixed format ebook, 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

Screen Shot 2014-09-03 at 7.06.15 PM

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.

Screen Shot 2014-09-03 at 7.06.29 PM

Screen Shot 2014-09-03 at 7.07.24 PM

Screen Shot 2014-09-03 at 7.07.35 PM

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.)

Screen Shot 2014-09-03 at 7.07.59 PM

Screen Shot 2014-09-03 at 7.08.17 PM

Screen Shot 2014-09-03 at 7.08.41 PM

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

Screen Shot 2014-09-03 at 7.08.53 PM

Screen Shot 2014-09-03 at 7.09.19 PM

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

Screen Shot 2014-09-03 at 7.10.20 PM

Screen Shot 2014-09-03 at 7.12.34 PM

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!

Screen Shot 2014-09-03 at 7.12.44 PM

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.

fixed_format_KF8_css

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:

fixed_format_page_01 fixed_format_page_02

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:

fixed_format_KF8_example

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!

Advertisements

One Reply to “How to Create a Fixed Format Ebook (Part 6): KF8 Magnify Text”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s