All right, in this section of the tutorial – which, among us geek-types who like to learn on the interwebz is known as a “tute” – we’re going to have to dig, and worse still, script. *Shudder*
What you’ve done so far, if you’ve followed all my steps to the letter, is to take your Microsoft Word or OpenOffice Writer document, strip out all the formatting (and I do mean ALL the formatting), and now you’ve got it back into a nice, handy little HTML template suitable for you to transform into a .prc file which is DTP- and Kindle-friendly and allows you to check out your creation with the Amazon Kindle Previewer software.
So you’ve got an HTML document with no formatting. Now what?
Put back what you lost
You lost a lot. If you’re anything like me, you use a fair amount of italics to emphasize certain words in your manuscript. Don’t do that. As much as you can avoid it, you should. As a writer, you should have a strong enough voice to where that kind of thing is rare and well-placed in your document. But whatever the case, be you heavy-handed or light-touched on formatting, whatever you had, you’ve lost. It’s gone. There’s nothing there but a plain ol’ text document with a few paragraph tags now.
So, I’m going to tell you how to add back italics. This will go for any other inline sort of formatting you did too – bold face, underlining, strikethrough, whatever. As long as it isn’t a title or heading, a footer or a block quote, it’s probably inline and this is how you have to put the formatting back.
- Open your word processing document, NOT the HTML document. The one with either the .doc(x) or .odf file extension. Open it with whatever the native word processor is.
- Now, go to the Edit menu and choose “Find”.
- Locate the special or format location features on the “Find” dialog box.
- From the special formatting selections, locate the selection for “Font” and choose the font and the type of formatting to locate. For instance, in the image below, the Find dialog is set to locate Times New Roman 12 point italic font.
- Once you click OK on the setup you can have Word (and presumably Writer) locate the instances of italicized text in your manuscript. Presumably. I’ve never actually tried this, of course. Ahem.
- When Word or Writer finds an instance of formatted text, you can locate it in your HTML document using the “Find” feature in either Notepad++ or your text editor (if it has one) to locate the same text in the HTML document.
- When you’ve found the text to italicize, put an <em> before the text you want to italicize and a </em> after it. Note those differences! The one without the slash is called a start tag, and the one with the slash (and it’s a forward slash, leaning from lower left to upper right) is called an end tag. You need BOTH, or everything AFTER the <em> tag will be italicized in your manuscript. BE CAREFUL!
- Okay, finished with that? Great! Now go back and do it for every other type of formatting you did.
- Did you manage to use drop caps in your document? Well, while HTML and CSS (that’s Cascading Style Sheets to you an’ me) might be able to replicate that for you, the Kindle doesn’t show it. If you HAVE to use that technique, you have to make the initial cap a larger font face than the rest of the text. I kid you not, that’s the work-around.
- Save your HTML document after EVERY CHANGE and check your progress by opening it in the web browser of choice for you. EVERY. CHANGE. NO. EXCEPTIONS.
- Close the word processor document when you’re finished.
Now for the Rest of It
Okay, with that done, let’s go back and add your book title, chapter headings and any other subheadings you might like to add. Remember your book is going to need “front matter” too – this is the copyright statement at the beginning of the book, and you’re going to want a table of contents in there if you’re doing a book with, say, multiple stories. You know … like my eBook, f’rinstance.
So let’s format the title. First, you want to open the manuscript in Notepad++. If you’ve installed N++, you probably noticed it asked you if you wanted to add it as an option to your context menu. I find this extremely handy for this part. I right-click the HTML file and click on the Notepad++ option in the quick-menu that comes up. Bada-bing, it’s open in N++ ready to edit. It should automatically be opened with HTML as the language selected too.
When you copied everything from the KompoZer screen and pasted it into the <body> section of your HTML document, it presumably brought over the title and other information you had there as well. I, personally, leave all that out until it’s time to do this portion, but if it’s there, that’s fine too.
Find the book title if it’s there. In front of the first word (i.e., to the left in English-speaking, right-to-left reading countries), type the code <h1>. Note the angle brackets. That’s mandatory on all HTML code and you must use it with everything you do in HTML. This puts the Heading 1 or top-level heading format on the title. If you look at your nifty little template, you’ll see I did a tiny bit of CSS scripting for you. What happens to your title is, it becomes all uppercase, 24-point bold-face font and is centered on the document. When you save and reload the HTML document into your web browser, you’ll see this happen. Cool, no?
Now, after the last word of the title, put the end tag for the Heading 1 formatting, </h1>. This makes sure ALL the text in your manuscript isn’t transformed to a level-one heading.
There’s more. If you have a subtitle, you can use an h2-format heading by putting <h2> in front of the subtitle and an </h2> end tag after it. I have a special format set up for the author’s name too.
So find your name. The part where it says “by You” or whatever. And in front of that line, put <p class=”auth”>. Then, after your name, i.e., where you want the formatting to end, type </p>. Save your document, reload in the browser, check it out, be impressed.
Now, you can place your copyright front matter. Copy and paste it if it’s not in place, and if it is, put <p class="ctr"> in front of it and </p> at the end of it. And your front matter will be nicely centered on the screen for you. Voila! You’re finished with the front matter formatting.
A word about Amazon and Smashwords front matter – be especially careful not to include a statement like “printed in …” with your country of origin. It is NOT a printed book and this statement is meaningless. It will probably get you kicked off of Smashwords.com. Amazon doesn’t like it either. They both have very particular standards about their front matter, so research it carefully before you put one in place.
For my hierarchy of headings, I use this guide:
- H1 headings: Book title only.
- H2 headings: Story or chapter titles.
- H3 headings: Section titles or chapters within shorter works included in anthology.
I don’t go below level three for myself. You can go down to H6, it’s up to you.
Locate your chapter divisions and make sure they are formatted correctly.
Now, let’s discuss the pages.
Pagination in HTML
There isn’t any. None. Zero. Here’s what you have to remember: this is one long document. On a web page, each page is a separate document. In a Kindle, that’s not possible, each eBook is all one document. But there are tricks you can use to keep some page breaks in place.
Microsoft Word creates this neat piece of code when I convert the document to an HTML file.
<br clear=all style=’mso-special-character:line-break;page-break-before:
Now, I’m not sure what, if any, of that gobbledygook is of use to the browser, but I know I can create page breaks so that each story starts on a new page and each chapter does too, if you’re so inclined. But the idea is free-flowing text without margins and bottoms and tops. The Kindle likes this best and even does some formatting for us, all by its little lonesome.
The problem is that little ‘mso-special-character:’ part. The one I used on my hand-made book was similar, but cleaner:
<br clear=all style=’page-break-before:always’>
Much simpler, yes? And no ‘mso-‘ specific formatting, which is bad juju.
Table of Contents Crafting
Crafting a good, working table of contents isn’t easy. It’s pain-staking, in fact, and you can’t just let your word processor do it for you. At least, Smashwords hated that. So you have to build them by hand.
Open the HTML document in Notepad++ if it’s not already.
For each story or chapter (I’m going to call them chapters to save a little typing from here on out), you create an entry on a Table of Contents page. So, I put in a page break right after my front matter and dedication, if any.
At the top of the page type “Table of Contents” and apply an h2 formatting.
In the body of the page, add the name of the chapter, such as “Chapter One” or “Chapter 32” or whatever.
In front of each one, type the following code: <a href="#ChapterNum">. For “ChapterNum, of course, you use the actual digit. Or name, if you’re going with named chapters. At end of the chapter name, you type </a>. So, a complete entry is <a href="#Chapter01">Chapter 01</a>. And see the pound sign/hash mark/tic-tac-toe/whatever you want to call it thingy? That’s required before the chapter name or number. Won’t work without it.
Save your HTML document, but don’t bother loading into the browser yet; we’re only half finished with the ToC.
All right, what you just did is create a bunch of anchor tags, or hyperlinks, which we now have to assign targets for. You can click ‘em now, but nothing’s going to happen because they have no destinations to connect to. So let’s give them the targets.
“Target” is where the links take you. So, let’s finish them off.
Open the HTML document in Notepad++ if you closed it.
Go to the first chapter title in your book after the ToC. Chapter 01 or Prologue or whatever you called it.
Before the chapter title and either INSIDE or OUTSIDE the heading format tags (doesn’t matter), type the following tag: <a name="ChapterNum">. The ChapterNum is replaced with whatever you named your chapter and it must PRECISELY AND EXACTLY MATCH WHAT YOU TYPED IN THE TOC LINK. Otherwise, the link will not work, period. BE CAREFUL! So, a full entry would be: <a name="Chapter01">Chapter 01</a>.
Do this for all the chapters in your book. You can use the find and replace feature and just type in specific numbers if you want, but for named chapters or story anthologies like mine, this is a manual process.
Save the HTML document when you’re finished. Make SURE you get them all.
Open your HTML document in the browser and test each and every link. Every. One. No. Exceptions. Test. Re-test. Test again, then do it all over again. Close it, open it, save it, then test test test testtesttest! Test it, over and over! Get it?
Do they work? If yes, GREAT JOB! If not, don’t be bummed out. It’s probably a typo somewhere, and will be easy to fix. (Yeah, right.)
Okay, this is a lot. A LOT. But don’t worry, the hard part’s over. Now we have a hyperlinked, well-formatted HTML document and we can run it through a couple of crunches and get a new file type. We’re almost there!
Oh, and a cover image. We need a good cover image. We’ll talk about all those things next time.
Have fun, gang!
|Check out my latest book, available for download!|
|A Fine Cast of Characters on Amazon US (Kindle version)
A Fine Cast of Characters on Amazon UK (Kindle version)
A Fine Cast of Characters on Smashwords (non-Kindle versions)
©DarcKnyt All rights reserved