Quote:
Originally Posted by JSWolf
Sorry, but you are wrong. It works with calibre's viewer. It works with ADE 2/3. It works with KePub. It works with Thorium. It works with BookFusion on iPhone/iPad with the latest version of iOS/iPadOS. It works in Bluefire.
|
Does it work with Readium, BibiReader, JSReader, Sigil, Calibre Editor, PocketBook, Kobo for Android (an iOS), Lithium, Reasily, Infinity Reader, to name a few e-readers? So nobody with an Android ereader can read your epubs. Are you okay with that? The funny thing is, you can fix it, you have the tools to do it, to make everything work everywhere, and you don't want to do it.
Quote:
|
The reason it doesn't work in Sigil's or calibre's preview is because of a bug in QT that doesn't respect %.
|
It's not a bug, QT respect "%"; you are employing them wrongly. Do you want to "fix" (it's not a fix) the things in Sigil and Calibre? Well, just erase all your code to handle a full page image and instead of all what you had written, employ the following:
1. In your .css stylesheet:
Code:
img {
width: 100%;
}
2. In your .xhtml file:
Code:
<div>
<img alt="" src="../Image/your_image.jpg" />
</div>
It couldn't be simpler than that, and the image will look good in Sigil and, surprisingly (but apparently), also in Readium, Bibi Reader, and JSReader. What happened? A miracle? No, no miracle, because if you open the ePub that has that simple code for handling images with one of the Sigil plugins (do the try with Readium) and expand the eReader window to to make it wider, you'll see that the image doesn't fit on the screen. Why? Because you need to define a height and after that, to define a width according to the height (to maintain the proportion of the image). The easier way to do that is by mean of a svg wrapper (any heigh you wish, a width of 100% and the image will adapt to those dimensions while maintaining the proportion). BUT you need to define the height as I explained in my previous posts. You want to use %? Ok, continue doing what you are doing until now but include, in your style sheet, the following code:
Code:
html, body {
height: 100%;
}
and the QT "bug" (it's not a bug) will disappear.