MobileRead Forums - View Single Post - [Plugin] Epub3 E-Reader Plugins for Sigil

KevinH · 06-12-2021, 11:06 AM

(we cross-posted)

By trial and error it seems that it is not just 100% but 99%, 95%, 85% etc that cause the issue.

The reader computes a max-width on all images and add that to the readers own css. It does that by using the columnWidth and computing the images paddingRight and paddingLeft.

This works fine when only 1 column (single page) is shown. But when a double-page spread is done, then this computed paddingLeft and paddingRight are incorrect causing the added max-width property to come into play (when it should not).

I can tell it to ignore the paddingLeft and paddingRight when in two page spread mode (2 columns) and then things work but this will break times when images are floated left or right for text to wrap around it.

I have no idea of the "correct solution". If I change this we will just be trading off one error type against another.

I can say that the latest epub.js has changed a lot for the page spread mode (two column) and that it is still in a very fragile state.

Many of their size calculations in two page spreads are inconsistent (such as how they use the gap between page spreads (columns) and they make no sense to me.

Even its calculation of columnWidth is not quite correct and inconsistent with code in other places.

If you have a window of width "width" and gap between the columns of "gap" they seem to be calculating columnWidth in a strange way ...

For divisor = 2 (a two page spread)

columnWidth = (width / divisor) - gap
pageWidth = columnWidth + gap

when in fact the correct calculation would be:

columnWidth = (width - gap) / divisor
pageWidth = columnWidth + (gap / divisor)

but this is inconsistent with other layout code and so it all breaks down someplace else when corrected.

There is also very very little code documentation.

So you will need to file a bug report with the epub.js code github project and give them your Testcase and image explaining the problem.

All in all, I would stay away from two-page spread mode when using EpubJSReader to verify your epub layout. You can use the other two for that.

06-12-2021, 11:06 AM	#48
KevinH Sigil Developer Posts: 8,958 Karma: 6361444 Join Date: Nov 2009 Device: many	(we cross-posted) By trial and error it seems that it is not just 100% but 99%, 95%, 85% etc that cause the issue. The reader computes a max-width on all images and add that to the readers own css. It does that by using the columnWidth and computing the images paddingRight and paddingLeft. This works fine when only 1 column (single page) is shown. But when a double-page spread is done, then this computed paddingLeft and paddingRight are incorrect causing the added max-width property to come into play (when it should not). I can tell it to ignore the paddingLeft and paddingRight when in two page spread mode (2 columns) and then things work but this will break times when images are floated left or right for text to wrap around it. I have no idea of the "correct solution". If I change this we will just be trading off one error type against another. I can say that the latest epub.js has changed a lot for the page spread mode (two column) and that it is still in a very fragile state. Many of their size calculations in two page spreads are inconsistent (such as how they use the gap between page spreads (columns) and they make no sense to me. Even its calculation of columnWidth is not quite correct and inconsistent with code in other places. If you have a window of width "width" and gap between the columns of "gap" they seem to be calculating columnWidth in a strange way ... For divisor = 2 (a two page spread) columnWidth = (width / divisor) - gap pageWidth = columnWidth + gap when in fact the correct calculation would be: columnWidth = (width - gap) / divisor pageWidth = columnWidth + (gap / divisor) but this is inconsistent with other layout code and so it all breaks down someplace else when corrected. There is also very very little code documentation. So you will need to file a bug report with the epub.js code github project and give them your Testcase and image explaining the problem. All in all, I would stay away from two-page spread mode when using EpubJSReader to verify your epub layout. You can use the other two for that.