A bit more nerdy than we’ve been in a while. Calligraphy content coming back, but you guys on Instagram wanted it, haha!

This is a quick and easy Tutorial on how to properly set up a "pretty" fiction (or any other text-forward) ebook for a kindle. We'll go over formatting basics for your Word Document and a few tips and tricks as well as how to actually set up enhanced Typesetting.

This is going to help you create an ebook that can be sideloaded onto a kindle.

I'm a frontend engineer by trade so I write HTML and CSS for a living and I was just having fun exploring a new kind of medium. As a writer who's been writing a lot these days due to pandemics happening I now have a lot of unpublished first drafts to review-read and also share with some review-reading friends and I personally prefer doing that by reading stuff on my kindle instead of on my computer. And yes, I am aware Amazon allows you to send Word Documents and PDFs to your personal document, but there's a bit of professional pride involved and coding ebooks is fun. Also I want actual page numbers and hyphenation and a proper navigation so I can navigate through chapters.

So in case you have a similar case or jsut generally are interested in some helpful CSS and Tips on how to code a functional ebook that's actually prettier to look at than some books I spent money on, continue reading.

Kindle Format Differences

First off a quick word on the different formats the kindle supports. I just replaced my 8-year-old 1st Gen Kindle Paperwhite with a Kindle Oasis (2019 edition) and learned that on those devices there are options to fix text alignment (either have it left-aligned or justified) and some other enhanced features like ligatures and hyphenations. That is the .kfx format. Back in the day when I first learned to use Calibre I would have to go with .mobi files which the kindle still supports I think, but the program comes with .azw3 out of the box and that's what I would always use and do. I finalized that process a couple years ago and have been using it sucessfully with my old Paperwhite. But I absolutely wanted to get alignment and hyphens to work on the Oasis so I did some research today and learned about the plugin we'll be using today.

Programs you'll need

Okay, I'm on a PC but all of these should be available for your your document.

