SVG wrapper image occupies entire page, and shouldn’t

[jcsalomon]

Due to the lack of max-width support on Kindle platforms, I’ve been using the SVG wrapper to emulate its effect. Worked on ADE, and since all illustrations were at the end of chapters it looked like it was working on Kindle platforms.

The author’s just given me a pretty image rendering of the book title for use on the title page, and I tried using it thus:

  <div class="title">
    <h4 class="sigil_not_in_toc">Revised and Expanded</h4>

    <div class="img">
      <div class="mobi-fallback">
        <img alt="The Unexpected Enlightenment of Rachel Griffin, by L. Jagi Lamplighter" src="../Images/Enlightenment-01-Unexpected-title.png"/>
      </div>

      <div class="kf8-epub-default">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" viewBox="0 0 1128 789" preserveAspectRatio="xMidYMid meet"><image width="1128" height="789" xlink:href="../Images/Enlightenment-01-Unexpected-title.png"/></svg>
      </div>
    </div>

    <h2 class="sigil_not_in_toc">Based on the works of Mark A. Whipple</h2>

    <h3 class="sigil_not_in_toc">Illustrations by John C. Wright</h3>
  </div>

Trouble is, on KF8-capable Kindle devices, the image is not displayed on the same page as the rest of the text: there’s a page break before and after. Nothing in my CSS seems to call for such a page break, in fact the code for .title explicitly includes “page-break-inside: avoid;”. This renders correctly in ADE, BTW.

What am I missing?

[jcsalomon]

Following the examples given in “adding text after svg (not caption) on single page”, I’ve put the entire title page in an SVG block, with the old version wrapped in <div class="mobi-fallback">. So it’s not urgent, but I would still like to know why Kindles are breaking the page that way by default. Can anyone tell me?

[jhowell]

I took a look at your document using Kindle Previewer 3 in Fire tablet mode. (This may not be perfect Kindle emulation, but can give an idea of what is going on.)

To diagnose the problem I changed a line in Title.xhtml from <div class="img"> to
<div class="img" style="border: 2px solid red">.

This allowed me to see that the SVG is being rendered as a rectangle that is significantly taller than it is wide even though the included PNG has a landscape orientation. This forces it to be on its own page.

Adding height="70%" to the SVG statement improved this by making the SVG render closer to a square. Still not correct, but allows the page to function better.

I have attached a screenshot of the page as displayed by the Previewer with the above changes made.


ETA: The presence of the SVG image prevented the Previewer from being able to render the book with Enhanced Typesetting. This could be a quirk of the Previewer or it might also occur when you actually publish the book.