Image sizes and text alignment

[RbnJrg]

Originally Posted by DNSB

The !important tag allows you to override other settings even if they have higher specificity. OTOH, only use !important when it is absolutely needed since overuse can make debugging a PITA. At one time, I was editing a stylesheet where virtually every line ended in !important; and it made figuring out what was going on no fun. I finally ended up removing the !importants and then adding 1 set back which kept a button from changing background colour.

Very right! In the case mentioned above I employed the !important tag, it was only for the following properties (because PocketBook has issues to handle them):

-webkit-column-break-inside: avoid !important; 
break-inside: avoid !important; 
page-break-inside: avoid !important;

Your answer make me see that my answer was ambiguous; I didn't employ the !important tag in all the properties.

[JSWolf]

Originally Posted by RbnJrg

Very right! In the case mentioned above I employed the !important tag, it was only for the following properties (because PocketBook has issues to handle them):

-webkit-column-break-inside: avoid !important; 
break-inside: avoid !important; 
page-break-inside: avoid !important;

Your answer make me see that my answer was ambiguous; I didn't employ the !important tag in all the properties.

If it doesn't fiit on the page, it's either going to drop to the next page or it's going to flow off of the page, This is why most page breaks are useless.

[Slevin#7]

Originally Posted by RbnJrg

-webkit-column-break-inside: avoid !important; 
break-inside: avoid !important; 
page-break-inside: avoid !important;

Also, can you tell me, why you use

-webkit-column-break-inside

instead of

-webkit-page-break-inside

which would more likely match the intention of the other properties?

[RbnJrg]

Originally Posted by Slevin#7

Also, can you tell me, why you use

-webkit-column-break-inside

instead of

-webkit-page-break-inside

which would more likely match the intention of the other properties?

First at all, because "-webkit-page-break-inside" doesn't exist and second, because ereaders based on Readium/Webkit to display the epub as unique pages, split (internally) in columns the full xhtml file that is showing.

[RbnJrg]

Originally Posted by JSWolf

If it doesn't fiit on the page, it's either going to drop to the next page or it's going to flow off of the page, This is why most page breaks are useless.

The images fit on the page but in some ereaders (for example Foliate for linux) without "-webkit-column-break-inside: avoid" images can be showed half in page and half in the following one, they are not forced to float vertically. All this on epub3 of course.

[JSWolf]

Originally Posted by RbnJrg

The images fit on the page but in some ereaders (for example Foliate for linux) without "-webkit-column-break-inside: avoid" images can be showed half in page and half in the following one, they are not forced to float vertically. All this on epub3 of course.

I've never heard of any program that splits an image. If the image is too larger for the page, it can get moved to the next page or you won't see some of the image as it's off the page for the bit that don't fit.

[RbnJrg]

Originally Posted by JSWolf

I've never heard of any program that splits an image. If the image is too larger for the page, it can get moved to the next page or you won't see some of the image as it's off the page for the bit that don't fit.

No, the image is not too larger for the page, is a half page image. But Foliate (a Linux program), when I use the code to force the image float vertically (so the fragmentation is avoided), it displays the image in the place where it was situated (that is, the image doesn't float) and many time the picture is showed half in page (at the bottom) and half in the next one (at top). For that reason I employ "-webkit-column-break: avoid !important".

EDIT: Here you have the issue with Foliate (in this case with a full page image) and the right way to be displayed with Readium:

a) The issue with Foliate:



b) Perfectly showed with Readium:



In both cases the fragmentation is avoided (no blank space) but in Foliate the image was splitted.


However I was able to fix that also in Foliate:

[Quoth]

Originally Posted by RbnJrg

The images fit on the page but

Really? How do you know what size the screen is, or does the image always scale?

[RbnJrg]

Originally Posted by Quoth

Really? How do you know what size the screen is, or does the image always scale?

Because I use a svg wrapper inside a div with a height of 99vh So, no matter how big is the picture, the wrapper makes its magic and the image always will fit inside the space asigned. I've done a lot of work (and testing) on ​​this point, and I can assure you that using an SVG wrapper makes the problems go away. But I don't always set the container div to 99vh in height; depending on the image (mainly half-page images), I set it to 50vh (or 60vh) in height. The thing even works in landscape mode; watch the following examples (with full and half page images):

https://www.mobileread.com/forums/sh...6&postcount=16

https://www.mobileread.com/forums/sh...0&postcount=17

Of course, all of this is done under epub3 together with appropriate code to avoid fragmentation.