This is the third part of the process converting your word processor document into a Kindle e-book. If you're behind the curve, go back and follow the instructions in CODING PUNCTUATION - PART ONE and CODING PUNCTUATION - PART TWO.
Paragraph styles allow you to format your e-book in a way that matches a typical print book. At least, as far as we're allowed by Kindle's rules and limitations.
Grab any book off your shelf and check out the paragraphs that start chapters and new sections inside chapters.
Starting paragraphs are often non-indented, while everything else is indented a little. Not as much as a typed manuscript (usually half an inch), but some.
Also, you'll note that the spacing between lines inside a paragraph and between the individual paragraphs is about the same. Left to its own devices, html likes to put a blank line between paragraphs.
We're going to fix both these problems with paragraph styles.
The first thing to do is de-clump the html coding in the first line, stuff that got mashed together by Mobipocket Creator.
Click in between the close carets (AKA greater-than marks) and the open carets (less-than marks) and tap Enter.
<html><head><meta [blah-blah-blah]</head><body>
turns into
<html>
<head>
<meta [stuff]>
</head>
<body>
Detail-obsessed folks will probably want to rush to the bottom of the file and separate </body> from </html>.
Now click behind the close caret on <head> and hit Enter. Add a title tag, and it will look like this:
<head>
<meta [stuff]>
<title>YOUR TITLE HERE</title>
Click behind </title> and hit Enter. Add a style tag:
<title>[etc]</title>
<style>
Click behind <style> and hit Enter. Add two paragraph styles and close the section with </style>. It will look like this:
<style>
p.body
{margin:0in;
text-indent:1.2em;}
p.start
{margin:0in;
margin-top:20;
margin-bottom:0;
text-indent:0in;}
</style>
</head>
Note the use of curly brackets front and back. Each part is terminated by a semicolon, items are hyphenated, values follow colons without spaces.
And remember, you can copy and paste into Notepad++ right from this blog post.
Let's apply these styles to your paragraphs. We'll begin by converting all of them to "body." We'll then go back and modify the starts of chapters and sections within chapters.
Search for
<p>
and Replace All with
<p class="body">
For the next procedure, it would be good if all your chapters contained the word "chapter" or something equally telling. Search out all your chapter headings, go to the tag for the opening paragraph, and replace the word "body" with "start."
Then go after your section beginnings (possibly marked with # sign) and do the same. Delete the # marks at the same time. The new paragraph style automatically places a space between sections. Feel free to experiment by changing the number in the "margin-top" line. (It's in pixels.)
You might decide to add a gimmick in between sections of your chapters. Print books sometimes use them, if only to indicate a section break—the blank line—when it occurs at the bottom or top of the page.
First, create a new class in the <style> section:
.center
{text-align:center;}
Now try one of these guys:
<p class="center">- - -</p>
or
<p class="center">*</p>
or
<p class="center">§</p>
Just be aware that most symbols outside the Latin-1 character set are unavailable to Kindle.
On the other hand, if you came across a symbol you've decided you can't live without, you could always use an IMAGE of that symbol in your book. We'll get into the use of images in the next post.
If you have no interest in creating custom images for your chapter starts, tart up the text already in place like this:
<h1 class="center">CHAPTER ONE</h1>
Whether your chapters start with a simple text title or an elaborate image, we need to add an ID tag in front of each one. It's necessary for the creation of an html Table of Contents, allowing readers to jump right to a chapter start point. (And Kindle insists on this capability.)
Just above your chapter heads, put
<div id="chap_1"></div>
and so forth.
You could also name it "chapter_one" or "c1" or the equivalent. So long as it's unique to this location in your book. (But using a numeral in the name streamlines the making of your table of contents. Once you have created the entry for chapter one, you can copy and paste to make all the others. All you have to do now is change all those 1s to 2, 3, 4, etc. We'll get to making of the Tables of Content [there are two versions] in a later post.)
Just below the <body> section, add title page and copyright locations, so a reader can jump right to them:
<body>
<div id="title_page"></div>
<div id="copyright"></div>
These are suggested names. Up to you what to call these locations. If you have a dedication page, KDP suggests it go right after the copyright page.
If you're not going to create an image for your title page, you can fake-up a text-only version with header tags of various sizes (h1 is the biggest, h6 the smallest) for title, your name, etc. Use the class="center" feature the way we did for the chapter headings.
Maybe something like this:
<h1 class="center">MY BIG FAT BOOK</h1>
<p> </p>
<p> </p>
<p> </p>
<h3 class="center">by</h3>
<p> </p>
<p> </p>
<p> </p>
<h2 class="center">Excellent Writer</h2>
But note: While some versions of Kindle allow non-breaking spaces to separate title and author text, etc., the iOS apps are pretty stingy with spaces. Actually, those guys come off quite conservative in their handling of a lot of code.
At larger fonts you might send the author's name off onto its own page.
This is why I like to create an image of the title page. You have full control of spacing, plus you can add illustrations. And you have access to fonts in styles and sizes otherwise forbidden in Kindle.
Below the copyright tag you could put:
<p class="start">Copyright © 2013 Your Name</P>
<p class="start">All rights reserved</p>
Because you want your title page, your copyright notice (along with some notes and acknowledgements, perhaps), and every chapter to begin on a new page, we need to insert some above every element (except the title page, which—being first—already lays claim to its own page). Add this to the <style> section:
.break
{page-break-after:always;}
Here's the code in action:
<div><br class="break"></div>
Open up a line above every ID tag and write this code (or copy and paste).
You could also fancy things up a bit by placing a horizontal line above or below (or both) each (or selected) elements. The code is <hr />. Give it a try, see how it looks in your browser.
<hr />
<p class="start">Copyright © 2013 Your Name</p>
<hr />
But note: The horizontal rule is treated oddly in Kindle Fire and Fire HD. Sometimes the line ends up on the bottom of the previous page, not at the top of the new one—even though the html coding is clearing saying the opposite.
The last thing we're going to do today is mess about with the opening line of the paragraphs that begin your chapters and sections.
In print books, special treatment is common. A large "drop" capital to start, the first few words in small caps, or in bold or italic style.
Try modifying the first line of an initial paragraph like this:
<p class="start"><b><big><big>T</big></big>he first few words</b>[etc]
The tags for bold are <b>[text]</b>. For italics: <i>[text]</i>.
For the time being, at least, save your file and open it in a browser. It should look pretty dang professional....
Now that you have the basic code in place, feel free to experiment. Rather than no indent for start paragraphs, try a much LARGER indent. Or mess around with the margin settings.
You could add the following line to your paragraph styles:
line-height:100%;
Change that percentage and you'll be able to vary the line spacing (called leading). You could loosen the spacing in your whole book this way. Note: only values above 120% work.
But only in some versions of Kindle: Works in Paperwhite and both Fire editions. But I can detect no difference in leading in regular Kindle (or DX) or the iOS versions (iPad and iPhone).
You can also add a new paragraph style just for chapter starts, using a different one for the start of new sections inside chapters. Just copy and paste one style and change the name of it, apply it wherever you want.
Go ahead and have fun with it.
Just remember that some combinations might only look cool for certain font sizes—and ultimately you have no control over font sizes.
Also, consider this: If you're about to publish a bunch of novels in the same series, you'll probably want to standardize the look for this and all future volumes. Branding is not just for cover illustrations.
If you've decided not to mess about with image files inside your book, the code for the text of your book is now complete.
Start Kindle Previewer, click File, select Open Book, browse to the html file (which you should find in the output folder of Mobipocket Creator—unless you instructed Notepad++ to put it someplace else), and double-click it. The KindleGen program built into Previewer will now compile your book. You'll get warnings about errors, but ignore them for now—they're on the list to fix in future posts. Click OK and check out the book. See what it looks like in various versions and apps, change the font size to see how weird (and annoying) things can get.
Next time we'll look into creating images and placing them in the code.
No comments:
Post a Comment
Comments are welcome -- and moderated by me. Please be patient.