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:
Quote:
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:
Quote:
<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>?