Image plus Caption in ePub

An image and its caption (or short associated text) should be glued together on the same page. There’s an easy method for doing this in an ePub. Although it doesn’t work with Kindle KF8, it will serve you well in ePubs that you publish with iBooks or most other outlets. If you feed ePub files to Kindlegen, there’s no need to remove the CSS that does the trick; it will simply be ignored.

CSS Magic for ePubs

Create a div to wrap around the image and caption. Style the div using display: inline-block and page-break-inside: avoid. If the div should be centered, an outer wrap will help Adobe Digital Editions, which ignores centering in the inline-block.

The div enclosing the image and text is a percentage of the available width or height (not both!) so that it’s always the same size relative to the viewing area:

<style type="text/css">
 /* An outer wrap helps when image and caption must be centered */ 
 div.wrap {
   margin: 1em auto;
   text-align: center;
   } 
 /* Enclose image+caption in a div at desired width or height. 
    Use a percentage for responsive resizing */
 div.wrap-inner {
   width: 60%;
   display: inline-block;
   page-break-inside: avoid;
   }
 img.wrapped {
   width: 100%;
   display: inline;
   }
 span.caption {
   font-size: 90%;
   }
</style>

Tip: IF you use illustrations in consistent sizes, you could define styles for several inner wraps of different widths. If your images often vary in size, inline styles for width or height will keep your stylesheet lean and less cluttered.

Screenshots of the wolf from Red Riding Hood are from Adobe Digital Editions before and after dragging the viewport to a different size. Click to enlarge:

How About an SVG Wrapper?

SVG works with ePubs and is resolution independent. Given the wide range of resolutions on tablets and eReaders, resolution independence makes SVG a very attractive format. Nevertheless, making a bitmapped image (JPEG, GIF, PNG) and its caption responsive caused spacing problems in my ePub test files on Adobe Digital Editions, and on the Kindle.  There’s no compelling reason to use an SVG wrapper to keep an image and its caption together in an ePub, but I’ve spent several weeks trying to make it work on Kindle and will cover my progress or lack thereof in another post.