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.
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:
- Tag all text with paragraph (and character, where applicable) styles.
- 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.
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.
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’.
- 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.
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).
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.
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: