InDesign EPUB Export Sucks (and How to Get Around It)

The Mystery of Ebooks

VertigoEbooks are still frequently a quandary to the small-to-mid-sized publisher. But with rising sales of ebooks and the popularity of mobile devices, there comes a time when you must look the ebook in the eye and face the future–or face the fad, at least. (I don’t know if ebooks as we know them will be around in ten years. I just know they’re around now so we better deal with them.) Anyway, realizing this, maybe you give in and poke the InDesign EPUB export button, just to see. InDesign chugs and spurts and gurtles a little bit and then spits out an ebook. You think, “Oh! How easy was that?” But then…the book is opened and the nightmare begins.

The nightmare is the slow-learned revelation that ebooks are not necessarily easy, despite the existence of tools that claim to be able to produce them from other file types at the push of a button. Only if your page layout is like that of a straightforward novel with no illustrations or special formatting is there a blessed chance in heck that any automated ebook export will produce a book that looks halfway good with no additional labor. This is especially true of many InDesign layouts, because you will have layers and graphic frames and fonts and style overrides up the wazoo. All this fancy formatting that is great for print will not translate. Here is why in a nutshell: Ebooks are basically HTML, and not advanced web2.0/webapp/skynet HTML, but stripped-down, carved in a stone slab as Cuneiform kind of HTML–no layers, limited positioning, tricky-to-non-existent font embedding…It’s barbarian by web design standards.

However, there is a solution to this, and that is to make it TAO. EPUB books don’t allow a full array of styling control, and so you must relinquish control. The solution to the issue is “Simplify, simplify, simplify.” Thoroughly simplify–or Thoreau-ly simplify, as in Henry David Thoreau-ly, since I believe that is his quote. In simplicity, your document will find the elegance of ebook beauty. Embrace white space, embrace the inability to layer or position, and embrace the fact that ereaders may or may not substitute their plain defaults for your special fonts. Most of all, you must embrace the concept of flowing text. You have almost no control over how any given page will look.

The solution comes by facing this fact: that an ebook is basically an HTML document, and to produce a really great EPUB, you must treat it as such. Rather than going straight for the ebook with an InDesign EPUB export, I recommend exporting HTML as a middle step and getting hands-on with it. If HTML is not your bag, you don’t have to dread it necessarily. This might, in fact, be a great way to learn a little. Please suspend judgment until you read what I suggest, and then decide whether to run in terror.

To answer the objection possibly forming in your mind: yes, this is more work than pushing a button, but it is more work in just the same way that picking up the dog doo out of your yard is more work than leaving it be. It’s the right way to do it.

Step 1: Export to HTML

So the key is not to fight to preserve the hard-won formatting of the print version in the ebook. Instead, you will want to strip out as much as you can. Relinquish it. Let go.

  1. Start by saving a new working copy and consecrate it solely to the HTML export.
  2. In this copy, take out page numbers.
  3. Export the cover as a static jpeg (high quality of course) and then delete the cover from InDesign. You will reattach this severed head later, when you convert to EPUB.
  4. Delete the back cover. Make it so all you have in front of you is the body of the book.
  5. Deal with layered or multi-object images/diagrams/graphic ads/etc, in the following manner:

Layered and vector images aren’t going to come out right unless you have the right settings. For each instance, e.g. a full page graphic ad, you’re going to want to group all the elements of the image/page together (select them all at once and do Object>Group) and then set the object export options for that group. Under the “EPUB and HTML” tab you want setting like those below. Use the same options I used in the example of this very legit-looking book cover.

ObjectExportSettingsCrop

Having done that, you are ready to export some HTML.

HTML Export Options

The first step of the export is a save dialog. Choose the filetype HTML, duh, and the drop location. Hit save but don’t worry: it will have questions for you to answer before it finishes the deed.

When confronted with this array of choices, remember simplicity. Don’t choose to ‘preserve the appearance’ of your images from layout. Don’t choose to preserve overrides. Select ‘generate CSS’ so that some of the work will be done for you, but we want it as minimal as possible.

HTMLExportOptions-Images

 

HTMLExportOptions-Advanced

