InDesign CS5.5, Export Tagging and ePub export frustrations

I’ve got one massive gripe with InDesign CS5.5 and it’s ePub exporting. It’s not specifically the ePub export, but also the half-done Export Tags options as well.

If you’re a CS5.5 user you would have probably noticed that you can specify tag export options for character and paragraph styles. It’s excellent, and is a massive help for producing ePub docs from InDesign.  Especially if you’re writting your own CSS for your ePubs, but once you bring tables and objects in to the document, InDesign drops the ball big time.

The problem

CS5.5’s massive failure is that you can’t seem to add export tagging to table, cell or object styles in InDesign; and what’s worse is that the ePub you export will use a new class name for every table or div (which was an object in your InDesign doc).  This defeats the purpose of adding a class altogether, it’s as if InDesign logic treats adding classes like it does adding IDs (in HTML/CSS, IDs have to be unique whereas classes don’t).

So; for example, in my case I have several docs to my Book; each document has different types and amounts of tables. These tables are for completely different things and I need them styled differently. Even though in InDesign I’ve used totally different table and cell styles, the ePub will append an incremental digit on the end of each class name for each table!!!!

This is what you would expect InDesign to do:

<table id="table-1" class="Basic-Table">
  etc
</table>
<table id="table-2" class="Basic-Table">
  etc
</table>
<table id="table-3" class="Fancy-Table">
  etc
</table>

But instead, it does this: (note the -1 and -2 after the class name… tisk tisk)

<table id="table-1" class="Basic-Table-1">
  etc
</table>
<table id="table-2" class="Basic-Table-2">
  etc
</table>
<table id="table-3" class="Fancy-Table-1">
  etc
</table>

And again, I need to re-iterate, this is only really a problem if you’re attaching your own CSS to the ePub; because when InDesign generates the CSS for you it actually creates ALL THOSE CLASSES, which is pretty stupid really but at least it works.  The shortcoming overall is that you also just can’t do as much unless you really DO write your own CSS for the ePubs, and also, who the hell really wants to have to unpack, edit, and repack their ePubs if they’ve got a workflow of hundreds of books to do? Not me, and not a lot of other people!

A partial fix

So, you can imagine where all this leaves me.  CSS3 can help!  But, again, this is really disappointing, only iBooks on Apple devices will render this properly, if you’re using Adobe Digital Editions or Aldiko eBook reader or anything else on the Android, it doesn’t work.  By using CSS3 you can capture the tables still and apply styles to them like this:

table[class^="Basic-Table"] { styleshere }
table[class^="Fancy-Table"] { styleshere }

No real solution, yet

So, the short of  it is, if you want to style up tables and objects, and have them display correctly on Adobe Digital Editions or Aldiko etc, then you either have to wait for:

• the eBook reader companies (except Apple who have owned everyone) to get their eBook apps to render CSS3 like the above; or
• Adobe to release a patch or upgrade to add Export Tagging to tables and objects, which would then let you specify a static class name for tables and divs.

I wonder if either will happen any time soon? I hope so….

If anyone OUT THERE has a solid fix, or ideas to try please comment.

Easily force left alignment in ePubs viewed in iBooks

Finally! I figured out a much more seamless way to force the headings and any other content to be left aligned in our ePubs for iBooks.  The goal of my ePub creation is really to have a seamless process, we can’t afford the time to unpack, edit html/css, and repack files just for one document… so everything needs to be able to come straight from InDesign and be ready for viewing in iBooks.

I’m also assuming that a large proportion of users probably don’t even know how to turn off the full justification setting for iBooks.. I mean, I didn’t realise the options were in the settings on the iPad for a LONG time myself.. So, by forcing the left align on the headings at least the ePub will look and read nicer with the justification setting still turned on.

The only solution I saw on the net to solve the left-aligned problem was to edit the html of the unpacked ePub (which is a massive no for our workflow) and add a span element inside the heading tags. It got me thinking though, and the idea suddenly came to me.  Get InDesign to just do it for you.

First off, create a new character style in your master document (the one that synchronises styles between all the docs in your InDesign book). Call it something like leftAligned. Go to the bottom option, tag formatting, set it up so a is added with the class of leftAligned.  Now, in your css file (the one you use when you export your ePub files) you can have a class that looks something like:

span[class*="leftAligned"]{ text-align: left; }

* little note; just found out the span doesn’t even need to have any styles at all, oh well!

Now, to use the character style and get InDesign to do the work for you; do a find and replace for every document in your book; and what I did was search for any H1 paragraph styles, and have it apply the leftAligned character style to them. I then did it with every other heading type and the referencing paragraph styles.

When I exported to ePub and viewed in iBooks, FINALLY I saw left-aligned headings. MUCH nicer, and much easier than unpacking, editing, and repacking the ePub.