InDesign Object Styles Convert to DIV classes in EPUB Export
If you’ve been exporting EPUB files, then you’re likely already aware that EPUB is basically HTML with a little CSS, and that InDesign converts all its paragraph and character styles to CSS classes. For example, if you have a paragraph style called “para intro” then the exported xhtml file is written as <p class=”para-intro”>. ?Similarly, character styles (even if they’re used inside nested or grep styles) are converted into span classes:
So if paragraph and character styles should be converted, then why not object styles, too? Indeed, they are: object styles applied to a frame get converted into DIV classes in the xhtml, and are added to the CSS file, too.
This turns out to be very helpful when formatting images and captions, for example. You can group an image and a caption together and give the group an object style. The object style doesn’t have to look like anything in InDesign (it could be “empty” in its definition), but when you export the EPUB file and crack it open, you’ll see the div class. Here’s the xhtml file from an InDesign document in which I had applied the “imagewrap” object style to a group, and made that group inline where I wanted it in the story:
Note that each object inside the group is given its own div tag, and you end up with two different divs (one for the generic group, and one for the object style). Why? Because InDesign is trying to make sure you have to work hard. I don’t know; seems like a bug to me. So when you’re cleaning up the xhtml files (you almost always have to), you can remove the extra div and tags, to ensure that this is a single div:
Here is what the EPUB looks like with the figure and the caption appearing between the paragraphs:
Now you can style your group in the .css file. For example, in this case, I’ll change the “image-wrap” class to force a wrap (float) with a background color:
The result is dramatically different:
Object styles can be used in all kinds of ways to help speed up the process of formatting your EPUB documents.
 |
This is great info, David. One question: what’s the trick to getting formatting that came from a nested style to appear as a span? No matter how I try it, it gets ignored.
I was planning to use In-Tools’ script to make nested character styles explicit to overcome this issue.
The script is definitely the best way, Mike. I can’t find a link to it right now. Where on Harbs’ site is it? Or on this site?
@Mike : you have to reformat all the text strings formatted as Nested Styles by manually reapplying Character Styles. So F/C or script.
@Dave : it is not a bug but a feature. DIV are added within the group/DIV to give you more control on the formatting. For instance you can control separately the size of the photo depending the screen resolution and have a better control on text wrapping if you are crazy enough to try to include it in an ePub ;-)
I have a question for all of you exporting ePubs. Have you noticed an increase in the quality of the formatted images exported with the ePub feature in InDesign 7.0.3 released a week ago ?
Here’s the ID Secrets post: https://creativepro.com/converting-nested-styles-into-local-character-styles.php
Harbs’ script can be downloaded from here: https://in-tools.com/scripts.html
BTW, I’m in full agreement with Branislav. There’s nothing wrong with with having those DIV tags there. Anything that allows for more formatting freedom is okay by me. In your example there’s only two items in the group. But what if you had a two photos with captions?
Finally, I think it’s imperative to continually point out to print only designers that they must obtain a working knowledge of HTML and CSS if they want to be able to successfully work with EPUB.
Thanks Bob and Branislav!
I agree that it doesn’t hurt to have the extra div for the group; it’s just a matter of cleaning things up.
nothing wrong with two div tags. but what about wrapping groups into another div – this would be the most flexible solution:
<div class=”group”>
<div class=”image”>
<div class=”caption”>
</div class=”group”>
Oy!
Finding stuff on my site is a daunting task! ;)
Thanks Bob for pointing out where it was. I have a lot of useful scripts hidden on my site, but it’s like finding a needle in a haystack! :( We’re going to be organizing stuff so you can actually find what you are looking for. Honest! ;)
(We’re in the process of a site redesign…)
On the issue of two divs instead of one, I actually find that it is giving me less control in the CSS, not more. For example, if I want an image and caption to always remain together, I want to apply page-break-inside:avoid; or inline:block; to the named object style class rather than to the generic “group” class, which every group is tagged with. But if the image and caption are in separate divs, then those attributes will not keep them together because the image caption div closes and a new div (albeit with the same class) opens up for the caption.
I’m fairly well-versed in CSS, but I don’t consider myself a true expert in it. Maybe there is something I am missing.
This is a crucial aspect of what I have been facing in creating EPUBs from our books. If someone could address this issue (I know we are going off point from the original point somewhat), that would be very helpful.
Now with CS6 this useful things has been supressed because it was considered a “bug” WTF!?!?!?!
This has been immensely helpful, thank you!! I am currently working on an ebook with about 120 images, most with captions, and this post was the final piece of the puzzle to display them properly. I am learning a lot!
Senthilnathaswami also had an interesting point about keeping the image and caption together using either one or separate divs. I’m going to have to experiment with this myself.
I’ve been using this great trick for years to create custom pull-quotes. Now, with InDesign CC (ID7) the export forces any object to rasterize into an image. Yikes! If anyone discovers a workaround, you’ll be my hero.
For CC, any inline anchored object becomes rasterized when you output it. If it’s a text frame you’ll get a warning alert that it’s going to be rasterized. (You get the alert when you export it.) They did this to output standards-compliant HTML/CSS.
The solution for CC is to change those anchored frames to above-line or custom. If you used an object style, it’s easy to do this by editing the object style.
When I export to epub InDesign CC adds an extra to the I created in the objectstyle:
It complicates the formatting I`ve made in the css-class “div.ill”. Is there any way to avoid this?
Sorre, the <> dispapeared:
When I export to epub InDesign CC adds an extra <> to the <> I created in the objectstyle:
<>
<><><>
<>
It complicates the formatting I`ve made in the css-class “div.ill”. Is there any way to avoid this?
Sorry for this spamming. This is how it looks, without<>
DIV
DIV class=”ill” img alt=”Figur” src=”../Images/tander.jpg” / /DIV
/DIV
Might be better to take a screen shot of what ID’s export code looks like and how you need it to look … but in general, no, there’s really no way to stop ID from adding tags where it thinks it needs to.
How does it mess up your CSS?
I have found that Indesign CC 2018 change many thing in exporting to EPUB. In many situation even I had set div tag for object style for group of img and caption (so I tried with separate img and caption to another text frame that its style tag for div and anchored into the main text), Indesign ignored to wrap img and caption with div when I exported to EPUB. I don’t understand why. but It not practical for making a group of elements in XHTML document. I think Indesign (now) give many good features to reduce an attempt to direct revision in source code. But they made something unpredictable too.
I did a second try to find what this happen. I found that when I exported with Include classes in HTML, Indesign generated div tag for group and text frame with object style that tag for div. It look massy as it is. T_T