207 Fixing style collisions in EPUB output

- When you export a document to EPUB from within InDesign, InDesign looks at all the paragraph styles and reformats them into CSS styles in the EPUB. CSS Styles have a much stricter naming convention than InDesign's paragraph styles and that's where you might end up in trouble. This is an actual document from a client that I have obfuscated for this video that shows the style problem and allows me to show you the solution that we came up with. If we look at the paragraph styles for this document, you can see that their paragraph styles are named kind of strangely.

They have the same exact paragraph name such as example preceded with a 1 and a parenthesis, and then they also have an example with an a with two parenthesis, and example with an a and a bracket with a parenthesis following it, and they have an example with a 1 and a backslash. This all makes sense to them, this is how they've been creating these files for the past umpteen years. And now they want to move them to EPUB. Well, what's served perfectly fine for print and pdf is going to cause problems, because a lot of these characters are illegal in CSS names.

And normally, InDesign deals with that with equanimity. It just replaces the illegal characters with a hyphen, and replaces numbers that start out styles, which you can't use in CSS, with underscores, which is fine. But that's all it knows how to do, is replace things with underscores and hyphens. And when you have two style names with a different illegal character, it's going to replace them both with the same dash, and so, they're going to merge. InDesign calls this a Style Collision.

And you'll get a dialog box warning you about collisions in recent versions of InDesign. I'm going to go ahead and export this document to EPUB. This only happens when you export free flowable, by the way, not fixed layout. And click Save, the only settings that may matter are the fact that it's set to EPUB 3.0, though the same thing will happen with EPUB 2.0, and in CSS, I've disabled Preserve Local Overrides, which I always do, Include Embeddable Fonts. I'm going to click Ok, you'll see that we immediately get a warning, that says that we have two CSS name collisions.

The paragraph style called 1) enumeration and 1. enumeration generate a conflict. InDesign renames them both to the same style, _-- enumeration. That means that anything that was styled 1. enumeration is going to lose its formatting in the EPUB. It's going to take on the formatting of 1) enumeration. We have the same thing happening here, with two conflicting example paragraph styles. In the original project from the client, it was a book made up of 30 different InDesign documents totaling over a thousand pages, and we had over 150 conflicting style names.

The answer, usually, is to go back to the paragraph styles panel and rename them, so that they are unique. But when you have a lot of them to do, or the client doesn't want you to rename styles, then there is a better solution. That's what I'm going to show you now. But before we do that, you need to keep a record of what are the colliding styles. Who are the problem children? InDesign looks like it lets you select this text and copy it, and that's what I would normally do, and then paste it into a text frame in my document to use as a reference, but I've never been able to get the copy to work correctly, it's like it doesn't actually put it in the Clipboard.

That just might be a temporary glitch. So for now, what I'm going to do is to take a screenshot. And I'll use the Mac keyboard shortcut to take a screenshot of just this dialog box, which is command+shift+4, gives me little crosshairs, and I'll drag it over this, and then that saves it automatically to the desktop. Because in order to edit my styles, I need to close out of this warning. By the way, turned off Preview EPUB, that's why it's not opening up in Adobe Digital Editions. I'll place that screenshot right in my document.

And I'll zoom in a little bit, so we can see it better. The answer to fixing this collision problem without renaming your styles, is to map the conflicting styles to different class names. You could do that one by one, we could go to 1 enumeration and come down here to Export Tagging, and just give it a class name that is unique. That way InDesign won't rename the illegal characters to its default renaming, it will use this class name.

But a better way, if you have a lot of these, is to do it from the paragraph styles panel menu, the Edit All Export Tags dialog box. So here I'm going to look for 1 enumeration with the parenthesis, or actually, I have 1. enumeration already selected. I'll go ahead and change that class name to enum1 and then the one with the parenthesis is right here, we want to give this a different class name. I'll call it enum2, let's do the same thing for examples.

So there's 1\ example, call this example1 and then there's 1) example, we'll call this example2. That's it, click Ok. We can get rid of this. And now let's go ahead and export this once again to EPUB, and all we're hoping for is no warning dialog box, because we're not previewing it, remember? Click Save, Replace it. Okay, that's it, all the collisions are gone.

That is the fastest way to solve the CSS style naming collisions in InDesign. Use it in good health.