UPDATE: We’ve updated the info below to better reflect the current Amazon/Kindle marketplace.

LAST UPDATED 10/28/09

Time for Part 2 (of 3) of our vundubar CREATING COMICS FOR THE KINDLE tutorial series!

You can read PART 1: OPTIMIZING THE IMAGES by CLICKING HERE.

You’ve got your images all squared away. It’s yea many pages in length and they’re all lined up in the proper reading order. Not that they have to be, but I recommend making the next part easy on yourself and make sure to call all the images something simple and obvious, like “page1.png”, “page2.png”, etc.

What next? Next it’s time to create the dreaded HTML Document that acts as the actual layout for your Kindle comic. All you need to do is have all your images in a single folder on your computer, then add an HTML doc titled “index.html”. So long as the images and HTML doc are all within the same folder, the link to the images can be relative and so all you need to use are the image files’ names.

For those unfamiliar with HTML, here’s a sample:

<img src=”page1.png”><img src=”page2.png”><img src=”page3.png”>, etc, etc. This puts all the images in the proper order when read on the Kindle when you upload the folder as a single ZIP file.

SUPPORTED HTML

There’s very little HTML supported by the Kindle currently, nearly none that helps you in the image crafting department. You can’t center an image with HTML, so you’ll need to do what was suggested in PART 1 of this tutorial series and center the art within a 525 x 640 white or black background (this allows every image to be the maximum 525 x 640 bar none). You definitely shouldn’t resize the images with “width” or “height” HTML and alternate text or style elements are generally pointless. Image-wise, the only HTML you should be using is the <img src=”nameofimage.png”> tag.

So what will you need HTML for? Three major things: a Table of Contents, Special Features (an Introduction, Foreword, Afterword, etc.), and defining your book’s Start Point.

TABLE OF CONTENTS

Here’s where the actual HTML composing begins to come into play. You’ll want a TOC for your comic, not just to have a nifty list of chapters and/or special features, but also for easy navigation through the comic itself. Kindle page load times are radically slow by mobile device standards, so being able to jump easily to page 10, 20, 30, 40, etc. is key. Give your readers multiple jump-to points in the TOC.

I’d recommend writing your HTML doc with a code editing software such as KOMPOZER. It’ll automatically add missing HTML you may have left out and allow you to visually edit your doc whenever possible. However, just to be thorough, here’s how any HTML doc should begin. Insert the following code to begin and end the doc:

You’ll place all the other HTML in-between the first two and the last two tags there. To insert a Table of Contents, user the following toc div tag:

Then construct your Table of Contents between the “div” tags. So if you want a TOC that looks like this:

You’d type up the following in HTML:

In that example, the <b></b> tags are for BOLD, the <br> tags are for line breaks, the <li></li> tags make a nice ordered indented bullet-point list for the pages, and the <u></u> tags make underlined text.

But what you’ll also want are LINKS – a list that is clickable and will properly send readers to the specified locations in the book. To manage this, we use ANCHOR TAGS. For the anchor link used in the TOC, use: <a href=”#name-of-anchor”></a> Then for the anchor name (how we name the anchor in the first place) we place the following code around the proper point in the book: <a name=”name-of-anchor”></a> (note there is no pound sign used in the anchor name, just the anchor link).

So for instance, the above long example, with anchor links, becomes:

And then for your images you’ll add the anchor names, so they’ll look like so (as a snippet of an example):

And so on. Simple wrap the <a name=”"></a> tags around the image or point in the comic you want the entry int he TOC to lead to, and readers will then be able to click on the line and be taken right to it.

IMPORTANT: Amazon automatically creates a “Preview” for potential buyers to download and read before buying. Whatever you make your “Chapter One” (the pages between the first TOC link and the second TOC link) will become this preview. With one additional possible customization we’ll get to in a mo’.

SPECIAL FEATURES

When it comes to the NON-IMAGE portions of your comic, you have two options:

1. Make them images anyway.
2. Make them HTML.

It’s a coin-toss as to which is the better choice, depending on what you want the final result to be. On the one hand, the HTML supported by the Kindle is exhaustively limited, meaning there’s hardly anything in the way of design that you can add to your Foreword, or Afterword, or Letter’s Page. On the other hand, the plain text as it displays on the e-Ink Kindle screen is beauteous in its own right. It’s crystal clear and easy on the eyes. It makes for good reading, arguably better reading than any more decorative display could offer.