InDesign will now drop not only an HTML doc but a “web-resources” folder containing your optimized images and CSS in your chosen location.

Step 2: Clean Up HTML and Un-InDesign the CSS

You don’t need to be a web-design savant to pull this off. The HTML and CSS compatible with current common ebook technology is a limited set, and I can tell you a few of the important things you will have to UnDesign from the InDesign outpoop–er, output.

I enjoy digging into HTML and CSS using a good text editor with a browser window open alongside so that I can refresh frequently to observe my changes in action. I use Text Wrangler on my Mac; Notepad++ is a safe bet for Windows. Both are free. Open both your HTML and your CSS in your text editor.

If you open up your HTML doc in your browser before you do anything else, you can see just what’s wrong. Use this to target your attack on the markup. Although not identical, the final ebook will look a lot like how your browser renders it. Expect the ebook reader to add in margins and page-breaks.

Aboard the CSS Enterprise

You will likely see bunches of <div class=”Basic-Graphics-Frame”> and <p class=”Normal”>. Now all you are going to need to do to accomplish most of your re-formatting is simply replace these default style names with new ones that make the right declarations.

For example, first of all, you might go ahead and drop new paragraph styles into your CSS. Just overwrite what’s there for p tags unless you know there’s something you want to save. Select and replace ’em with something like:

p{
font-family: sans-serif;
line-height:1.5;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
text-indent:2em;
}
p.initial{
text-indent:0;
}

p.center{
text-align:center;
}

Then you can just work through each section of your book replacing “Normal” with, say, “center” for a caption, or “initial” for a section-initial paragraph where you don’t want an indent. Because we inserted declarations for a naked p tag, all your paragraphs should already take on the new style even if they are called “Normal” or anything else. So you don’t need to change the style of all or, hopefully, even most of your paragraphs.

We can do the same maneuver on the “Basic-Graphics-Frame”, or whatever default div popped out in your case. Toss some div styles into your stylesheet. I.E. if you know you have sidenotes to deal with (which will have to fall into the flow of the body text in an ebook), give ’em background color to stand out from the regular content:

div.sidenote {
background-color:gainsboro;
}

And, as you work through your sections, just give that class to any sidenote div you find. Savvy? You can actually progress at a pretty brisk clip through a document this way. It’s a lot more work than push-button conversion, yeah, but this way you’re doing it right. This way you control what your readers see, rather than leaving that up to an inhuman algorithm with the aesthetic IQ of a TI-89. Is that the name of a calculator or a model of terminator? I can’t remember. Either way, neither one of those machines is much renowned for its artistic talent.

Where was I? Oh yes. If you are preparing several similar books as ebooks, you can even come up with a standard set of CSS to paste into every new InDesign export. No need to reinvent the book every time.

HTMLOL

One thing you’ll quickly notice about your exported HTML is that things have been plopped down in weird places. In fact, it may almost seem like InDesign has maliciously searched for the least appropriate places in the flow of the document to place images, captions, footers, sidenotes, etc. Let it not surprise you to find a footnote breaking into the middle of a regular sentence half a page removed from the footnote’s print location.

As you work through the document it will just be a matter of cutting and re-pasting these errant <div>s into more sensible locations.

Similarly, you might have to join together bits of text that belong together but which have been cut into multiple div and/or p tags. You should be able to catch these by scanning in the browser for paragraphs starting with lowercase letters. Most of these seem to come from pagebreaks in the print layout.

InDesign does this:

<div>

<p>This is a se</p>

</div>

<div>

<p>ntence.</p>

</div>

Just delete from the first </p> to the second <p> and you’re golden.

When the book looks good in your browser and you are getting ready to compile an ebook, always be sure to validate your HTML. If you validate the CSS too, you can expect InDesign to have violated a few CSS3 standards, but fix them or not, they shouldn’t break your book.

Step 3: Convert HTML to EPUB

I use Calibre for most of my ebook conversion tasks and recommend it. We’ve blogged about this process before in terms of Calibre’s touted ability to convert straight from DOCX files. The process here should be similar, but better because we are working with HTML, which is basically the heart of the EPUB already.

