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