Two Default Styles to Add to Every InDesign to EPUB Conversion

  • Sumo

InDesign’s Export to EPUB features are a huge step toward generating EPUB files without needing to hand write all of your code. Its ability to generate a CSS stylesheet from your InDesign styles is one of the major advantages, but it’s by no means perfect.

The good news is that InDesign allows you to add an additional stylesheets to your EPUB files. This allows you the opportunity to add additional styles you need without trying to muddy your print files. I’ll list two that I add to every EPUB file I create out of InDesign and explain each.

How to Add Additional Stylesheets

First, let’s talk about where to add these. While I will go into further detail about the Advanced Pane in a future post, for now Just choose File > Export… then select “File: EPUB” from the pulldown menu. Once the Export Options Pane pops up, choose Advanced from the left hand menu.

Screenshot 2014-05-22 18.02.39

Under the heading “Additional CSS:” click on the “Add Style Sheet…” button and then navigate to the css file you want to add. Once added, InDesign will remember this stylesheet during future exports so you may want to place it in a location that won’t get moved or lost.

You can add multiple stylesheets if you want. One option might be to add a basic stylesheet that contains fixes like below, and another for any fixes specific to the title.

On to the fixes…

A Fix for Nook devices

If you followed my instructions in the basic EPUB export settings and remove margins, you’ll find that Nook and Kobo devices and Adobe Digital Editions end up with zero margins on their pages. Here’s a quick fix to add to your stylesheet to overcome that issue:

@page {
	margin-top: 30px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 20px;
}

Only Adobe Digital Editions and Kobo/Nook devices (which use a rendering system from Adobe) read the @page syntax. This adds some margin to the page without affecting other ereaders that have margins built into them. (FYI: These values come from Matt Harrison’s excellent Ebook Formatting book.)

Override Paragraph Indentations

If your InDesign title uses indented paragraphs, you may think those values are all you need. Unfortunately that’s not really true. If you set the indentation in points, InDesign will convert these to pixels which will not scale with font size changes and can lead to nearly invisible text indents. Here’s a fix.

p.indented {
	text-indent: 2em !important;
}

The key here is to make sure you apply this to the correct class. InDesign will convert your Paragraph style to a class by removing any spaces and using camelcasing. So if you have a paragraph style called Basic Indent the class will become .basicIndent. In the example above the Paragraph Style is simply called Indented. You also need to include the p tag in front of the class to override any styles InDesign might have applied. I add an !important declaration in there just to be safe. I find 2em to be a pretty good default text indentation setting.

Your Turn

These are the two styles I include initially, but I bet some of you seasoned InDesign to EPUB convertors have more to share.

14 Responses to “Two Default Styles to Add to Every InDesign to EPUB Conversion”

  1. Is there a CSS fix for how iBooks displays the number in pop-up notes? The huge footnote number in that window is not only pointless for a pop-up, but since text wraps below it, it takes up far too much space, forcing users to scroll down to read what they came for. It makes no sense.

    All that’s needed to to make the footnote number smaller–much, much smaller.

  2. Derrick Schultz says:

    I’ve been trying to find the same thing with no luck. I’m not sure it’s actually an HTML element (might be on the ObjC level). If I ever do find it I’ll be sure to let you know.

  3. Yes, I suspect it’s hardwired into the iBooks app for both iOS and OS X, since both display pop-up notes the same frustrating way. If so, Apple will need to make the change. Here are the feedback pages:

    http://www.apple.com/feedback/ibooks_ios.html

    http://www.apple.com/feedback/ibooks.html

    I’m actually quite excited by the potential pop-up notes offer. Authors could, for instance, create a read-twice murder mystery. The first time notes could be hidden and not consulted, so the reader is operating blind. The second reading, notes could be made viewable and consulted. There the author could explain to readers the hints he slipped into the text. For only a little more effort, an author could make his books much more appealing.

    That, for course, hinges on being able to turn note visibility on and off. Without that ability to turn notes off, the very presence of that note indicator says, “Look carefully for a clue here.”

    The same technique could be used for fantasy and sci-fi tales that are rich in background. The notes could explain that background without cluttering the narrative. Read the first time for the sheer pleasure of the narrative. Read a second time for the backstory.

    It’d be great if ePub offered at least two types of pop-up notation. One would be for items worth reading and could include pictures and maps. The other would be the source references that most readers won’t consult.

    Alas, I am so frustrated by how slowly digital standards are moving. Too much emphasis has been placed on giving ePub the ability to embed video and audio, despite the fact that most publishers and authors can’t afford to create that sort of content with any degree of professionalism. Too little emphasis has be placed on:

    1. Making sure ebook can display books as richly formatted as ebook. That is improving.

    2. Looking for ways digital can give a better experience than print, with pop-up notes being one example. Pop-up maps and illustrations would also be great. It’d bypass all the page-break problems connected with reflowable text.

    3. It’d also be great if ereaders knew elementary book layout and wouldn’t leave headings at the bottom or page or create widows and orphans. Everyone would benefit if ebooks looked better.

    –Michael W. Perry, co-author of Lily’s Ride

  4. Erin says:

    I’m curious why you don’t just use the Margins fields in the General tab during EPUB export to set your Nook/Kobo margins? It outputs as @page in the InDesign generated CSS.

  5. Derrick Schultz says:

    Oh, that’s interesting. I had assumed it was adding margins everywhere. Those fields don’t make that very clear. I’ll plat around with it and then update the post. Thanks!

  6. Bruce Santos says:

    Hey guys!
    I’m part of a startup that’s building an eReading platform (like oysterbooks.com but in a different country). We’re using ePub 3.0 as the norm and I’m trying to find the best approach to normalize the formatting of all ePubs we receive to a standard.
    We’re still not sure if we can use a CSS on top of them all OR if we should open every ePub in InDesign and reformat it by hand (huge work, maybe a script?) to create a standard of our own OR if we have to do both.
    Can anybody point me to the right direction? Some literature or someone I can talk to.
    Thanks in advance.

  7. I couldn’t resist commenting. Exceptionally well written!

  8. Kali says:

    The 3GP is a multimedia file created by the Third Generation Partnership Project of 3GPPP used on 3G mobile phones.
    Internet is an efficient source to gather specifics of the latest introductions stated above earlier.
    Although there are countless advanced sound recording applications
    designed for Windows 7 computers, why purchase one when you can use the default application that your computer came with.

  9. I’ve just bookmarked this page, great site!

  10. Evan Ward says:

    Excellent writing, i did read it two times so sorry for this, i have passed it on to my associates, so with a bit of luck they should get
    pleasure from it as well.

  11. Kristen says:

    Une grosse erreur à ne pas commettre avec votre photo que la plupart des hommes
    ignorent et qui anéantit toutes vos chances d’être contacté en premier par une femme (le fait d’en être
    conscient vous donnera un avantage ÉNORME).

  12. I’m not that much of a internet reader to be honest however your
    weblogs are very nice, keep it up! I’ll proceed
    and bookmark your site to return in the future. Good luck

  13. MattMc says:

    I know this is 2 years old, but I just happened to see this when I was trying to solve an entirely different problem.

    Check out: http://www.mobileread.com/forums/showpost.php?p=3159382&postcount=47

    You can see the code of the popover (at least in iBooks for OSX) and the CSS that’s making that number big. You could try inserting an inline tag into the body of your footnote, targeting that element with similar CSS (but add “!important”). It’s not valid HTML per the spec, but apparently most browsers support such things.

    Anyway, that would be a hack, but you could perhaps accomplish it.