How to Make an Amazon Kindle Book using HTML and CSS
UPDATE 5/9/2022: Read at your own risk! This article is out of date and likely will not work in making a Kindle book in 2022. It might still provide interesting history and useful concepts so I’m keeping it up for posterity.
UPDATE 12/19/2017: I hope this post gets you up and running quickly. For a deep dive with far more details I recommend buying this book: The eBook Design and Development Guide by Paul Salvette. It goes into great detail and covers so much more than I could in one short post.
I’m going to show you how to make a Kindle ebook using HTML 5 and CSS 3. This tutorial cuts through a lot of the confusion out there by providing a step-by-step recipe and the boilerplate Kindle files you’ll need so you can start making your own Kindle books within less than 10 minutes. Amazon’s KF8 (Kindle Format 8) opens up new opportunities for designers by supporting all the wonders of CSS 3 and HTML 5 on Kindle devices. It’s an exciting (and, yes, still nascent) time for electronic book designers and I hope this tutorial gets you up and running.
I run Perry Garvin Studio, a design firm in Brooklyn, New York and we specialize in Kindle book design, publishing, and conversion, web design, user interface design, branding, and development. Learn more about us at http://perrygarvinstudio.com and email studio@perrygarvinstudio.com if you need help with your project.
Also, note that this article has translated into Serbo-Croatian by Vera Djuraskovic.
Onward!
Step 1: What You Need to Know
This tutorial is written for people using Macs. If you’re on a PC, keep reading, but you’re going to have to be on a Mac to make this recipe work. Check out one of the comments below for advice on how to get this to work on a Windows machine. It will also be helpful if you know HTML 5 and CSS 3 and are familiar with XML. And we’re going to do a little stuff in Terminal. Some people get nervous when the command line is involved, but don’t worry. Stick with me and you’ll be fine.
Step 2: The Big Picture
To make a Kindle book, you assemble a bunch of files and run them through Amazon’s processing engine called KindleGen. The file that pops out is a .mobi file. That’s the file that gets dropped onto your Kindle for reading.
Step 3: The Files
First, you need to make the files that comprise the book.
1) Download this ZIP of sample files that I’ve made for you
2) Unzip it and put the resulting folder called “My Kindle Book” on your Desktop
3) Trash the ZIP file
4) Open that folder and let’s go through these files one-by-one.
mycover.jpg
This is the cover of your book.
mykindlebook.html
This is the content of your book — what your readers will read. Keep the HTML simple and refer to Amazon’s documentation for details on how they want you to write your markup.
toc.html
This is the table of contents. You’ll see that each link points to a part of the Kindle book using anchor points.
style.css
This is your stylesheet and it’s how you’ll design your book using CSS 3. I’ve styled my book so text is green (cripes) and images float to the right. Amazon’s support for CSS 3 is relativelu new and pretty darn exciting because of the new design options it brings. You can learn more about the CSS 3 tags Amazon supports on its various devices here.
mykindlebook.opf
This is an XML file that tells the Kindle how your book is structured. Go ahead and open it up (you can use TextEdit if you don’t have a code editor).
The stuff between the <metadata> tags defines the metadata for the book using standard Dublin Core elements: title, creator, date, etc.
The stuff between the <manifest> tags tells Kindle where things are. For example, you’ll see that it has references to all the files we’re currently reviewing: the cover image, the book HTML file, the table of contents HTML file, the stylesheet, and the NCX file (I’ll explain that in a moment).
The stuff between the <spine> tags tells Kindle the order of how those HTML files should be read. Using this file, for example, when you open your book on a Kindle you’ll first hit the table of contents. Then you’ll hit the book contents. See how the “idref” in the <spine> elements match the “id” in the <manifest> elements? That’s how the spine knows what HTML files to present. That matching is required, of course, otherwise Kindle won’t know what to load. You can create multiple HTML files and define the order they will be accessed in the <spine>. Be sure to also make reference to those HTML files in your <manifest> so that Kindle knows where they are located!
toc.ncx
You know that bar along the bottom of a Kindle that has points that allow you to skip to various parts? The NCX file tells Kindle where those points are. The <navPoint> elements within the <navMap> tags define those points.
I also put a folder called “img” in the download and I threw in a nice de Kooning picture that you’ll see embedded in mykindlebook.html file.
And that’s it. These are the minimum files you need to build a Kindle book. So what’s next?
Step 4: Putting it all together
Go through this with me step by step:
- Zip the “My Kindle Book” folder by right clicking on it and selecting “Compress My Kindle Book”.
- Double check the ZIP that comes out of it is saved to the Desktop.
- Find that ZIP file and change its name to: book.epub
You’ll get a warning asking you if you want to use that extension. Yes, you do. So your file should now be called “book.epub”. It was a ZIP, now it’s an ePub. If only switching identity in real life was so easy. - We need to convert that ePub file to a .mobi file — the format Kindle uses. Luckily for us, Amazon made a program called KindleGen that does this for us. Time to download and install KindleGen. What follows is what’s correct as of this post in January 2018. If you’re reading this in the future, the process may have changed a bit. Always value Amazon’s KindleGen documentation over mine. This recipe works as of this typing, but I can’t promise it will in the future.
- Download KindleGen at http://amzn.to/wYEogJ . This is a tutorial for Mac users so download the one for Mac.
- Unzip it and change the folder name to: KindleGen
- Move it to your Home directory — the place where your “Documents”, “Movies”, and “Pictures” folders live.
- Open Terminal which you’ll find in the Utilities folder which is inside the Applications folder.
- At the command prompt, type
~/KindleGen/kindlegen
and press enter. - Now you need to navigate to your ePub file using the command line. This is the trickiest part of the tutorial because it requires a tiny bit of UNIX knowledge. Let me try to help. Type
cd ~
and press enter. That gets you to your home directory. Now type
cd Desktop
and press enter. Now you are in your Desktop! See? You’re a UNIX pro already. Type
ls
and press enter. You’ll see a list of whatever is on your desktop and in that list will be book.epub. Great. Now type
~/KindleGen/kindlegen book.epub
and press enter. A whole bunch of code should appear (hopefully without any warnings or errors). Now go to your Desktop and look: you’ll see a file called book.mobi
You just made your Kindle book!
Let’s look at it.
The easiest way is to download Amazon’s Previewer application which is a software version of a Kindle. You can get it here: http://amzn.to/w3jJLP
Once you’ve downloaded Previewer, open it up and go to File > Open and select your .mobi file from your Desktop. And there you have it: your Kindle book. You can also drag and drop the .mobi file onto your Kindle and read it there.
Something doesn’t look right? Typo perhaps? Well, you’ll have to trash your .mobi file and your .epub file and repeat Step 2.
Step 5: Final Thoughts
Here are a few helpful links:
Amazon’s Kindle Publishing Guidelines : The official Amazon guidelines on how they’d like you to produce your Kindle books. It’s full of all sorts of geeky details which will help you craft the perfect files.
About Kindle Format 8 : Amazon’s new file format for its Kindle devices
About KindleGen : Amazon’s application for producing .mobi files
About Amazon Previewer — Amazon’s application software for previewing how Kindle books look
Good luck!
