SVG Wrappers for Kindle?

SVG Examples

Since responsive inline SVG with the “Padding Hack” had more promise and also more problems (compared to two simpler ways to present an SVG wrapper), we may as well look at it first.

The Padding Hack refers to a CSS technique for removing extra white-space before or after responsive SVGs on webpages. It involves the common practice of using relative positioning for the container div and absolute positioning for the SVG content, which fills the padded area of the div. Since eBooks are essentially long web pages, I wanted to see if it would work with Kindle books, which support positioning, but in a limited way. It works after a fashion, but not perfectly, as you’ll see in the following example.

The first image in this chapter of the test booklet uses the CSS padding hack to make it responsive. The second image is a fallback for Mobi Kindle devices. Unfortunately, the Paperwhite has trouble with the CSS padding hack and chops off the SVG image and some following text or fails to display it at all. Since the Paperwhite is not a Mobi Kindle, it does not display the fallback image either.

To fix the display issue with Paperwhite, we use a CSS media query that targets Fire devices only. Paperwhite will display the image, but not with its associated CSS, which specifies a width for the enclosing div, positioning, and padding.

For this reason, I would be reluctant to use an SVG with the padding hack. While it might be possible to target either the Paperwhite or Kindle Fire devices with media queries for the aspect ratio or viewport size, specs change, and then where would you be?

So, for what it’s worth, here is the HTML code:

<div class="svg-container">
  <svg xmlns="http://www.w3.org/2000/svg" class="svg-content" preserveAspectRatio="xMinYMin meet" version="1.1" viewBox="0 0 700 832" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g font-size="32px" systemLanguage="en">
      <image height="100%" width="100%" xlink:href="../Images/red-mom.jpg"></image>
      <text style="text-anchor:middle" x="50%" y="104%">
        Red Riding Hood says goodbye to her mother
        <tspan dy="40" x="50%">Inline SVG - Padding Hack</tspan>
      </text>
    </g>
  </svg>
</div>
<div class="mobi-content">
  <div class="center"><img alt="Red waves goodbye" height="416" src="../Images/red-mom.jpg" width="350" /></div>
    <div class="center">
Red Riding Hood says goodbye to her mother<br />
(JPEG at 350 x 416 pixels)
    </div>
</div>

Here is the CSS:

@media amzn-kf8 {
  .mobi-content { display: none; }
}
@media amzn-kf8 and (device-aspect-ratio: 16/10),
  amzn-kf8 and (device-height: 800px) and (device-width: 600px),
  amzn-kf8 and (device-height: 600px) and (device-width: 800px) {
  .svg-container {
    position: relative;
    width: 60%;
    padding-bottom: 79%;  /* adjust as needed */
    text-align: center;
    margin: 0 auto;
   }
.svg-content {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  }
}
@media amzn-mobi {
  .kf8 {display: none;}
  .svg-container, .svg-wrapper {display: none;}
  .reg-caption {font-size: 90%;}
}

Here are screenshots from Kindle Previewer:

As you can see, nothing blew up. The image is rather large, so it got kicked to the next page along with its caption without explicitly splitting the file. Looks like there’s about enough room on the HDX for the image without the caption, but it’s hard to tell precisely. In Sigil, setting the height of the outer container to zero eliminates extra white-space, but if you try that with Kindle, the container will disappear in spite of assigned padding.

The padding hack CSS must be hidden from the Paperwhite. If it isn’t, Paperwhite either won’t display the image or chops it off.  All the hinky stuff with positioning and padding just doesn’t work on the Paperwhite.  Kindle DX  displays the Mobi alternate image, a JPEG.

If you check your mobi-source epub file on Adobe Digital Editions (just because you can), images with padding hack CSS will be severely mangled.

The padding hack definitely works better when the height of the outer container is explicitly set to zero and expanded with padding. This tactic works fine on web pages, but if you make the height zero on the Kindle, it does not expand the box, which simply disappears. While you can assign width OR height or neither to the SVG element, the viewbox must remain, and it cannot use percentages. Also, if you try to assign width or height ONLY to the image, it will disappear. Too many variables! ARRRGH!