digital publishing reference
There are several key elements in getting professional e-book results from InDesign. Learning meticulous document structuring and styling is perhaps the most fundamental of them, but that's a good general practice, not exclusive to exports. If there is one aspect of the process that's unique to success with InDesign EPUB exports, it's mastering CSS style overrides to change and fine-tune the specifics of ID layout to those needed by EPUB and Kindle.
The web-like XHTML and CSS nature of EPUB is constantly referenced in this tutorial collection and the parent book. It may seem like overhyped technobabble, or a complex way to do something that should be simple — I've often been told in exasperation that InDesign just "should" export perfectly to EPUB on its own — but CSS is the professional publisher's magic wand to get e-book perfection from even the best raw materials of an export.
This is a short essay with some accompanying files that are the real focus of the discussion. If you follow the steps to download the files and then export the hilariously awkward formatting of the test file, you'll see first hand the scope and power of CSS styling for EPUB export. Besides being entertaining and informative, it's a perfect lead-in to the more focused material of the other essays and the book. Have some fun with this one.
v1.00 – Published Online January 2024
Because we're decades into the WYSIWYG era, there is a reasonable assumption that the print, PDF, or even interactive output from an InDesign document will closely resemble what is displayed in the screen layout. Publication has usefully and rightfully become an almost purely WYSI medium, right from the first margin definitions.
That same assumption, though, can be misleading when it comes to e-book design. There are many reasons why (and we'll get to them), but getting a polished book page in InDesign to any equivalent on an e-book reader is neither straightforward nor guaranteed. As many a first-time EPUB creator discovers, What We See is not what a Kindle or EPUB reader Will Get. It can be extremely frustrating to try adjusting or "fixing" an InDesign layout to generate a desired equivalent on an e-reader screen, and that's before you discover it's all a moving target.
It's possible — make that likely — that future developments, more on the reader end than ID's, will make this process more reliable. Creating a polished e-book will become as easy — assuming equivalent skills — as a polished print or PDF page. But even then, it's likely some final guidance, tweaks and massaging will be needed to get an optimal export result. As for right now... Using CSS styles to refine EPUB output is the only professional e-book creation method available.
(Go ahead, argue if you must.)
The good part of that is that narrow option is that truly astonishing things can be accomplished by combining InDesign layout and document structure with this CSS fine-tuning method. Many results cannot be accomplished in any other way, at least, not with any combination of InDesign features.
Let's look at just how powerful CSS can be for this process, with a simple but dramatic example.
I am going to flip this essay into a reversal of the more usual format. Rather than walk through all the elements and technical explanations first, I'm going to let you first discover the power and potential of using CSS with ID export. And then we'll disassemble the details, a little, before sending you on to the more in-depth materials.
CSS styles, applied at the time of export, can completely modify all document styles. How much so? So much so that you are going to turn the page at right, a jumble of text with no formatting other than garish colors, into a polished beginning of an EPUB or Kindle book. And do so entirely in a single step, at the CSS level of the export process.
Go ahead, look closer at this clown-car "manuscript." Click for a larger view. That's the whole document we're going to process into six polished e-book pages, using nothing more than CSS override formatting.
So, with nothing up my sleeves...
Here's the step-by-step process to evaluate the CSS conversion sample. Besides being a fun little exercise, the steps will leave you ready to start exploring and implementing CSS styling for EPUB export on a more serious level.
E-book readers are (somewhat regrettably) needed to read e-books. We're going to work with the two most widely-used formats, so you will need two readers to preview the results:
Download packages for both of those can be located with a Google search. I'm reluctant to put direct links here since exact versions and download locations seem to change frequently.
The sample files for this demonstration can be downloaded from this link:
Unpack this file to a convenient working folder (preferably local or direct-network, not cloud or virtual). You should have five files:
Most of the settings that follow, tab by tab, are either defaults or the selected default for all exports you're likely to create under this model. That is, this step is mostly a one-time 'set and forget.' No, you won't have to go through this process on every export.
We will be switching this file as part of the tutorial. To do so when it's called for, repeat the load operation with FrontMatterFLAT-EPUB.css, then select and Remove the Kindle version. There should be one and only one of these files loaded at a time. (If you understand CSS, you will know why it's possible to load more than one.)
Again, all of those settings are persistent. You will not have to change any of those settings for the remainder of this example, other than swapping the CSS files. In routine work, most projects will be set-and-forget, with the occasional tweak.
You're ready to go: click OK on the EPUB export menu.
If all goes well, Kindle Previewer should open to a beautiful six-page book layout, from a half-title page through the sterling prose of Chapter 1. That result, from the goofy 'manuscript' in ID, is 100% created by the CSS code you loaded.
Now export the book again (Ctrl-E and specify a different name), but under HTML & CSS, specify the EPUB version of the CSS file, and under Viewing Apps, uncheck Kindle Previewer's auto-start. The result will be a new .epub file in your work folder. Open it with Calibre Reader to see a slightly variant plain-EPUB version of the six book pages. You will want to do these A/B comparisons for most projects unless you're publishing only to one platform or the other.
The whole purpose of this exercise/tutorial was to get you to see, interactively, how powerful CSS style control can be for EPUB and Kindle export. To sum up what you've already seen, CSS allows you do do almost anything with any text or inline elements, regardless of how they were set up in InDesign, or even if some style or layout aspect isn't possible from ID. (And yes, there are a few such things.)
Among other things, this allows you to use a comfortable, well-styled layout in ID even if your only intention is an e-book; the next level of that is to be able to produce both a print layout and an e-book export — dual format — from a single source file.
If you have CSS experience, you may want to open the two CSS files in a text editor (I prefer Notepad++; other editors like Visual Studio Source or even DreamWeaver or just Notepad are fine) and compare them, style by style, between each other and against the InDesign styles. There's a lot to learn at that bare-metal level.
This sample file, with a more standard layout and styles, is at the core of what I recommend as your next step, the long tutorial essay:
EPUB export from InDesign is sufficiently complex that it does not make sense to recap the whole process in this introductory (and hopefully fun) tutorial. Even the long tutorial essay that's next only summarizes some important settings and concepts. So from here, you'll want to read these additional introductions and references: