The Mystery of Ebooks
Ebooks 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.
- Start by saving a new working copy and consecrate it solely to the HTML export.
- In this copy, take out page numbers.
- 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.
- Delete the back cover. Make it so all you have in front of you is the body of the book.
- 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.
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.
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:
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:
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.
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:
<p>This is a se</p>
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.