MobileRead Forums - View Single Post - SVG wrapper image occupies entire page, and shouldn’t

jhowell · 06-10-2016, 03:05 PM

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.

06-10-2016, 03:05 PM	#3
jhowell Grand Sorcerer Posts: 7,117 Karma: 92190133 Join Date: Nov 2011 Location: Charlottesville, VA Device: Kindles	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. Attached Thumbnails Last edited by jhowell; 06-10-2016 at 03:37 PM.