Calibre 2.42 - Bad rendering of images in the editor

Sam Sahara · 11-02-2015, 05:34 PM

If I put this code in the editor

Code:

<div align="center">
<img src="../images/000004.jpg" style="width: 30%"/>
<p class="center">Picture 1</p>
</div>

and try to change the width of the image ("width: 50%", "width: 70%" and so on) the rendering of the changes is correct.

BUT if I try to change the HEIGHT of the image (style="height: 30%", style="height: 50%", style="height: 70%", and so on) changes are not rendered at all.

kovidgoyal · 11-02-2015, 08:10 PM

That is because the editor preview panel was switched to XHTML mode, for other reasons, from HTML compatibility mode. Read up on the differences between how bounding boxes are calculated in the two rendering modes.

kovidgoyal · 11-02-2015, 08:22 PM

For completeness, the CSS spec requires elements whose heights use percentage to ignore the percentage unless the parent element has a fixed height. This requirement is not enforced in HTML mode (quirks mode) but is enforced in XHTML mode (standards compliant mode). If you have been using percentages as a way to achieve full screen images, you should stop doing that for while it works in most readers, it is not actually standards compliant.

Use an SVG wrapper instead.

See https://developer.mozilla.org/en-US/..._Mode_Behavior

11-02-2015, 05:34 PM	#1
Sam Sahara Connoisseur Posts: 79 Karma: 228 Join Date: Aug 2014 Device: lambda k21	Calibre 2.42 - Bad rendering of images in the editor If I put this code in the editor Code: <div align="center"> <img src="../images/000004.jpg" style="width: 30%"/> <p class="center">Picture 1</p> </div> and try to change the width of the image ("width: 50%", "width: 70%" and so on) the rendering of the changes is correct. BUT if I try to change the HEIGHT of the image (style="height: 30%", style="height: 50%", style="height: 70%", and so on) changes are not rendered at all.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Calibre 2.42 - Bad view of tables in the editor	Sam Sahara	Editor	0	11-02-2015 05:23 PM
Calibre 2.0 font rendering on Linux	Thunder007	Calibre	5	12-06-2014 08:00 PM
Touch A badly formatted book or bad Kobo Touch rendering?	jswinden	Kobo Reader	16	07-07-2011 07:19 PM
Calibre>Pandigital page rendering	Ginseng	Devices	3	02-01-2011 12:22 AM

11-02-2015, 08:10 PM	#2
kovidgoyal creator of calibre Posts: 43,860 Karma: 22666666 Join Date: Oct 2006 Location: Mumbai, India Device: Various	That is because the editor preview panel was switched to XHTML mode, for other reasons, from HTML compatibility mode. Read up on the differences between how bounding boxes are calculated in the two rendering modes.

11-02-2015, 08:22 PM	#3
kovidgoyal creator of calibre Posts: 43,860 Karma: 22666666 Join Date: Oct 2006 Location: Mumbai, India Device: Various	For completeness, the CSS spec requires elements whose heights use percentage to ignore the percentage unless the parent element has a fixed height. This requirement is not enforced in HTML mode (quirks mode) but is enforced in XHTML mode (standards compliant mode). If you have been using percentages as a way to achieve full screen images, you should stop doing that for while it works in most readers, it is not actually standards compliant. Use an SVG wrapper instead. See https://developer.mozilla.org/en-US/..._Mode_Behavior

Advert