1. Microsoft Word (or any other formatted text you can get into some valid minimal HTML)
2. Calibre
3. Calibre KFX Output Plugin (not necessary if you don't want enhanced typesetting)
4. A code Editor where you can do easy text replacements (I recommend VSCode)

The Word Document

Before getting started, you'll need to have some content. Depending on where you are writing you might not directly be writing in Word but are able to export a word format. Or you might write in Word but have never heard of proper formatting (in case you are writing entire manuscripts you should definitely be changing that!).

Messy Documents

In case you are a messy word user your document might look like this:

These are a few ways your document could be looking like, all of these are manually applied styles. Within Calibre, we can use a Regular Expression to catch all of these Chapter titles since they follow a content pattern (more on that later) but unless you have 100+ chapters I recommend going through your document to actually use the formatting.

Formatting Documents

What you want to be using is these formats.

Just know what you are using for what. I personally always use Heading 1 for chapter titles (I usually also apply a Counter to it, so in case I start inserting Chapters the numbering automatically updates) And whenever I have multiple perspectives changing within the Chapters, I'll use Heading 2 for that. Whenever I need text emphasis I'll use the Emphasis format. Make sure to use the actual Emphasis, the site we'll be using to get some clean HTML will not allow you to use Subtle Emphasis.

There are also the classic buttons for creating bold and italic text, these should work, but I find applying emphasis is better since it makes reformatting your document a lot easier. I will always write in Courier Fonts but will usually reformat them to Times or another Serif font whenever I share a PDF with someone of the manuscript.

I personally also recommend using page-breaks, but we'll be removing those before processing the document. I will sometimes also use Sections to add chapter titles to my headers in Word, so if you are using Word Sections, you'll just be getting additional HTML containers in your HTML but that should not be an issue.

Clean HTML

Now Word can actually save a document as HTML, but those HTML Files give me actual pain to look at and they also don't come in an encoding most code editors can handle. So instead I found a website, that will transform your Word Documents into actual clean HTML.

Generate HTML

The site never sends content to a server so you should not have to worry about that.

It's over at Word2CleanHTML and I'm a big fan, it's been giving me the most reliable results.

Now if I just paste in the messy document I showed you earlier and run the cleanin function, the resulting HTML looks something like this:

<p>
    Prolog
</p>
<p>
    Dies ist ein [...] testen.
</p>
<p>
    <strong>Kapitel Zwei</strong>
</p>
<p>
    In Lateinisch [...] OpenType-Funktionalitäten.
</p>
<p align="center">
    Kapitel 3
</p>
<p>
    Je nach [...] old dog.
</p>
<p>
    Kapitel Vier
</p>

Even if you don't understand HTML note that the Prolog Kapitel Zwei and Kapitel 3 and Kapitel Vier are all wrapped up in the same tag as the default content. One of them additionally has an alignment, one is wrapped in a <strong> tag. If all of your formatting is at least identicall, like all of your Chapter headings are aligned in the center, you'll have a way to distinguish your chapters, but if not you're left with Headings that don't work as expected.

With a cleanly formatted Document using the Word Styles, my generated Code is properly distinguished.

<h1>
    Chapter One
</h1>
<h2>
    Perspective One
</h2>
<p>
    Lorem ipsum [...] gravida.
</p>
<p>
    <em>Morbi scelerisque at ipsum a maximus. </em>
    Integer hendrerit enim quis nisl tristique maximus. [...] ex.
</p>
<p>
    Mauris vulputate [...] ullamcorper.
</p>
<h2>
    Perspective Two
</h2>
<p>
    Mauris nibh nisi, [...] cursus lorem.
</p>

See that the Chapter heading is a proper h1 tag, the perspective is within h2 and italic text is formatted as well (in the em tag).

Now if you look in the original HTML tab you'll see how much crap Word adds, like Font definitions and margins and separate language settings. You don't want those in your source code, since they require additional cleanup after the processing.

A general rule of thumb is: the cleaner your input, the less you'll have to cleanup after Conversion in Calibre.

Create HTML Source File

Now once you have your converted HTML you'll want to create a new HTML file in your Code editor (Create New and save as FILENAME.html)

If you are not going to be importing any additional fonts, I recommend just creating a file with inline CSS.

Put this as your content and add the Title and Book Author (this will save you time editing the meta data)

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Title</title> <!-- add Book Title here -->
  <meta name="author" content="Myriam Frisano"> <!-- add Author name here -->
</head>

<body>
  <style>
    /* CSS Here */
  </style>

  <!-- Generated Word Content here -->
</body>

</html>

Then add all of the HTML Code from the generated word document where the comment indicates it, within the body tag.

If you used Page breaks, I recommend removing those. The quickest way is to search for

<br clear="all"/>

and replace it with an empty string. Do a quick google search if you don't know how to do a replace all in your code editor.

Additional HTML for Dropcaps and Scene Breaks

If you want drop caps or have additional elements you want styled, you'll have to manually add these.

One of the things I tend to do is add *** as a scene-break within a chapter. and I'd like to have those three asterisks centered and also apply a bit more space above and below it. All I do is search for my *** and then apply a class attribute, that allows me to apply some CSS to it.

If you want to have a dropcap in your ebook, you'll have to wrap the first letter of each chapter. Search for the <h1> tag and then in each first paragraph below it, apply Code with a class around the first letter.

<h1>
  Chapter One
</h1>
<h2>
  Perspective One
</h2>
<p>
  <span class="dropcap">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam
  ligula in blandit maximus. Praesent vel purus pharetra, pellentesque urna
  in, dapibus nulla. Sed commodo blandit turpis ut sagittis. In hac habitasse
  platea dictumst. Aenean ut metus sem. Integer gravida ex velit, non
  lobortis massa gravida at. Integer porta ipsum sagittis ex rutrum, et
  semper sapien lobortis. Pellentesque sollicitudin ante sapien, ut dignissim
  lorem pretium non. Phasellus neque leo, eleifend sit amet eros laoreet,
  accumsan consectetur enim. Praesent eu feugiat mi. Sed quis aliquet tortor,
  sed efficitur enim. Vestibulum nec elit sed nibh pretium gravida.
</p>

CSS

Now once that's done we'll add CSS within the <style> tags in the document. A lot of this is personal preference so feel free to do as you please.

Now this is my complete CSS using a custom Font. If you are using a custom Font, you'll want to download the font, put it into a folder along-side the HTML Document and then import it via @font-face declaration. If you are making a folder already you could also create a separate CSS file and import it in the HTML. if you don't know how that is done, paste the CSS within the style tags.

CSS without custom Fonts and hyphenation

/* make sure all font settings are inherited from the kindle */ 
body * {
  font-family: inherit;
  font-kerning: normal;
  line-height: inherit;
}

/* Chapter Title Styles (h1) */
h1 {
  text-align: center;
  margin-top: 3em;
  font-size: 2.5em;
  margin-bottom: 0;
}

/* Perspective Info (h2) */
h2 {
  text-align: right;
  margin-top: 1em;
  font-size: 1.3em;
  margin-bottom: 0;
  font-style: italic;
}

/* paragraph styling, indent text */
p {
  text-indent: 2em;
  margin-bottom: 0;
  text-align: justify;
}

/* add space between two paragraphs */
p + p {
  margin-top: 0.3em;
}

/* remove indentation if right after chapter title or perspective change */
h1 + p, 
h2 + p {
  text-indent: 0;
  margin-top: 0;
}

/* style dropcaps */
span.dropcap {
  font-weight: normal;
  font-size: 2em;
  line-height: 1;
  float: left;
  margin-bottom: -0.3245em;
  margin-right: 0.2em;
}

/* Scene Break */
.scene-break {
  margin: 1em 0;
  text-align: center;
  font-weight: bold;
}

CSS with custom Font, Hyphenation and Ligatures (Pacifico example)

/* Custom Font for Chapter Titles */ 
@font-face {
  font-family: "Pacifico";
  src: url("Pacifico-Regular.ttf") format("truetype");
  font-weight: normal;
}

/* Hyphens and Ligatures and basic font */ 
body * {
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 2;
  -ms-hyphenate-limit-chars: 6 3 2;
  hyphenate-limit-chars: 6 3 2;
  -webkit-hyphenate-limit-lines: 2;
  hyphenate-limit-lines: 2;
  hyphens: auto;
  adobe-hyphenate: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -epub-hyphens: auto;
  font-family: inherit;
  font-kerning: normal;
  font-variant: common-ligatures oldstyle-nums proportional-nums;
  font-feature-settings: "kern", "liga", "clig", "onum", "pnum";
  line-height: inherit;
}

/* Chapter Title Styles */
h1 {
  font-family: "Pacifico";
  text-align: center;
  margin-top: 3em;
  font-size: 2.5em;
  margin-bottom: 0;
}

/* Perspective Info (h2) */
h2 {
  text-align: right;
  margin-top: 1em;
  font-size: 1.3em;
  margin-bottom: 0;
  font-style: italic;
}

/* paragraph styling, indent text */
p {
  text-indent: 2em;
  margin-bottom: 0;
  hyphens: auto;
  text-align: justify;
}

/* add space between two paragraphs */
p + p {
  margin-top: 0.3em;
}

/* remove indentation if right after chapter title or perspective change */
h1 + p, 
h2 + p {
  text-indent: 0;
  margin-top: 0;
}

/* style dropcaps */
@media amzn-kf8 {
  span.dropcap {
    font-weight: normal;
    font-size: 2em;
    line-height: 1;
    float: left;
    margin-bottom: -0.3245em;
    font-family: "Pacifico";
    margin-right: 0.2em;
  }
}

/* Scene Break */
.scene-break {
  margin: 1em 0;
  text-align: center;
  font-weight: bold;
}

Calibre

If you are importing the custom fonts, you'll have to package up your folder as a zip-Archive. if you are just using your one HTML file you can just drag it into Calibre.

Once you imported your zip or HTML into Calibre via Drag and Drop, we can get started on Conversion.

Step 1: Meta Data

You'll want to edit your meta data before starting conversion, so they're already stored.

If you're just using an HTML the author and title will have been taken from your HTML file. If you imported a zip archive the folder name will have been used. Add title and author information and then you'll be able to import a cover image or generate one from the templates.

Also make sure to set the language of your book in the language tab if you want hyphenation to actually work.

Step 2: Converting to AZW3

Now if your Word was properly formatted, this is a very simple step. You'll just have to adjust a few settings. These are my default settings for AZW3 Conversions, you can set those in the preferences Calibre Behaviour, you'll also be able to set the default export format there. I recommend adjusting these in the common options to save you time.

Start the conversion, if you forgot meta data, you'll be able to adjust them here too. I disable font size rescaling and since we have a clean HTML code, we don't have to do heuristic processing (highly recommended though if you are converting a Word Doc saved directly to HTML)

In the Page Setup, obviously choose your own model.

In Structure and TOC you'll be using expressions to find the H1 Tag, which is super simple.

//h:h1

I also like to have a table of contents at the start, so I add that, you don't have to add if you don't want to.

Once you're done hit okay and you're done.

Step 2b: Messy Word Processing

Now of you are dealing with the sample of the messy word, with an endless amount of chapters, but they all follow a simple logic, you can still generate a Table of Content and apply chapter breaks.
If unlike my sample CSS they also all at least look identical, you're CSS will be quick to style. In my example, I have a few different ones, so this will still be a bit of work.

First in your conversion, instead of the

//h:h1

you'll replace them all with a different expression. In my sample, they all ended up being in <p> tags, and since it was german, they use the German Kapitel (meaning Chapter) as a content string. Since it is fiction, it's also possible that Prolog and Epilogues are present, so I wanted to include that in the string too.

This will find all p tags that have a content of "Kapitel, Prolog or Epilog". So I'll put these in structure detection and Table of Contents wherever in the above pictures you see the h1 expression.

//h:p[re:test(., 'Kapitel|Prolog|Epilog', 'i')]

This then properly generates a TOC and sets page breaks accordingly.

But if we look through the book we see all of the ugly chapter headers.

Step 2c: Messy Word After Conversion CSS (advanced, don't do this if you don't know code, just live with the mess or make a formatted word)

If you are bothered (you might not have that many different ones) there's a way to fix this.

You can actually edit the code of your book.

By right-clicking you can edit the book and you'll see the editor with all the processed files.

By clicking on the different HTML files, you'll see the titles will have different classes applied to them.

Now in the case of our bold text, I'd recommend removing the strong tag wrapping around the element, unless it is done all throughout the book but in my sample it only happened once so I'll remove that. (it is also the only place the class .calibre5 is used, we'll delete that from the css too then)

While looking through I saw that all paragraphs are using the class .calibre4 and the titles had the classes .calibre3, .calibre6, .calibre7

So what I'd do to make them all look the same is open the css with all the styling rules and just combine all of these classes.

This is a messy job but I assume this is just to not trigger a nerve and the quickest way is combine css instead of adjusting all the HTML. So I'd delete css for calibre3, calibre5, calibre6, calibre7, and then write a combined selector for 3, 6, 7 with the same stylign I apply to my h1.

Amazon does not like combined selectors so in case you were trying to publish something like this I'm certain this file would fail. But it will work on your personal kindle.

Step 3: Testing Ebook

Before working on enhanced settings, send the file to your kindle. Connect to USB and send over. Look at them to make sure everything looks how you want it to. You should have properly looking tiltes, the Go to Option should work, a table of contents with functional links and actual page numbers.
Hyphenations will not be working and also if you have embedded fonts, they also won't be working yet and also the alignment option will not be available.

Step 4: Cover Display Bug

Now what I noticed was that the covers would show up in the thumbnail preview immediately and then no longer appear.
the fix I found was this.

1. transfer book to kindle
2. eject kindle in calibre
3. reconnect kindle
4. delete amazon-cover-bug folder from kindle folder that automatically opens up in explorer
5. eject kindle in calibre again

It's annoying, but that's a reliable way that should not mess up your covers.

Step 5: Enhanced Typesetting Second Conversion

Once your ebook works almost as you want it, it's time to make it a proper .kfx file. Install the KFX Output Plugin and then you'll want to use the .azw3 file as input and run the conversion.

Keep all the settings and just change the KFX output format.

Once the conversion is done, send via specific format and then choose the KFX file to send it to your kindle and enjoy fun good looking ebook with all the features.