But if you want atmosphere, you’ll need to use images. Dice up your full-page comic-book-sized text into little Kindle-sized paragraphs with fancy fonts and art. Basically you can have an image like so, with plain ol’ rich (Kindle) text and an image tossed in:

Or you can have the whole screen be an image and designed to fit the Kindle screen, like so:

As you can see, the “designed” image is much prettier, but to be 100% honest, it’ll be just that much more of a strain to read it on the Kindle screen as compared to the rich text version. The rich text is cleaner, bigger, clearer. The image version is, of course, more artistic. For the image, just use the same image HTML you used in the earlier parts of this tutorial. For rich text HTML, the above rich text example would be written like so:

You don’t have to worry about where the page will cut off – just write all the text in a seamless run of paragraphs (or “<p>” tags). The Kindle will sweetly, automatically make the proper page breaks and make certain to display all the images properly.

If, however, you have a particular place you want to see a page break – for instance, if you had an AFTERWORD followed by, say, a bonus short prose story, then you won’t want the end of the Afterword to be on the same page as the beginning of the short story – too tacky. So use this standard mobipocket code to insert a pagebreak:

START POINT

The last thing you’ll use HTML for is to create a “Start” point for the comic – should it be the cover? The Table of Contents? The first page? Your choice, but realize that there’s a slight flaw in how the Kindle reads the Start point: wherever you “Start”, that’s where your automatically generated “Preview” for potential buyers will start.

UPDATED 10/28: I’ve recently learned a bit more about this flaw. Kindle support claims that any book’s “Preview” will be automatically generated using the “First 10% of the content, rounded up”.  Unfortunately, for comics, this becomes an issue because there are mostly images.  If you had ONLY images, then it would work – 10 images/pages would = 1 page preview.  However, if you include a TOC, which is text, then the Kindle goes a wee bit apes**t.  When you attempt to publish the book on the Kindle Digital Text Platform (which we’ll explore in full in PART 3), you get to preview the book before hitting “Publish”.  In the preview, you’ll note that there’s a page-count kind of counter on the bottom, that tracks what “Location” in the book you’re at depending on the page you’re on.  However, any text-based part of the book will take up a huge portion of this counter compared to the images – the TOC alone will take up 10-20%!!!

For whatever reason, the Kindle reads the single images/pages as being small parts of the overall book, while the text it reads as a far more weightier amount of “content”.  When trying to advance to a further Location in the DTP Preview, you’ll note that the TOC will simply advance line-by-line, showing you the same page, but with a new line added and an older one lost.  Eventually, after clicking down nearly 20% of the total Location-bar’s length, voila!  You now see the images.  So with a TOC added, your 10% preview becomes just the cover and the TOC and nothing else!  Yikes.

The best way to avoid this is to put the TOC at the END of the HTML document, rather than at the beginning.  Readers bring up the TOC via the “Menu” option on the Kindle, so it’s by and large unimportant to have them see it in the front.  Not to mention, you’d have to place the “Start” tag after the TOC in any event, so there is currently no way whatsoever to have the cover and TOC be the first thing readers see AND have the Kindle auto create a worthwhile preview on the Amazon marketplace.  Instead, place the TOC at the end, and have the first actual page of the comic be the “Start”.

How to use the start point?  A start point is created by using the word “start” as an anchor name, so:

Will make the comic start right on Page 1. The Kindle allows users to bring up the Cover and/or Table of Contents at any time, regardless of your own Table of Contents and order of things. So it’s truly no problem with skipping over these for the first opening of the book. Kindle user know how to bring these up if they want to.

And that’s that! Whew!

Part 3 is coming VERY SOON now! (looks for it around early November)

NEXT: PUBLISHING your comic on the Kindle!

Related posts:

1. Adapting Comics for the Amazon Kindle Part 1 – Optimizing Images
2. Adapting Comics for the Amazon Kindle Part 3 – Publishing Your Comic
3. Robot Comics Launches on the Amazon Kindle
4. The Desert Peach #1 for Amazon Kindle 1 & 2
5. The Desert Peach #2 for Amazon Kindle 1 & 2