[Slevin#7]

First let me say, many many thanks to you all for all the information you provide every single thread. It's a great pleasure to know that there is always something to discover I haven't had on my radar so far. Thus being said, I of course wanna take some time to try and see whether the one or the other tip might work, which will take some time - so please bear with me that some feedback will not come instantly (and family life wants also to be dealt with ).

Originally Posted by RbnJrg

You don't need page-breaks if you work under epub3; watch the attached epub. Try to increase/decrease the font-size to see what happens.

That would really be great, if it would work as expected. I've tried many different adaptions of your solution, but I couldn't get one of them working in PocketBook. I managed at least to get the image placed exactly at the point in text where it should be by removing "float: left" from the .picture element, since otherwise some reader just float the text dynamically around the page which holds the image.

The big issue, however, is that the image gets split over two pages in PocketBook:


If you have a solution for that I would really consider taking your code, since I think dynamic break-points are better than hard-coded page-breaks.

Originally Posted by KevinH

For the record, which true epub3 ereaders do not support even basic javascript?

Afaik, none of the major commercial reading applications like Google Play Books or Apple Books support JS for security reasons.

Originally Posted by RbnJrg

By the way, the OP could try using not only "vh" but also "svh" or "dvh" (for example, Sigil and its plugins, Thorium, Calibre Viewer, accept those units). Regarding units viewport there are much more than vh and wh:

https://www.terluinwebdesign.nl/en/b...h-svw-lvw-dvw/

https://caniuse.com/?search=svh

These new sv* units are especially useful for Android and iOS e-readers. One could try a style with:

.myHeight {
   height: 100vh;
}

@supports (height: 100svh) {
   .myHeight {
      height: 100svh;
   }
}

Yes, I've already forgotten that there are new units. I've used them years ago the last time I made a webapp for smartphones, but that's far away and thus far out of my recollection^^. Thanks for bringing this up. I've already tested them in different ways and my current conclusion: vh followed by svh works well, while dvh seems to mess up some of the reader.

Again, thanks for all this valuable insights - and if RbnJrg would have any suggestions how to fix the splitting issue, I'd really be happy - at least until the next challenge shows up...