Taking the CS5.5 EPUB Plunge (Export Tagging to the Rescue!)

Adobe has been telling us, “Come take a swim in CS5.5, the water’s nice and warm!” I’d previously stuck in my toes and done extensive research from the side of the pool, but you’re never sure until you just dive in. So this past week I’ve produced my first five EPUBs in InDesign CS5.5, and I have to say, the water IS great! Well, OK, the first time was a huge shock, but now that I’ve figured out the quirks it’s certainly better than it’s ever been.

CSS Disclaimer

I write my own CSS for my EPUBs. I edit the EPUB contents. CS5.5 might do better than CS5 did, but it still does not do well enough for me to not go in to the contents and muck about with the code (view my test results of CS5.5’s full CSS export). If you’re one of the lucky people who can export an EPUP straight out of InDesign and live with it, than this article is not for you. If you’re not afraid of a bit of code and feel the need to “improve” your publication, hopefully this can help you test the CS 5.5 waters.

What NOT to do in CS5.5

My first EPUB in CS 5.5 was an update of an 800 page book composed of 30+ separate InDesign files containing about 40 styles. Yeah, I just had to start with a big one (bad idea). I decided to hold off on mapping all the styles to CSS tags (really bad idea). I’d heard it was possible, but I was afraid that it might not work as designed, and after all, I had a method that worked in CS5, and I had a CSS file already written and ready to go if InD could just export it in a similar way as CS5 did. I thought that if I exported using similar export settings the CSS should match up closely.

Wrong. CS5 uses all lower-case letters for class names, while CS5.5 automatically generates uppercase letters if you use them in InDesign. CS5 simplifies ” – ” to “-“, while CS 5.5 changes it to “—” for some weird reason. And that’s just scractching the surface. It’s as if the CSS parser wasn’t updated, but thrown out and rewritten from scratch.

And  the automatic class naming has a big problem. CS 5.5 allows us to manually map styles to CSS classes in InDesign (more on that later). What the documentation DOESN’T say is that if you DON’T map styles to classes, and your exporting from a book with multiple documents, your automatically generated classes are going to end up having numbers inserted after them for some odd reason; so, for example, you end up with subhead-1, subhead-2, subhead-3, etc, while in InDesign you simply had the style “subhead” used in several different documents in the same book. However, if you manually specify the class names yourself via Export Tagging, you won’t have this problem.

I eventually got my 800+ mess to work after doing a ton of Dreamweaver find/changes with expressions and wildcards, but it wasn’t fun!

Moral of the story: don’t try to do what you used to do in CS5 or other previous versions. It’s just not going to work. I should have known better; I had done demos of the new features CS5.5 was going to give us, but I was nervous about taking the plunge, and there was no lifeguard on deck…

But now we have Export Tagging. Now that I’ve tried it, I’ll never go swimming without it again.

Export Tagging To the Rescue (mostly)

In CS 5.5’s Paragraph and Character Style Dialog there is a new option on the left: Export Tagging. You can choose an HTML tag and CSS class to be used when exporting to EPUB. This is especially useful if you want to write your own CSS, as you can have your CSS file open in Dreamweaver and be writing it simultaneously while working in InDesign (which is how I work now). After producing my 5 EPUBs I’ve come to the conclusion that this is the simgle-most important new EPUB-related feature for anyone working with books for the simple reason that if you don’t use it your CSS file will suffer from the numbers problem described above. I highly recommend that you:

  1. Tag all text with paragraph (and character, where applicable) styles.
  2. Make sure that every paragraph and character style has its export tagging properly set.

Sounds simple…but it’s a bit quirky, and not very well documented. I had to test it a bit. Take a look at the tag options you can choose from; they include [automatic], ‘p’, and various headings. Then you can type in a class name or leave it blank. What InDesign will do depends on what you choose and what type of element is being exported.

Paragraph Styles

Leaving the class field blank will have different results depending on the situation, as explained below.

  • If tag is set to [automatic] and class is left blank, InDesign will automatically create a class name, and will automatically add numbers to it if it’s used in multiple documents in the book.
  • If tag is anything other than [automatic] and class is blank, InDesign will write a tag with no class. This is very handy if you’ve written your CSS to properly define default formatting. You write your CSS to define the default body text formatting, then you just use emptytags in the html. Your code is much smaller because you don’t need ‘class=”body text”‘ for every single body paragraph in your book. Likewise, your basic bullets, numbered lists, etc won’t need anything special either.
  • You MUST leave the tag on [automatic] for all numbered and bulleted lists in order for them to be exported properly.
  • This means that it’s currently impossible to create a numbered list that does not specify a class, even if no class is needed. And if you leave class blank InDesign will not only make a class name, it will do so erroneously, making multiple copies. To get around this problem I have all my lists set to export a dummy “default” class, which I can then search for and destroy in Dreamweaver.

An example of a list that should use default CSS formatting. Tag is ‘automatic’ so that InDesign will properly generate the list. However, with the tag set to ‘automatic’ if class is blank it will automatically create a class and add numbers to the name for each document in the book in which the style is used. Since no class name is actually needed, I’ve used a throw-away class ‘default’ that I can easily search for in Dreamweaver and remove.

So what tags to use? I’m not an expert on this, but my understanding is that for best SEO optimization you should use the various heading level tags (h1, h2, h3, etc ) to represent the structure of your document. How relevant SEO is  in EPUBs I have no idea, but it’s still a good practice.  For anything that’s not a heading or a list, use ‘p’.

