Keeping an image and its caption on the same page is easy in standard ePubs using an inline-block. Kindle’s KF8 format does NOT keep elements inside an inline-block together when there’s just enough room for an image without the caption. Text is kicked to the next page.
Kindle KF8 is not ePub
The usual methods for gluing images and captions on Kindle devices are to overlay text on the image itself or to split the book file above the image, forcing it and associated text to the next page. These two methods are bulletproof and currently recommended, but far from optimal. Text overlaid on an image may scale down too much on small screens and become illegible. Splitting the file can leave an extra large blank area on the preceding page.
In my quest for more information about caption glue, tentative suggestions to try an SVG wrapper kept popping up. but after trying to work through problems with SVG wrappers on the Kindle, it’s clear that techniques designed for browsers have limitations when used with Kindle devices and eReaders.
Learn more about SVG:
- SVG Compressed, by Jakob Jenkov. Good, concise book for the essentials. Free with Kindle Unlimited or $0.99 from Amazon.
- Make SVG Responsive at demosthenes.info
- Making SVGs Responsive with CSS at tympanus.net
- Intrinsic Sizing of SVG in Responsive Web Design at thatemil.com
See what happens when Kindlegen processes your files:
SVG files display just fine on Kindle Fire, including the Paperwhite. SVG Wrappers also display, but making them responsive when used with bitmap images (JPEG, PNG, GIF) introduces a few irritating problems. In short:
- Inline SVG is the only method that worked with bitmapped image wrappers in KF8. The IMG element works with external SVG files containing shapes and text, but not with bitmapped images. Kindlegen simply removed OBJECT elements.
- You must provide fallback images for Mobi7 eInk devices and eReader apps that don’t yet support inline SVG. Situations change, so it’s important to test. (Kindle for PC displayed SVG files and inline SVG in spite of what I’d read to the contrary.)
- Kindle Paperwhite supports some of the same things as Kindle Fire, but requires a workaround if you attempt to use SVG with CSS positioning and padding (called the padding hack) with KF8.
- Making a responsive SVG wrapper for a bitmap image using the padding hack may kick a large image to a new page even when there seems to be room for it on the current page. It can be just as awkward-looking as splitting the file, which is more reliable and less work.
- Caption text can become way too small on high-resolution Kindles. Text scales in responsive SVGs, along with the image. It takes quite a bit of fiddling with text size and CSS to get an SVG wrapper to look just right.
- The user cannot tap an SVG-wrapped image to zoom it on Kindle. Not so hot for the user experience.
- Kindle Previewer failed to convert any files using SVG to iOS format in Kindle Previewer. Viewed on Kindle for iOS, only the Mobi alternate images displayed.