Figure captions

[amoroso]

Based also on what I read here, I put together some code for adding simple, minimal, good looking figure captions. Both the figure and caption should be centered, with italic caption text slightly smaller than default. I would like this code to be generic, i.e. likely to work correctly across many reading systems. Here is the CSS code in the stylesheet:

div.figure {text-align: center; page-break-inside: avoid;}
img.figure-image {page-break-after: avoid;}
p.figure-caption {text-align: center; text-indent: 0; font-style: italic; font-size: 80%; page-break-before: avoid;}

And here is a typical HTML usage:

<div class="figure">
<img class="figure-image" src="../Images/my-image.jpg" />
<p class="figure-caption">This is the caption text.</p>
</div>

Is this code generic? What other useful styling may be added? Is it better to represent the caption text as <P> or <DIV>?

[crutledge]

Very nice. Should work well in Epub. I've never tried "avoid", but I see what you are trying to do. I also avoid () having the image on one page and the caption on the next. I solved the problem by incorporating the caption into the image.

Mobi does not recognize the CSS. Nor does it do tables well. I also avoid this by converting tables to images.

I like your thinking.

Charlie

[capidamonte]

In my opinion, <div>s are overused by everyone. They're particularly overused by computer-generated code, because it's a simple hack.

I get why you've done it here, but classes and ids would work just as well, and would simplify your markup.

For example:

<img class="figure" id="figure_01" src="../Images/my-image.jpg" />
<p class="figure" id="figure_01_caption">This is the caption text.</p>

With this you can apply a general center style to the class "figure" and specific styles to either img or p tags with the "figure" class. Oh, text-align: center doesn't apply to images, you have to tweak the margins. And if you need to do something to one figure individually, you could.

img.figure {margin-left:auto; margin-right:auto; page-break-after: avoid;}
p.figure {text-align: center; text-indent: 0; font-style: italic; font-size: 80%; page-break-before: avoid;}

Simpler, direct and less structurally complex. Plus, you get the bonus of being able to directly link to the ids in, say, a table of images. Or you could cut them out completely, and lose no functionality from your original example. The only reason I can see for using a <div> is that you might want to box and/or float the whole thing. But you could do it without a <div> anyway.

An even simpler structure, using generated content and adding the required alt tag:

<img class="figure" alt="This is the caption text." src="../Images/my-image.jpg" />

The CSS is somewhat more complex, sorta, but you only have to edit in one place, of course:

img.figure {margin-left:auto; margin-right:auto;}
img.figure:after {
content: attr(alt);
display: block;
page-break-before: avoid;
text-align: center;
text-indent: 0;
font-style: italic;
font-size: 80%; }

BTW, nothing is going to be generally applicable as there are no standards for markup and CSS that are shared between publishers. In fact, I'm willing to guess that most individual publishers aren't even particularly strict about having their own set of standards.

$0.02

EDIT: the generated content should work -- but it isn't working for me in Firefox. Anyone with an idea as to why? Typo? Syntax?

[Jellby]

Originally Posted by capidamonte

In my opinion, <div>s are overused by everyone. They're particularly overused by computer-generated code, because it's a simple hack.

I get why you've done it here, but classes and ids would work just as well, and would simplify your markup.

In this particular case, I think the use of a <div> is justified, as it marks up some structural element that's going to be handled as a block. I would "simplify" the styling the other way, though:

CSS (no need to use classes for things inside the figure):

div.figure {text-align: center; font-style: italic; font-size: 80%; page-break-inside: avoid;}
/* these two lines should not be needed,
   except to override other styles */
div.figure img {page-break-after: avoid;}
div.figure p {text-align: center; text-indent: 0; page-break-before: avoid;}

XHTML (an id is always useful for references):

<div class="figure" id="figure-01">
<img src="../Images/my-image.jpg" />
<p>This is the caption text.</p>
</div>

I'd add some "margin: 1em 0;" to the div.figure, too, and maybe some top margin to the p inside it.

Oh, text-align: center doesn't apply to images, you have to tweak the margins.

No, but it works fine if it's inside a <div> ADE, for instance, does not support "auto" margins. A <div> also lets you use the page-break-inside, which would work whether the caption comes below or above the image.

An even simpler structure, using generated content and adding the required alt tag:

But I think the ePUB standard does not support generated content, and styling the alt tag would be a nightmare (say you need bold type, images inside the caption, multiple paragraphs, superscripts...)

[amoroso]

Originally Posted by crutledge

I've never tried "avoid", but I see what you are trying to do.

I was actually unsure about that, but left the code anyway. I read here that few reading systems support `avoid'. The suggested solution is to start a new file with the image and caption, which reading systems process by putting them at the beginning of a new page.

Originally Posted by crutledge

I also avoid () having the image on one page and the caption on the next. I solved the problem by incorporating the caption into the image.

How do you incorporate the caption into the image? Do you put the caption into the image as graphics?

Originally Posted by crutledge

Mobi does not recognize the CSS.

I currently focus on ePub.

[crutledge]

Originally Posted by amoroso

How do you incorporate the caption into the image? Do you put the caption into the image as graphics?

Yep. I use GIMP and adjust the graphic size, move it into a new blank image large enough to contain the original image and the caption, add the caption with selected font and size and save the image with the original name. It almost takes longer to tell than to do.

Learning to use GIMP took a while as graphic folks have there own vocabulary, but there are good books on GIMP. And It's FREE,

Either way, have fun.

[capidamonte]

@Jellby: pretty elegant. I get the <div> thing as I said.

I also get the compromises you're suggesting for ADE and ePub. So, practical. After this many years, though, that we're still making compromises like this makes me sad.

Still, sick of <div>s. Between <div>s and <span>s, cleaning up badly formatted text is frustrating. It's like people have never heard of a single other tag than <p>, <i> and <b>.