As seen in the previous post (PUTTING IT ALL TOGETHER - PART ONE), here's where the project stands: The html file of the book is prepared for Kindling. The more exotic files (toc.html, toc.ncx, content.opf) have been tamed and are ready to serve. Test Kindling with mock-up title page and cover has met with success (after a few frustrating adventures).
Time to make up chapter-start images, a real title page, and the cover. Time to open up the GIMP.
Leaning on previous posts (INTRO TO IMAGES, CHAPTER-START IMAGES, COVER DESIGN) means we can proceed quickly.
Start by creating a New canvas: 500 x 400 at 300 dpi.
I had previously created a chapter-start design that had small italic text of the chapter number sitting on top of a blurred out version of the same word—bigger and with another font. I liked the way the smaller, red font seemed to jump up off the screen.
This time I decided to place the name of the chapter on top of the word CHAPTER, again in blurred-out gray letters. I positioned the end of the number up against the left edge of the R, and a little down from center. I added a space between letters of the number so the smaller numbers wouldn't look so lost way over at the end.
Save this image in an xcf file and you can create chapter after chapter: Type in the new number, Save As a jpg, select the number layer again and type in the next number. Repeat as necessary.
Here's a sample:
Since I wanted the word CHAPTER to fade a bit into the background, I selected its layer and dialed the opacity down to about 25 %.
I had a leg up in producing a cover, since I had already made one for the original book. You may recall I put the book up on Kindle, then took it down again, planning to re-release it in three beefed-up parts.
Because I wanted the covers of these three books to rhyme, I worked out a pattern: big title, big author name, one image.
That one image will be resized downward a bit, then moved to the upper fourth of the cover, leaving the rest for the other two elements.
The image is a rising Nike Hercules air defense missile, but seen in three slightly different environments. (And different versions.)
The original cover was meant to depict the final act of the book: Nike missile launching into a black night of fireworks. So I had that image to build on.
To make this one, I had found a good high-definition photo of the missile, taken in a Belgian air museum. It was complete, except for the bottom of the left-hand booster fin. The first thing I did was to isolate the right-side fin, then copy and paste it onto the left side of the missile—after using the Flip Tool. I also drew in the bottom of the fin that is coming right at the camera, which was also cut off by the wing of some aircraft in the museum.
Since at that point I wanted only the primer gray version, I first painted over the missile unit markings, then painted the booster tubes white to match. Later, reducing the brightness and adjusting the contract made the missile appear gray. (Colors, Brightness-Contrast Tool.)
In the process, I outlined the missile by hand with the Path Tool, so I could copy and paste it into a new background. Ultimately, the image of the missile was drastically reduced in scale (using the famous Scale Tool).
In an earlier version I had relied on a photo of a missile being launched, including the flame and smoke below the boosters. That flame got adjusted a lot, first by reducing it to 1-bit black and white (Image, Mode, Indexed, Use black and white palette), then by Bucket Fill to color the result.
The modified (and reshaped) flame was elongated to fit the new scheme, with the missile appearing nearer to the top of the cover. Also, I had to narrow it to fit the smaller scale of the final missile size. Extra flame was added with paint to create a bottom zone suitable for lettering. In the process, the flame became a lot more symbolic than realistic.
Ultimately, in order to standardize the flame for the three covers, I took an earlier version of the cover, painted out all the other elements (fireworks, missile), and isolated it with the Select by Color Tool.
In the first book, the launches occur during the day, with white clouds in the sky. I search the Internet for public domain photos of clouds, finally selecting one by Petr Kratochvil (publicdomainpictures.net). The sky was a nice dark blue, uniform throughout, and the cloud was nearly all there.
I downloaded the jpg and opened it in GIMP, resized it a little to match my canvas (1600 pixels wide), and pasted in onto a full size empty canvas. I anchored the layer near the top, sampled the color with the Color Picker Tool, and Bucket Filled the rest of the canvas with the same shade of blue.
I used the smudge tool to blend the painted background and the image, also extending the streaks downward to cover the fact the bottom of these clouds were cut off by the original framing of the photo.
After that I pasted the flame onto the canvas and moved it to the bottom. I then added the image of the missile, vastly resized, maneuvering it into position with its nosecone nearing the top of the cover.
To finish off, I add lettering with the Text Tool and a lens flare (Filters, Light and Shadow, Lens Flare). Here's the finished product:
Big title, big author name, single image: suitable for thumbnailing.
I need to convert the image to jpg for Kindling, but I'll keep a copy in GIMP's project version file (xcf), which preserves the layers containing each of the text elements, plus the background image.
This allows me to delete the background and paste in another one, for books 2 and 3 of the series. I need only select the layers with the title words, one at a time, to change them to the new title. The rest of the lettering is untouched (after bumping up the number in the series title at the bottom).
For the title page, I opened up a canvas 600 by 800, gave it a little Bucket Fill tint, and dropped in the missile image I prepared for the book one cover. I added a vertical line (you can use the Paint Tool to create a straight line by holding the shift key down) and lettering.
Hot Status (the book I'm working on here) is about a bunch of old Army vets putting together a private air defense site, using surplus military hardware. During my research I came across a lot of public domain photos (courtesy U.S. Army). (BTW, all photos taken by government employees are in the public domain; use it however you want, but acknowledge the name of the photographer if it's available.) I thought it would be good to place a dozen or so of the pix at the end of the book in a Photo Gallery.
I added a new anchor in the html code, just in front of the About the Author section, and amended the two Tables of Content accordingly. No start image this time, just header code. I massaged the photos through GIMP, resizing and adding captions where necessary, then added <img> code to set each one up in the book. I inserted page breaks so they'd each have a page to themselves. I also added a note to the Copyright & Acknowledgments page, alerting readers of the gallery's existence.
I dropped in the About the Author section from the original book—and I was finished.
Next time: techniques for final proofing, followed by the sacred act of Kindling.
I have a manuscript ready to Kindle, so I'm going to follow the procedure given in this blog to make it happen.
Previous posts are my guide: CODING PUNCTUATION - PART ONE, CODING PUNCTUATION - PART TWO, PARAGRAPH STYLES, PAGE ONE, etc.
I began by re-saving the book under a new name, then I massaged the text: changed dashes to a pair of hyphens (with no spaces around them), removed spaces around ellipses. Searched for double spaces inside paragraphs and removed them. (They would only be there by mistake; I got out of the habit years ago.)
I saved again, this time as Text Only, and ran the file through Mobipocket Creator to create the html version.
I opened the version in Notepad++.
And got a shock.
I was expecting every paragraph set off with the standard tags: <p> in front and </p> at the end.
Didn't get it.
Got instead nothing in the front and <br /> at the end. OMG.
I had written a very short fake "book" to test the procedure, and everything had been great. What went wrong?
I compared the file that worked to the one that wasn't working and came up with some added procedures:
I went back to the rtf file and amended the paragraph style, eliminating the indent and converting the text to single spacing. I searched for the paragraph symbol and replaced it with two of them. Then save as Text Only.
This file came out of Mobipocket and showed up in Notepadd++ with the hoped for <p>...</p> tags.
Now I was all set to run the punctuation searches.
Twelve searches.
The first two look for material quoted in single quotes (quotes within quotes [in America]). They require you check the result of each search to see if anything needs to be done.
In the first search ("') I got no hits.
Lots of hits for the second search ([space]'), but they were almost all front-of-the-word contraction apostrophes, not the beginning of quoted material.
The other ten searches are Replace All monsters designed to have their way with the manuscript.
I laid in the code for all smart quotes, plus dashes and ellipses.
One code eluded me (the accented e in fiancée), but I found a code on the Internet (www.w3schools.com). For the record: é
I spread out my html code by clicking between brackets (><) and hitting Enter. I added the <title> code. I added <style> codes, using copy and paste from the blog, to create paragraph styles.
I replaced all <p> tags with <p class=body"> tags, then searched for "chapter" so I could modify the first paragraphs of my chapters with the non-indented "start" style. I searched again for section breaks (#) and put the "start" style to work there, too...before deleting the <p>#</p> code.
I added anchors for chapters, as well as the title-page image and the copyright page:
<div id="title_page"></div>
<div id="copyright"></div>
Then I used the code for the c-in-the-circle symbol (©) to create the actual copyright notice. Acknowledgments will follow.
I put in page breaks where needed, using:
<div><br class="break"></div>
Then I went about modifying the first words of initial paragraphs. For chapter starts: <b><big><big>F</big></big>IRST LETTER OF THE FIRST WORD</b> gave me bold caps. The first few words of section starts were just set in bold, no big cap.
I have to confess I obsess about the choice of how many opening words to highlight. Going with a fixed number—no matter what they are—is a recipe for weirdness. Highlighting those words just naturally emphasizes them, and going one too few—or one too many—can distort the meaning.
(And I am of course mindful of the words of Emerson: A foolish consistency is the hobgoblin of little minds. But how do you decide when you're being foolish?)
Another thing to work out: Dumping your rtf file into text strips out a lot of formatting, including bold and italics. You'll probably want to keep the rtf version open in your wp so you can transfer these effects. As you know by now, the tags for bold and italics are <b>...</b> and <i>...</i>. Remember, italics is not just slanted, it's also thinner. In some font sizes it can come off a little spindly. When I'm working with the first few words of a chapter I like to beef up my italics with bold font-weight.
Next I trotted out files from a previous book: toc.html, toc.ncx, and content.opf. I modified them for this new work.
Now it's on to images: chapter-starts, title page, and cover.
But first, a quick look at the book.
I open it in my browser to check it out.
Uh-oh.
I discover some of my dashes haven't come out properly. They're represented as question marks.
I track the problem back to the text file: question marks in place of some of my dashes (the rest of which are now represented by double hyphens).
Back further to the original rtf: Apparently, something went wrong when I converted my dashes into double hyphens. Some of the dashes—or at least they LOOKED like dashes—were not recognized by Word as dashes and so never got converted. When the file was saved as Text Only, these non-dash hoodlums were represented by question marks. Nobody knew what to make of them.
But I swear they were regulation one em dashes, placed in the text by Auto Correct. What the hell?
I have to search the html for all question marks, weed through the legitimate ones, and replace the others with the code for non-breaking spaces and one en dashes. Some en dashes are to be followed by real spaces, others (at the end of interrupted dialogue) by another non-breaking space.
Great fun!
And I still don't know how I got into this mess!
But I've learned my lesson. From now on, I'll do my original writing with the html file in mind. No more curly quotes or em dashes—just straight quotes and double hyphens.
In this new world of e-books, the html file IS the final text. If for some reason I need an rtf version, I can use Calibre to convert the html to rtf. After that, all I'd need to do is fiddle with the formatting.
And who knows, I may never need another rtf file.
Back to work.
I went into my standard template ncx file and modified it to report the right number of chapters, etc. (See TABLES OF CONTENT.)
I also opened my captive opf file and modified it—with all due respect, and so forth. (See the POST on the opf file.)
To test my progress so far, I faked-up some cover and title page images and ran the book through KindleGen (via Kindle Previewer).
It failed!
I clicked the expansion doohickey on the failure notice to look at the details: Several open tags had been forcefully closed. The line numbers were given, so I opened the book in Notepad++ and took a peek. There was NOTHING wrong with my closing tags!
Here's a tip: KindleGen doesn't tell you the right place to look for problems. You can stare at the reported line until your head explodes, but you won't find ANYTHING wrong there. You WILL begin to doubt your sanity.
Solution? Check out the line right ABOVE the line they say is messed up. (Or maybe the line above that. The problem is around there someplace, just not where they say it is.) You'll find the problem and fix it.
After I mended by goofs, I tried again: File created, but with Warnings.
Just one error reported: No cover specified.
Okay, I went nuts trying to find out why that thing wasn't work. There was nothing wrong with the "cover" listings in either the <metadata> section or the <manifest> section. I was very careful. Rather than modify the opf file, I saved my fake cover with the name already listed there.
In fact, I made NO changes in that part of the opf file. So why wasn't it working? I searched the Internet for help, found I was doing everything I should be doing.
What the hell!
I mean, it used to WORK, right?
Then I remembered the glitch in KindleGen I reported a moment ago. I examined the line ABOVE the <metadata> listing for the cover, which turned out to be the <dc:description> item—one of the few things I changed when I modified the opf file for this new book.
Yep, I messed up right there. When I highlighted the existing description to delete it, I unknowingly included the closing tag—and failed to replace it. After I added </dc:description> to the end of the text about the book, everything worked perfectly.
The new book Kindled without error.
Anyway, NOW it's on to images: chapter-starts, title page, and the cover.
Next time.
The mysterious opf file ("open packaging format") is a common rock upon which Kindle books may founder. But fear not: Copy and paste my version, modify only those parts you are allowed to touch, and skip home free.
The items you need to change are displayed in red (a color lost when you paste into Notepad++). Keep the blog version open on your browser for guidance as you work.
Make no unauthorized changes!
The opf file is extremely touchy. If modified incorrectly, it will not serve. Kindle will deliver WARNINGS. Soufflés will fall.
THE DREADED FILE
<?xml version="1.0"?>
<package version="2.0" xmlns="http://www.idpf.org/2007/opf" unique-identifier="BookId">
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
<dc:title>Your Title</dc:title>
<dc:language>en</dc:language>
<dc:identifier id="BookId" opf:scheme="uuid">268a4670-ca8a-11e2-8b8b-0800200c9a66>
<dc:creator opf:file-as="Lastname, Firstname" opf:role="aut">Your Name</dc:creator>
<dc:publisher>Fake-out Publications</dc:publisher>
<dc:date>YYYY-MM-DD</dc:date>
<dc:subject>Type of book</dc:subject>
<dc:description>Say a few words about your book.</dc:description>
<meta name="cover" content="cover" />
</metadata>
<manifest>
<item id="toc" href="toc.html" media-type="application/xhtml+xml" />
<item id="book" href="book.html" media-type="application/xhtml+xml" />
<item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml" />
<item id="cover" href="cover.jpg" media-type="image/jpeg" />
</manifest>
<spine toc="ncx">
<itemref idref="toc" />
<itemref idref="book" />
</spine>
<guide>
<reference type="toc" title="Table of Contents" href="toc.html" />
<reference type="text" title="Beginning" href="book.html" />
</guide>
</package>
DISCUSSION
After the boilerplate opening, we get to the <metadata> section. Most of this stuff is the so-called Dublin Core, each part of which begins with the "dc:" tag.
The first six items are mandatory: title, language, identifier, creator, publisher, date.
For language, you could also use "en-US" for American English, or "en-GB" for British English. Or something else even more appropriate.
The identifier number must match the one given in the ncx file. Here you also have to identify a "scheme." In this case it's "uuid." You can get your very own bizarre number at this site.
The creator's name goes in backwards (says "file-as"), but the author's name ("aut") runs front to back.
In the publisher slot you could put your name, or the name of a fake publisher. But some folks have a problem with that. See THE MISSING IMPRINT.
I've found that <dc:date> does not go nuts in Kindle if you use only one digit for month and day, but you'll need two for ePub. You could also just use the year and month. Or just the year. But you have to put something here.
The last two Dublin Core items are optional.
For <dc:subject>, consider: Romance, Thriller, Western, Mystery, etc. You can also use codes generated by the Book Industry Study Group here (up to three, I'm told). Go to their Website for more information.
You are now allowed to say a few words about your book. In his tutorial, Australian writer Rhys Tate says you can put up to three entries here, though none can exceed 255 characters in length.
Or you could say nothing at all.
At the end of the <metadata> section is one of the two lines in the opf file that refers to the cover of your book. One term there:
name="cover"
must be shown exactly as it is here.
The second part of that line:
content="cover"
can be changed (though one might question your motives) to virtually anything (i.e.: content="monkey-boy"). Just make sure the second reference to the cover (in the <manifest> section) uses the exact same name:
item id="monkey-boy" href="cover.jpg"
Use can also change the name of the actual image file, so long as it matches the name in the folder where the opf file resides. Just remember: Every single change you make is fraught with existential danger. The tiniest typo, the least speck of error can ruin everything.
After the <metadata> section comes the <manifest>. This is where the HTML content of your book is listed: your HTML Table of Contents, the book's file itself (if it's in chunks, list each chunk separately), as well as the ncx version of your TOC.
Images also go here.
I only list the cover image, but some folks will tell you every single image in your book (title page, chapter-start, etc.) must be listed in the manifest. My experience with Kindle assures me otherwise. But other versions of ebook may be less forgiving. (Like ePub.)
Finally, as I mentioned before, the "item id" name for the cover must agree with the one given it in the previous section (content="[blah-blah]").
Note the third part of that cover listing:
media-type="image/jpeg"
and focus on the fact the reference here is to "jpeg" not 'jpg" as indicated by the cover file's actual name. Pay attention to this crucial difference: jpg is the file name extension; jpeg is the name of this type of images.
Other file types are possible: gif or png, for instance. In these cases, the file extension is the same as the media type notation.
Some versions of the opf file you might come across on the Internet contain an additional line in the manifest section:
<item id="stylesheet" href="style.css" media-type="text/css"/>
This is a reference to a separate style sheet. But if you keep your book in one HTML file, one which already contains a <style> section in the <head> that specifies paragraph and header styles, you don't need a separate style sheet – at least, not for Kindle. In fact, Kindle does not support the use of a separate style sheet. (Other ebook versions, such as ePub, pretty much require a style sheet.)
If you are perverse, and desire to create your very own style sheet, simply copy the style section from the HTML file of your book and paste it into a new Notepad++ window. Don't include the <style> or </style> tags, just the actual definitions. Save the file as "All files" and give it this name (you have to type in the "css" extension):
style.css
CSS stands for Cascading Style Sheets. It's mainly used for Web page design, to insure multiple HTML files will have the same styling (font, background color, layout, etc).
Having a separate style sheet is probably harmless, as long as you retain the <style> section in your book. Remove that section, and a separate style sheet is useless in Kindle. Your artfully designed paragraphs will revert to standard Web page display: non-indented blocks of text with blank lines in between.
Now a section called the <spine>. Inside the opening tag is a place to name the "toc." They're referring here to the ncx version of the toc. Use the same name you gave it in the manifest section. I call it "ncx" in the manifest so I can use "toc" for the HTML version.
In the spine you should list the HTML Table of Contents and the HTML file of your book.
The final section is called the <guide>. Here you again reference the HTML Table of Contents and the "Beginning" of your book. I just put "book.html" there. Usually the Kindle edition opens on the title page, which is the first anchor in the book. Some folks recommend using the HTML Table of Contents in the href for the last line:
<reference type="text" title="Beginning" href="toc.html" />
Try it and see if you like it. But I have to say, my title pages look a lot better than a generic table of contents that doesn't even mention the book's name.
When you've made your (authorized) modifications, save the file in your book's dedicated folder. Select "All files" as the type and write the extension (.opf) after the name of the file, like this:
content.opf
Earlier, when you tested your preliminary versions in Kindle Previewer, you double-clicked the HTML file. This time, be sure to point Previewer at the opf file instead. Otherwise, clicking the buttons at the top of the page will just give you error messages: no cover, no table of contents, no navigation file.
Roam all over the various Kindle versions and apps. See if you can live with the compromises you will undoubtedly have to make. You may want to go back to the HTML file to fiddle a bit. But when it works, you're just about ready to go to the final step.
Kindle wants two versions of your table of contents. One is the html version, which shows up in the front of your book. The other is the "navigation" version, which only makes an appearance if you press a button at the top of the page.
The html version is pretty straightforward. It consists of some top matter, followed by a list of the chapters, given twice. The first time it's the name of the anchor you've used in the body of your novel. The second time is the way it will be displayed on the Table of Contents page.
Before we do that, however, it's time to get organized for Kindling your book. Create a new and dedicated folder on your hard drive.
Into this empty folder you will put the html version of your text and copies of any jpg images you want to appear in your e-book (chapter-start images, title page image, embedded cover image).
Plus three more files: the html toc, the navigation toc (called the ncx file), and a rather fussy and complicated little item called the opf file.
I'm going to print here a template of an html table of contents file you can copy and paste into Notepad++. Modify it by changing "your_book" to the name you've chosen. Now that I've done a few books, I call all of them "book.html" so I don't have to make any title related changes. Notepad++ gives the path so I don't get confused when I have several books open at the same time.
If your book file doesn't have the extension "html" you'll need to change that also. The only other choice is "htm." How do you know which version you've got? Open the book in Notepad++ and look at the tab at the top of the page. It will show the extension.
If your book has fewer chapters, delete the unneeded entries. If you need more, copy and paste an entry and modify to suit. If you don't want to use a title page, remove that line. If your copyright page has no acknowledgments, change the listing to follow your own personal reality. If you'd rather have your list say "Chapter One" instead of "Chapter 1" – here's your chance to fix that for all your chapters.
When you've made the appropriate changes, click File, select Save As, and navigate to your new book folder. Name the file "toc" (without the quotes). Click in the "Save as type" window and select "Hyper Text Markup Language file."
Okay, here's the text of the html toc:
<html>
<head>
<title>Table of Contents</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<h2>Table of Contents</h2>
<div id="toc">
<div><a href="your_book.html#title_page">Title Page</a></div>
<div><a href="your_book.html#copyright">Copyright Page</a></div>
<div><a href="your_book.html#chap_1">Chapter 1</a></div>
<div><a href="your_book.html#chap_2">Chapter 2</a></div>
<div><a href="your_book.html#chap_3">Chapter 3</a></div>
<div><a href="your_book.html#chap_4">Chapter 4</a></div>
<div><a href="your_book.html#chap_5">Chapter 5</a></div>
<div><a href="your_book.html#chap_6">Chapter 6</a></div>
<div><a href="your_book.html#chap_7">Chapter 7</a></div>
<div><a href="your_book.html#chap_8">Chapter 8</a></div>
<div><a href="your_book.html#chap_9">Chapter 9</a></div>
<div><a href="your_book.html#chap_10">Chapter 10</a></div>
<div><a href="your_book.html#chap_11">Chapter 11</a></div>
<div><a href="your_book.html#chap_12">Chapter 12</a></div>
<div><a href="your_book.html#chap_13">Chapter 13</a></div>
<div><a href="your_book.html#chap_14">Chapter 14</a></div>
<div><a href="your_book.html#chap_15">Chapter 15</a></div>
<div><a href="your_book.html#chap_16">Chapter 16</a></div>
<div><a href="your_book.html#about">About the Author</a></div>
</div>
</body>
</html>
The chapter list ends with an entry for an "About the Author" section. Delete if you don't need it. Or leave it there and add that item to your book just as if it were another chapter. Don't forget to create the appropriate anchor tag for the new section. Obviously, the names of all anchors in your book must match those listed in the "a ref=" part of the toc.
The navigation Table of Contents has a lot of boilerplate junk at the top, a few easy to modify variables (title, author), and a list of the items in your book (toc, copyright page, chapters, about the author).
It goes like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN"
"http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">
<ncx version="2005-1" xml:lang="en" xmlns="http://www.daisy.org/z3986/2005/ncx/">
<head>
<meta name="dtb:uid" content="268a4670-ca8a-11e2-8b8b-0800200c9a66""/>
<meta name="dtb:depth" content="1"/>
<meta name="dtb:totalPageCount" content="0"/>
<meta name="dtb:maxPageNumber" content="0"/>
</head>
<docTitle>
<text>Your Title</text>
</docTitle>
<docAuthor>
<text>Lastname, Firstname</text>
</docAuthor>
<navMap>
<navPoint id="cp" playOrder="1">
<navLabel><text>Copyright Page</text></navLabel>
<content src="your_book.html#copyright"/>
</navPoint>
<navPoint id="toc" playOrder="2">
<navLabel><text>Table of Contents</text></navLabel>
<content src="toc.html"/>
</navPoint>
<navPoint id="c1" playOrder="3">
<navLabel><text>Chapter 1</text></navLabel>
<content src="your_book.html#chap_1"/>
</navPoint>
<navPoint id="c2" playOrder="4">
<navLabel><text>Chapter 2</text></navLabel>
<content src="your_book.html#chap_2"/>
</navPoint>
<navPoint id="c3" playOrder="5">
<navLabel><text>Chapter 3</text></navLabel>
<content src="your_book.html#chap_3"/>
</navPoint>
<navPoint id="c4" playOrder="6">
<navLabel><text>Chapter 4</text></navLabel>
<content src="your_book.html#chap_4"/>
</navPoint>
<navPoint id="c5" playOrder="7">
<navLabel><text>Chapter 5</text></navLabel>
<content src="your_book.html#chap_5"/>
</navPoint>
<navPoint id="c6" playOrder="8">
<navLabel><text>Chapter 6</text></navLabel>
<content src="your_book.html#chap_6"/>
</navPoint>
<navPoint id="c7" playOrder="9">
<navLabel><text>Chapter 7</text></navLabel>
<content src="your_book.html#chap_7"/>
</navPoint>
<navPoint id="c8" playOrder="10">
<navLabel><text>Chapter 8</text></navLabel>
<content src="your_book.html#chap_8"/>
</navPoint>
<navPoint id="c9" playOrder="11">
<navLabel><text>Chapter 9</text></navLabel>
<content src="your_book.html#chap_9"/>
</navPoint>
<navPoint id="c10" playOrder="12">
<navLabel><text>Chapter 10</text></navLabel>
<content src="your_book.html#chap_10"/>
</navPoint>
<navPoint id="c11" playOrder="13">
<navLabel><text>Chapter 11</text></navLabel>
<content src="your_book.html#chap_11"/>
</navPoint>
<navPoint id="c12" playOrder="14">
<navLabel><text>Chapter 12</text></navLabel>
<content src="your_book.html#chap_12"/>
</navPoint>
<navPoint id="c13" playOrder="15">
<navLabel><text>Chapter 13</text></navLabel>
<content src="your_book.html#chap_13"/>
</navPoint>
<navPoint id="c14" playOrder="16">
<navLabel><text>Chapter 14</text></navLabel>
<content src="your_book.html#chap_14"/>
</navPoint>
<navPoint id="c15" playOrder="17">
<navLabel><text>Chapter 15</text></navLabel>
<content src="your_book.html#chap_15"/>
</navPoint>
<navPoint id="c16" playOrder="18">
<navLabel><text>Chapter 16</text></navLabel>
<content src="your_book.html#chap_16"/>
</navPoint>
<navPoint id="about" playOrder="19">
<navLabel><text>About the Author</text></navLabel>
<content src="your_book.html#about"/>
</navPoint>
</navMap>
</ncx>
Copy and paste into Notepad++. (As before, you'll lose the colored text. Keep the blog post open on your browser to remind you what parts to address.) Modify to suit your book, add or subtract entries, etc. Note the extension (html or htm) and so forth.
Make sure the "play order" number goes up one for each entry. I don't know what happens if you skip a number. (So I advise you not to.) The "navPoint id" doesn't have to be what I've used, but each one needs to be unique to the list. My advice, stick to what I've given here. It works.
Kindle's navigation feature (the line at the bottom of the page that shows where you are in relation to the whole book) was adapted from a format for something called the Digital Talking Book. That's where you get weird terms like "playOrder." Just play along and create your version of the file according to these specs.
The first line in the Head section reads:
<meta name="dtb:uid" content="268a4670-ca8a-11e2-8b8b-0800200c9a66""/>
If you had an ISBN for your book, you could use it here. But ISBNs can be expensive—Bowker (the official source) wants hundreds of dollars for one, but heavily discounts if you buy in bulk. Others (slightly less official?) sell them for various prices. They're not needed for Kindle books because Amazon supplies a unique number when you publish on KDP.
The number I show here came from this site, which uses the time of day when you visit them and a code based on the hardware configuration of your computer to create a unique number. Just make sure you use the same number in the opf file.
Mobipocket Creator slapped together an opf file when you used it to make the html version of your novel. Assuming you saved the file when Mobipocket asked, you could retrieve the id number they created for you. It's just not as cool as the one from famkruithof.
More about the dreaded opf file in the next post.
This time out we're going to put together the information from CHAPTER-START IMAGES and the discussion of first lines at the end of PARAGRAPH STYLES, ETC.
The html code will be shown in Notepad++ and the various combinations displayed in Kindle Previewer.
The first variation uses the <big>...</big> code for the initial capital. The paragraph style ("start") calls for no indent. I'm using the <b> code to make the letters bold, and they're typed in all caps.
Here's the page of code for the start:
And here is the view from Kindle, font size 6:
The chapter-start image is set at 500 by 400 pixels, which is just about as wide as it can go. There's slightly more room below the bottom of the image because the paragraph style calls for a margin-top of 20 pixels.
You could make the top and bottom spaces equal by setting margin-top to zero, but then you'd want to create a new paragraph style with a decent margin-top and apply it to the opening paragraph of every new section within your chapters. Unless you use a dingbat to separate sections, you need to have a space there.
Next up is Kindle Fire, font size 1:
You'll see the image is centered, as the html code requires. If you mess up (as I did until I figured it out) and use the "body" style for your chapter start code, you'll find the image shifted a bit to the right. "Body" has that 1.2 em indent built in. You'll want the zero indent of "start" style—until you don't. You'll see.
Now Kindle Fire, font size 8:
Looks good.
Here's a smaller font (3) with the sepia background selected. Now the border of the white image can be seen. Are the letters too crowded left and right?
The next code to check out uses the <big> code, but is in italics (<i>...</i>), bold, and lower case.
First, standard Kindle, font size 4:
This image has a lot of room at the top. Adjusting margin-top to center up is not in play.
Here's Kindle Fire HD, font size 6, with the "night" background.
The white background of the image shows up starkly against the black. Just a little disconcerting...
Next, the iPad app for Kindle, in font size 1:
And the iPhone version, font 5 (the biggest):
Looks readable enough...
Now I'm going to show the result of another code. This uses <big> and is set in bold italics and caps. The "start" paragraph style now has its text-indent spec set to 5 em.
But that will also shift the image, which normally uses "start" style, to the right. To fix that, I've created a new paragraph style called "start-image." It keeps the image's indent to zero (in this case, I still want it centered).
Here's Kindle Fire at font size 5:
Now, Kindle Fire, font size 2, with the sepia background:
One thing jumps out at me: The transition from white to sepia is easier to take with an already dark chapter-start image.
Now, Kindle DX, font size 6:
In the next series of tests, I take out the <big> code for the initial letter and use instead an IMAGE of a letter. Back to zero indent, first few words in italics and caps. (I can drop the "start-image" style with this one.) Notice I've also reduced the image size to 200 by 200. The code looks like this:
First up, Kindle Paperwhite at font size 2:
Now Kindle Fire, font size 1:
Because there is no color in this chapter-start image, these two pages look pretty similar.
The problem inherent in creating images for initial letters crops up in the next two tests: Kindle in font 1 makes the big letter T look TOO big.
If actual drop caps were possible in a Kindle, this one would descend at least three lines—which is not that bad to look at (though TWO lines is more standard). Sticking up in the air like that, it looks rather ridiculous.
And here in Kindle Fire's largest font (10) the first letter is actually smaller than those that follow.
This is just plain stupid looking.
The reader holds the power to select a font size that can make you look like an idiot—so plan accordingly.
Now Kindle Fire HD, font size 6, background set to "night."
I rather like the way the initial letter is set in its own white block. Question is, can you take the chance your readers will stick to the mid-sized fonts?
You could avoid the problem of the super big letter by replacing ALL the words marked for special treatment.
First, Kindle Fire HD at font size 2:
I made the image in GIMP, setting the font to Times New Roman italic bold—with a bigger first letter. Looks plausible, right?
But check out Kindle Fire HD at font size 10:
We have the same problem as with the image of just the first letter: The words in the jpg are smaller than the text that follows.
Finally, here's the same selection in font size 4 and "night" background:
The white box surrounding the opening phrase looks odd, but it absolutely must be cropped this way to get it to match the spacing and line height of the text that follows. One more time the reader's choice makes a monkey of our code.
Anyway, you get the idea. The challenge is to pick the combination of text treatment (bold, italics, caps, lower case, indentation, etc.) that looks the best in the various versions of Kindle—and with a reasonable selection of fonts and backgrounds (the stuff that's out of your control in the world of Kindle).
Next time: the Table of Contents.
When I will point out Kindle demands TWO different kinds of TOC.
Today we're going to move on to chapter-start images, using the free program GIMP. (To remind yourself of all the progress you've made messing around with GIMP, check out INTRO TO IMAGES and COVER DESIGN.)
Decide how much room you want to devote to your chapters' first page. Check out some books on your shelf. Think hardback, not paperback. (Paperbacks may skimp on room for chapter-starts. Some don't even start a chapter on a new page.)
Often, half a page (or more) is given to naming (or numbering) a new chapter. That's half the size of a title page, or a canvas 600 pixels wide and 400 high.
Landscape mode, this time.
Open GIMP, select File, then New, and set up a blank canvas.
Start with the Text tool. Experiment with fonts and sizes (also, colors and patterns).
Experiment with location and spacing.
You can use the word "chapter" if you want. Or just the name of the number. Or a big numeral.
Here are some examples:
Maybe put a border around it.
Also, consider tinting the image with a faint background color.
The words or numbers will probably look best when they seem to float on a white background—the background of your image blending with Kindle's. But if the Kindle Fire reader selects a different BG color, what have you got: a white box on a sepia or black background. Be prepared for that.
Personally, I like the look of the "floating" chapter image so much—it mimics best a real book—that I'm willing to accept the white box on the dark background when some random reader is goofy enough to select it. But here's where a nicely sized white box works best. Too small, and it seems to crowd the text inside it. You won't notice that on a white background.
If you want, add a small image—an emblem of your novel, taken from your cover, perhaps.
Or look for fancy dividers that can be copied and pasted.
Or try some weirder combos:
Just remember to check the grayscale (Image, Mode, Grayscale):
Red goes too dark in grayscale, causing a jumbled look. Try yellow for the big numeral:
After checking the grayscale, Undo the procedure to get your colors back.
Save the chapter image as a jpeg, placing it in the same folder as the html file of your book. (Remember, GIMP will want you to Export the image before you can save it as jpeg. Just agree to it.)
Insert each image in the book just the way you did the title page. Find the anchor tag for the first chapter, then add this line below it:
<p class="center"><img src="c1.jpg" width="600" height="400" /></p>
where "c1" is the name of the image for chapter one. (Okay, I'm not a monster: Use a different name if you want.)
Do the same for all chapters. If you've got header code already there (<h1>TITLE</h1>) with the name of the chapter, remove it. You're all about the image now.
You can fiddle with the width and height numbers if you want, see what happens. (Changing the two numbers without keeping the ratio constant makes things weird in Kindle Fire: Try it!)
Open your book in Kindle Previewer and check it across various platforms.
If you've written a book with a lot of chapters, you've got your work cut out for you. Plus something I mentioned earlier:
If you create a big sized image file for each chapter—and you happen to have written a lot of 'em—it may end up costing you some money.
Don't forget: The bigger the package, the bigger the delivery fee. (But keep in mind the delivery fees only apply to the 70% royalty.)
One way I cut back on my chapter images was to create a single design image, then images of the ten digits. I assembled each chapter heading by running the images together:
<p class="center"><img src="design.jpg"><img src="1.jpg"><img scr="5.jpg" /></p>
creates the Chapter Fifteen image cluster.
Eleven small images instead of 38 larger ones.
Something to think about.
For clarity, note that I've removed the "width" and "height" specs. You just want to make sure the combined widths don't exceed five or six hundred pixels, so they'll all fit on a single line.
Also, you can remove the class="center" part if that works better for you. (The image will come out flush left.) If you want images to align right, create some code for that (.right {text-align:right;}) in the <style> section and call the class in the paragraph tag (<p class="right">).
You can also manipulate the space around all parts of your chapter heading (or title page image, for that matter) by creating a new paragraph class and setting the margin to something larger than zero. Remove the "in" part and the number comes out in pixels (like the margin-top spec).
You could experiment with creating a half-page sized chapter-start by using a smaller image surrounded by "free" margin space. Just remember this image will sit in the middle of this extra space, and the question of background color vs. image (background) color must be considered.
But you reap this bonus: a smaller selection of image files—which is a good way to hold down the size of your compiled book and reduce your delivery costs.
Also, building your chapter-start images from parts means you don't have create image after image after image in GIMP.
By the way, the most efficient method of experimenting in the arena of margins (indeed, in virtually ANY arena of Kindle code fiddling) is to open the html file in your browser. Every change you make in the code is instantly revealed by simply hitting the Refresh button. (Remember to save the html file first, or nothing will change during refresh.)
Just keep in mind the ultimate proof of a successful manipulation must be demonstrated in Kindle itself—presumably in Previewer. Not everything that works in your browser will work in a Kindle.
Next time: I'm going to apply some chapter-start images to various treatments of the opening lines of a chapter, as seen in different versions of Kindle.
In the previous post we used GIMP to create a title page. Designing a cover image is really just more of the same. If you need to, return to the earlier session (INTRO TO IMAGES) to see how it's done.
For Kindle Direct Publishing, you'll need two versions of your cover.
The big one (1600 pixels wide, 2500 high, 300 dpi) is used for display purposes on Amazon's Web page. It's one of the two items you send to KDP when you publish. (The other is the "mobi" file of your compiled book, created by KindleGen or Kindle Previewer.)
The smaller one is used for what is called the embedded cover, which becomes a part of your mobi file during the compiling phase (about which, more in a later post) and comes up on the Kindle screen when you push the "display cover" button.
The full size page of a Kindle is usually given as 600 by 800 pixels.
But that’s the standard, original spec. Kindles come is all sorts of sizes and screen shapes these days. Plus, there are Kindle aps for other platforms, including iOS. It complicates matters.
I captured a book cover image from Amazon, opened it in GIMP, and cropped out the Look Inside thing. The final image was 293 x 437 pixels. Using the Kindle-preferred long side spec of 2500, the width comes out at 1676—close to the average width of a hardback book.
(I measured a few books around the house and came up with two different ratios, one for paperbacks (1500 x 2500) and one for hardbacks (1689 x 2500). Averaging the widths: 1595. My suggestion of 1600 x 2500 uses the average of paperback and hardback widths. A compromise.)
The important thing is not to distort your cover’s natural proportions. A circle on your cover should remain a circle on the Kindle screen—and on the Amazon site.
You can use the Scale tool in GIMP to convert your big cover to a smaller version (510 by 800 pixels—a little narrower than the title page) for use as the embedded cover. Again, pick a width that preserves the proportion of your actual cover (which, for best results, should fall within the specs for paperbacks and hardbacks).
After the scaling procedure, click Image and select Fit canvas to layers.
The preceding procedure is for folks who want to do things themselves. (I'm usually one of those guys.) However, for best image quality and least hassle, I recommend this: Let KindleGen convert your display cover and put the result in your mobi file.
If you printed out a copy of your display cover (at 300 dpi), it would fill up the paper with an image eight and a third inches tall—roughly as tall as an average hardback book.
That's nice, but forget about the big size, okay?
The most important size is the SMALLEST.
See, folks may have to decide to request more information about your book based on seeing a thumbnail-sized image on the order of three-quarters of an inch by one-and-an-eighth inches.
Maybe even smaller.
Try this: Open a copy of your best cover in GIMP, click it with the Scale tool and shrink it down to 55 by 86 pixels. Click Image and select Fit canvas to layers. Set the scale at the bottom left corner of the image window to 100 %.
That's the thumbnail image of your cover.
Does it make you want to learn more about the book? Can you even tell if that thing IS a book cover?
Here's the deal, folks: big "title," big "author," one image.
That's about all you have room for when you're designing an e-book cover.
Keep that thumbnail image in mind at all times. If the thumbnail is good, chances are the full size version will be awesome.
In all likelihood you're going to have to fiddle around with your cover for a while before it does what you need it to do. Just remember to check it in the grayscale mode (click Image, Mode, Grayscale), because that's all you're going to get in the standard Kindle and DX versions.
And don't let your cover bleed into the page, either in a Kindle or on Amazon's site. If it absolutely MUST be white, put some sort of border around it.
Keep it simple!
Save the intricate line drawings (and smaller fonts) for your title page, or some other place inside your book where you don't have to submit to the tyranny of thumbnail images.
Some e-book coaches will advise you to have your cover created by a professional. That may or may not be an option for you, money-wise.
Check out the books on your shelf; spend a lot of time on Amazon looking at lists of books (or anywhere covers show up in thumbnail). Note what jumps out at you.
Maybe you CAN put together something like that.
Big "title," big "author," one image.
Check out the Hunger Games series. Maybe you really can put together something like this.
Here's same cover in the thumbnail:
I'm betting you could rearrange and resize the elements of this cover to work even better in thumbnail. Here's my version:
Okay, that's an incremental improvement, at best.
Two things could help: a shorter title and a shorter name—which would both benefit by allowing a larger font. The title of your book is pretty much in your hands. As for your name, maybe now is the time to think about a pseudonym. If you've already decided to use a nom de plume, picking a short one could help you out in a number of ways.
I think the amateur cover creator goes furthest astray when he gets too ambitious. Keep your cover image so simple it just HAS to look like it's been done by a professional e-book designer.
Anyway, have fun fiddling with covers.
Next time: chapter-start images.