Stay tuned for an walk-thru of Calibre conversion from HTML, which, I think, deserves a post of its own. I’ll include a couple of counter-intuitive tricks you might not know about.

6 Replies to “InDesign EPUB Export Sucks (and How to Get Around It)”

  1. ag

    Bret,

    I didn’t think about it until she, herself, reminded me. But it is a good sign, in my opinion, that the process you have worked out and document in this series of posts closely resembles the one that Ana Henke’s group has been using for quite some time for Extension publications at New Mexico State University (NMSU).

    There are differences at the level of InDesign settings and specific tools but the general outline of InDesign -> HTML -> cleanup -> conversion is the same.

    I thought we had already passed along links to Henke’s documentation of her process but it turns out I’ve only done so in some emails, not here on the site.

    So, for anyone looking for some additional info on ebook conversions based on InDesign documents, please check out either the PDF version
    http://edis.ifas.ufl.edu/media/ACE/PUBSIG/NMSU_eBookConversionProcess.pdf
    or the video
    https://connect.extension.iastate.edu/p4yar80zz68/?launcher=false&fcsContent=true&pbMode=normal

  2. Josh Bergan

    I agree with Bret’s advice and plan of attack. We at Wilderness Adventures Press haven’t done much with epub, but we have with .mobi (the Kindle file type). It’s a similar process with similar struggles, especially for graphic/photo heavy books like our state-by-state flyfishing guides. We lay our books out in for print in InDesign, then take those same files and reformat the layout for the reflowable style of ebooks, and save separate files. We haven’t done much with the HTML or CSS manipulation, but we have learned how to layout the elements so that they display properly in a Kindle. Specifically, whatever shows highest on the page (the top of a text box, the top of a photo, graphic, etc) will appear first in the ebook. The next highest element will not display in the ebook until the completion of the first element, and so on. So you have layout in a top-down style, without regard for its appearance in InDesign (it will look awful, design-wise). So once you have it how you think it’ll work, export it and see. Lots of trial and error involved. As for graphs or charts created in InDesign, I’ve found it’s easiest to do a screen-capture and save as a .gif file, instead of trying to format that stuff to display properly in a Kindle (that could take way more time than we have per book). It might take a few days, but eventually you’ll have a file that displays and behaves right, without HTML or CSS manipulation. If you have a grasp of HTML or CSS, that might be an easier way to get it all right – I wouldn’t know. Hopefully this makes sense – it’s a bit of an esoteric thing if you’ve not done it before. – Josh

  3. Bret Norwood Post author

    Josh, that makes perfect sense. For me, it comes down to the fact that I am more comfortable with HTML/CSS than InDesign, I guess. Also, I haven’t tried the Kindle Plugin yet, if that is what you are using.

    When I go to export either HTML or epub, InDesign (9.0) only allows me to order the content “based on page layout.” “Based on XML structure” is shown but disabled. When I use “based on page layout” it tends to order things rather unpredictably. It will insert, for example, a footer containing a page number in the middle of a paragraph on the wrong page. So, with the setup I have, the page-layout-order strategy doesn’t seem to help me for HTML or epub.

    Do you think it is the Kindle Plugin that makes this work well for you, or do you know of better export settings I could be using?

    Thanks for your comment!

  4. Tom Barkoukis

    Can this be done with InDesign CS5? I’m tasked with converting a 352 page autobiography with lots of photos (no vector fortunately – all .tifs) to EPUB. Photos include many in wrap-around text style throughout. Am I doomed? Thanks,
    Tom

  5. Bret Norwood Post author

    Tom, I haven’t used CS5, but I would guess the process is similar. Any readers chancing by who know?

    I had problems with images getting relocated poorly. If there are a lot of them in those 352 pages, I would budget a good amount of time for fixing them. Also, in my experience, wrapping text is a problem. The HTML export should remove it, but you can’t add it back, because (I don’t think) css floats are allowed in epub (but I may be misremembering). But because of the variable page width you probably wouldn’t want text wrapping anyway.

Leave a Reply

Your email address will not be published. Required fields are marked *