Since I plan on publishing exclusively on Amazon at first, I just needed to turn my manuscript into a mobi file. My writing software, Scrivener, can compile a manuscript into a variety of formats, so I started there. The file I got looked pretty plain. I had used images for the scene breaks in the paper version and wanted to use them in the ebook version as well. Also, there were a bunch of letters in the manuscript that I wanted to be formatted a little differently so they would stand apart from the normal text.
One of the options Kindle Direct Publishing offers is uploading the book file in HTML. Since I did a segment in coding HTML/CSS in college, I felt confident in using it for my book. I downloaded a free HTML editor, compiled my manuscript as a web page from Scrivener, and then tinkered with it to make it pretty. I was able to make a new paragraph style for the letters, use a different font for the title and part headings, and add my scene break image. Previewing my manuscript in a web browser, it looked really sharp.
And then I uploaded it to the KDP website and previewed it. All the different fonts, font size specifications, and spacing got stripped. My title page became an otherwise blank page with just the title and my name crammed at the top.
Next, I tried downloading Sigil and making an ePub from my HTML code then use an online converter to turn the ePub into a mobi. When that didn't work, I downloaded kindlegen and used it and my kindle app to preview each minute change I made in the HTML. Then I asked Reddit.
Finally, I studied some eBooks I purchased and how they displayed on my Kindle Paperwhite. I looked at books by big publishers, small publishers, and self-publishers. I was surprised to find how simple the big publisher produced eBooks were. Instead of using fancy fonts and extra padding above each new chapter, the chapter title was just bolded and aligned right. Instead of having a perfectly formatted title page, they used an image of a perfectly formatted title page. The same held true for the self-published books.
With this in mind, I saved a few of the nice looking pages from my book as images and stuck them in the eBook, and finally got it to look right.
So, if you've decided to use HTML to format your own eBook, here's some of the code I used to get a nice looking eBook:
1. Use CSS to format everything. I recommend using a style sheet.
<head>
<title>My Great American Novel</title>
<meta name="Author" content="Beth Martin"/>
<link rel="stylesheet" href="eBookStyleSheet.css" type="text/css"/>
</head>
2. Make nice chapter titles. The font size set at 2em makes the font twice the size as the user defined text size so the chapter title will scale with the font size the reader chooses. I used Helvetica to contrast with serif fonts most readers use for reading eBooks. Instead of manually adding page breaks between chapters using Kindle's special command <mbp:pagebreak />, I added them as part of the chapter title. The 1em padding adds space between the title and the beginning of the text. This part goes in the heading between the <style type="text/css"> and </style> tags.
h3.chapters {
font-size: 2em;
font-family: "helvetica", sans-serif;
page-break-before:always;
text-align: right;
font-weight: bold;
padding: 1em;
}
Now just typing "<h3 class="chapters">Chapter Title</h3>" in the HTML body for the chapter title does all the heavy weight of formatting and starting chapters on a new page.
3. Make the paragraphs nicely indented. The default for paragraphs in HTML is no indents and padding (verticle space) between paragraphs. This neatly changes that.
p.p1 {
text-indent: 2.0em;
padding: 0;
margin: 0;
}
I also had paragraphs that I wanted to have padding and no indent, so I defined those as a different style.
p.p2 {
padding: 0.2em;
text-indent: 0;
margin: 0;
}
Here's what it looks like in the body:
<p class="p1">This paragraph will be indented.</p>
<p class="p2">This one will not.</p>
4. Add images. I compressed the images as GIF files trying to keep them around 500 pixels wide. Kindles using e-ink will display them at full page, but I added the height command so they'd display as a full page on more advanced devices. I ended up using images for the title page and the pages separating the three parts.
<div style="height: 100%; text-align: center">
<img style="height:100%;" src="TitlePage.gif" alt="My Great American Novel"/>
</div>
5. Use custom scene breaks. This is an easy way to give your eBook some flair. The padding gives an empty line above and below the image. I defined the height as 1em so the scene break image will scale with the font size the reader chooses.
<div style="height: 1em; text-align: center">
<img style="height:1em;" src="SceneBreak.gif" alt="***"/>
</div>
These commands seemed to do the trick in making my eBook look much more professional. I recommend using Sigil to put together the book into an epub. Uploading the epub to KDP seemed to work well.
<link rel="stylesheet" href="eBookStyleSheet.css" type="text/css"/>
</head>
2. Make nice chapter titles. The font size set at 2em makes the font twice the size as the user defined text size so the chapter title will scale with the font size the reader chooses. I used Helvetica to contrast with serif fonts most readers use for reading eBooks. Instead of manually adding page breaks between chapters using Kindle's special command <mbp:pagebreak />, I added them as part of the chapter title. The 1em padding adds space between the title and the beginning of the text. This part goes in the heading between the <style type="text/css"> and </style> tags.
h3.chapters {
font-size: 2em;
font-family: "helvetica", sans-serif;
page-break-before:always;
text-align: right;
font-weight: bold;
padding: 1em;
}
Now just typing "<h3 class="chapters">Chapter Title</h3>" in the HTML body for the chapter title does all the heavy weight of formatting and starting chapters on a new page.
3. Make the paragraphs nicely indented. The default for paragraphs in HTML is no indents and padding (verticle space) between paragraphs. This neatly changes that.
p.p1 {
text-indent: 2.0em;
padding: 0;
margin: 0;
}
I also had paragraphs that I wanted to have padding and no indent, so I defined those as a different style.
p.p2 {
padding: 0.2em;
text-indent: 0;
margin: 0;
}
Here's what it looks like in the body:
<p class="p1">This paragraph will be indented.</p>
<p class="p2">This one will not.</p>
4. Add images. I compressed the images as GIF files trying to keep them around 500 pixels wide. Kindles using e-ink will display them at full page, but I added the height command so they'd display as a full page on more advanced devices. I ended up using images for the title page and the pages separating the three parts.
<div style="height: 100%; text-align: center">
<img style="height:100%;" src="TitlePage.gif" alt="My Great American Novel"/>
</div>
5. Use custom scene breaks. This is an easy way to give your eBook some flair. The padding gives an empty line above and below the image. I defined the height as 1em so the scene break image will scale with the font size the reader chooses.
<div style="height: 1em; text-align: center">
<img style="height:1em;" src="SceneBreak.gif" alt="***"/>
</div>
These commands seemed to do the trick in making my eBook look much more professional. I recommend using Sigil to put together the book into an epub. Uploading the epub to KDP seemed to work well.
