pen and book
BACK TO TOP ▲

digital publishing reference

 

CSS Magic for EPUB Export

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

CSS Magic for EPUB Export
James Gifford


You Don't Always Get What You See

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.

Treat First, Tricks Later

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...

The Technical Walkthrough

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

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:

  • You should have a completely up-to-date version of Kindle Previewer installed on your system. Even if you are only planning to export to EPUB, it's a good basic proofing tool.
  • You should have a good, "vanilla" — standards compliant and no more — EPUB reader installed on your system. The currently recommended one is Calibre, which brings a host of other e-book management and modification tools that are not really an asset, but the Calibre reader is the closest to a plain-vanilla, standards-based reader available. If you are using any other EPUB reader, your results may vary considerably and document optimized for that reader may display quite differently — often badly — on the more standardized readers.

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.

Sample Files

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:

  • FrontMatter Example FLAT.idml
  • FrontMatterFLAT-EPUB.css
  • FrontMatterFLAT-Kindle.css
  • granny.jpg
  • NSPlogo.jpg

InDesign Setup

  1. Open the IDML file with any recent version of InDesign (v18.0 or later recommended).
  2. Save the file, in the same folder, as a regular INDD file under any convenient name.
  3. Make sure the two graphics files are correctly found and linked. Save again if necessary.

EPUB Export Setup

  1. Open the Export Menu (File | Export or Ctrl-E).
  2. Be sure you are in the working folder, and specify an export file name.
  3. Select EPUB (Reflowable) from the Save as Type: drop-down list at bottom.
  4. Click Save.

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.

EPUB Export General Tab Settings

  • Select Version: EPUB 3.0
  • Select Cover: None
  • Set Navigation TOC to File Name and Content/Order: Based on Page Layout
  • Check Split Document; select Based on Export Tags

EPUB Export Text Settings

  • Uncheck Remove Forced LIne Breaks
  • Set Placement: End of the section
  • Set Lists/Bullets: Map to Unordered Lists
  • Set Lists/Numbers: Map to Ordered Lists

EPUB Export Object Settings

  • Uncheck both Preserve Appearance... and Use Existing Image...
  • Set CSS/CSS Size to Fixed; ignore other settings (including SVG) for now
  • Uncheck Ignore Object Export Settings

EPUB Export Conversion Settings

  • Set Format to JPEG and Resolution to 150
  • Set JPEG Options to Format Method: Baseline and Image Quality: High

EPUB Export HTML & CSS Settings

  • Select Include classes...
  • Check Generate CSS; leave all Page Margin values at 0
  • Check Preserve Local Overrides
  • Uncheck Include Embeddable Fonts
  • Click the Add Style Sheet... button.
  • From the file list that appears, and in your working folder, select FrontMatterFLAT-Kindle.css and click Save.
  • That file should now appear in the Additional CSS list.

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.)

Remaining Pane Settings

  • The JavaScript and Metadata panes should be empty of data except for a long Identifier string in the latter. Make no changes in these panes.
  • And finally, under Viewing Apps, the System Default should be Kindle Previewer, if you installed it correctly. If you check the box, exports will be opened automatically by KP and displayed. Other readers can be added to the list and similarly auto-enabled and disabled.

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.

Annnd... Export!

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.

Cool, eh?

Export Again

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.

A Little of the Why and Wherefore

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: Mastering the Details

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:


Site & contents ©1999-2024 Nitrosyncretic Press LLC  —  CONTACT  —  sitemap