Character Styles:

  • If you’re like me, you’ve made character styles that do nothing more than apply bold and italic. For the bold style, use ‘strong;’ use ‘em’ for the italic. You won’t need a class; you can leave it blank.
  • The CS5.5 interface does not allow you to select ‘stong’ and ‘em’ simultaneously, so if you have a bold italic character style, you’ll need to use a span tag and a specify a class name.
  • Other character styles should use span/class combos.

A character style that applies italics, set to the ‘em’ tag, with no class.

What about Export Tagging for Other Styles?

I discovered in CS5 that Table Styles export to ‘table’ rules, Cell Styles to ‘td’s, and Object Styles to ‘div’s. I was hoping to get some control over those as well in CS5.5, but sadly that’s not the case. Naming of these styles continues to be handled automatically in CS 5.5, and suffers from the same strange numbering problem as the other automatically generated class names. Still, a bit of find/change in Dreamweaver can eliminate the numbers so that these classes can be properly used to format your objects and tables, so it’s worth using them. And InDesign 5.5’s new Object Level Export Settings really help here (more on that in a future post).

Recommended Workflow

CS5.5 has revolutionized my production workflow. Now, when I begin a new book, I not only have InDesign open, but Dreamweaver as well. I have a CSS file in the folder containing the project files for my book, and I edit that CSS file in Dreamweaver as I work in my book. Every time I make a new style, I create a corresponding class in my CSS file, and I correctly set the Export Tagging options in the InDesign style. I make sure the only style overrides I use are ones that I don’t want in the EPUB — things like kerning, tracking, etc. to get type to fit on the printed page. When I export my EPUB, I select “use external CSS” and select the file I’ve built along the way. There’s a perfect match, and the EPUB looks great.

Feature Requests

Yes, Adobe, the water is quite nice, but not perfect. I’m hoping for future solutions to the following issues:

  • Automatically generated class names have numbers appended to them for styles appearing in multiple documents in a book.
  • It is not possible to export a list without a class designation due to a limitation in the interface.
  • It is not possible to select ‘em’ and ‘strong’ simultaneously due to a limitation in the interface.
  • The interface for adding Export Tagging to 40+ styles in a document for updating to CS5.5 export is cumbersome, as each style must be edited, then the Export Tagging option must be clicked, the tag and class chosen, then the dialog closed, and repeated for each style. An improved interface would be appreciated.

UPDATE 8/25/11: A reader has brought it to my attention that you can actually go to the paragraph or character style panel menu button and choose “Edit All Export Tags.” Then you can edit all tags in one nice tidy interface! So one if my feature requests was already present and I didn’t realize it. And I’m the one always telling my students to always check the panel menu options for hidden features! Here is a snapshot:

, , , , , , ,

7 Responses to Taking the CS5.5 EPUB Plunge (Export Tagging to the Rescue!)

  1. Rolley July 6, 2011 at 10:24 pm #

    Ahh its frustrating isn’t it!! I’ve come so far with my ePub creation over the last couple of months, especially with CS5.5 and all it’s good points… but then it really lets you down with just those few little seriously important things..
    The lack of tag exporting on tables and objects is really holding me up from the seamless workflow that I’m trying to get.. I actually just blogged about it myself, that’s how I found your post!

    Good luck anyway! Lets hope for better tag export options next time hehe : )

  2. Dave Brown May 5, 2012 at 12:19 pm #

    I appreciate finding your post. It reassures me that CS5.5 really is as bad as I thought. I tried every permutation/combination of export options and couldn’t get rid of those idiotic -#s except by doing regular expression replaces on the resulting files. As it is, I’m running 5.5 only for one publication cycle (upgraded from CS5 to take advantage of the post-CS6-announce pricing), but I’m sure we’ll find yet new problems in CS6. I’ll be back to see what you find and share what I can.

  3. Amy May 15, 2012 at 6:52 am #

    For what it’s worth, you aren’t limited to the tags listed in the drop down menu for the export tagging. You can type anything in you want there. So you could type li if that’s that you wanted or any other tag for that matter. InDesign just listed some common ones for convenience.

  4. Dave Brown August 7, 2012 at 8:04 pm #

    Well, CS6 is pretty much the same as CS5.5. I’ve written a bunch of JavaScripts to go through all the publications in a book and assign appropriate character styles for basics like bold, italic, superscript and another to export each file as HTML (for some reason, you can’t export the whole book). Then I’ve got a PHP script that further massages the output to get rid of things I don’t want and generally polish it so that my Dreamweaver template can take it the rest of the way. A lot of regular expressions and XML DOM manipulation to do things like convert … to .

    If that sounds like things other people need to do, I can try to post what I’ve done somewhere. The code actually has some comments in it already ;-)

  5. Wendy August 7, 2012 at 10:34 pm #

    Huge thanks to you for posting all of this – especially your recommended workflow advice. As a print designer, now learning EPUB skills, I couldn’t quite get my head around how to update my indesign file without having to export a css file, then copy the changes into a master file…. blah blah etc etc….. life getting very complicated, as I know enough CSS now to see how inefficient the indesign generated code is, but still SO far from really knowing what I’m doing.

    I’ll give the dreamweaver/indesign advice a go.

Trackbacks/Pingbacks

  1. Going All the Way With EPUBs in CS5.5 (and why that might not be a good idea) » Creative Progression - June 30, 2011

    […] « Taking the CS5.5 EPUB Plunge (Export Tagging to the Rescue!) […]

  2. Going All the Way With EPUBs in CS5.5 (and why that might not be a good idea) » Creative Progression - September 6, 2011

    […] I figured I while I was taking the CS 5.5 EPUB plunge, why not go all the way? I wanted to see how nice CS5.5 could make my EPUB look if left to its own […]

Leave a Reply