Full-page image "floating" for responsive pagination.

[Vanguard3000]

I'm not exactly sure how best to describe this, but I often come across books where an image will appear mid-chapter (sometimes, mid-paragraph or sentence).

In print, that image is usually positioned in such a way that the page of text preceding it is full, but with a responsively paginated ereader with variable display settings, you may end up with the preceding page having only half a paragraph of text, and the rest of the page being blank because the image requires the full next page.

Anyway, I know it's probably unavoidable to a degree, but I don't suppose there's a way to allow that image to "float" up or down a certain amount to allow the preceding page to fill?

Thanks in advance for any help!

[jhowell]

The CSS property "float: snap-block" may be what you are looking for. See this example from W3C to see how it works.

Amazon has limited support for this property in Enhanced Typesetting (KFX formatting). I don't know about support in other e-readers.

[Turtle91]

As long as the image is not included within the <p></p> tags you should never have a paragraph ‘interrupted’ halfway for the image…it should complete the paragraph, then display the image.

Otherwise, I try and place the image slightly after the scene depicted by the image first gets discussed. That keeps the story flowing smoothly, with a natural pause to view the image.

I don’t worry too much about white space between pages in a reflowable book. You just do the best you can. What absolutely drives me nuts is white space WITHIN a paragraph, or sentence, caused by book coders forcing justified text. There are only a few devices that handle auto-hyphenation tolerably well, and those rivers of white space, especially on small profile devices - like phones, is very distracting and yanks me right out of the story! Extra space at the bottom of a page is relatively unnoticeable.

[Vanguard3000]

Originally Posted by jhowell

The CSS property "float: snap-block" may be what you are looking for. See this example from W3C to see how it works.

Amazon has limited support for this property in Enhanced Typesetting (KFX formatting). I don't know about support in other e-readers.

I think that's exactly what I'm looking for. I'm trying to test it in Calibre's book viewer and I'm not seeing it working correctly (the image shows but doesn't seem to "float") but it may be an issue of limited compatibility.

Originally Posted by Turtle91

As long as the image is not included within the <p></p> tags you should never have a paragraph ‘interrupted’ halfway for the image…it should complete the paragraph, then display the image.

You're correct, and I think I wasn't explaining myself well. I mean it'll cut into the middle of a sentence in a print book, so the text on the preceding page will go all the way to the bottom of the page. I was trying to replicate this in an epub (though just having the image jump between paragraphs, not within one).

Originally Posted by Turtle91

Otherwise, I try and place the image slightly after the scene depicted by the image first gets discussed. That keeps the story flowing smoothly, with a natural pause to view the image.

That is currently what I do as well, but was curious if there was a more elegant solution. And I agree about justified text; I tend to remove the justification alignment when I come across it as it looks odd outside of a few specific use cases.

[JSWolf]

You cannot duplicate that pBook in ePub. The problem is that you cannot count on a certain font size and you cannot count on a certain screen size and resolution.

[Vanguard3000]

Originally Posted by JSWolf

You cannot duplicate that pBook in ePub. The problem is that you cannot count on a certain font size and you cannot count on a certain screen size and resolution.

What a pointless thing to say right after someone posted a solution.

I've been working with epubs for over a decade now and have generally been able to get pretty close to a faithful recreation, in spirit if not in perfect accuracy. This is a small thing that I've been curious about for a long time and wanted to see if there was an elegant solution.

[DNSB]

One other issue is how many epub renderers support page floats? In my admittedly limited testing about 4 years ago, the answer was not that many.

[j.p.s]

Originally Posted by JSWolf

You cannot duplicate that pBook in ePub. The problem is that you cannot count on a certain font size and you cannot count on a certain screen size and resolution.

Originally Posted by Vanguard3000

What a pointless thing to say right after someone posted a solution.

It is one of the many counterproductive things he does in large numbers, and not the worst.

[JSWolf]

Originally Posted by DNSB

One other issue is how many epub renderers support page floats? In my admittedly limited testing about 4 years ago, the answer was not that many.

Agreed!

[JSWolf]

Originally Posted by Vanguard3000

What a pointless thing to say right after someone posted a solution.

I've been working with epubs for over a decade now and have generally been able to get pretty close to a faithful recreation, in spirit if not in perfect accuracy. This is a small thing that I've been curious about for a long time and wanted to see if there was an elegant solution.

Go ahead and get the float to work on your Kobo with ePub. KePub does not count.

[DNSB]

Originally Posted by JSWolf

Go ahead and get the float to work on your Kobo with ePub. KePub does not count.

Why doesn't KePub count? Do you have a Kobo original or Wifi that does not support KePub?

Reminds me of one person who was arguing about app development in another forum. Evidently his Android Honeycomb smartphone could not be updated to a recent version of Android and the app he wants to use now requires Android 9 as the minimum version so the developer should be forced to have the new app version run on Android 3 like the original version he paid for ($0.99) 12 years ago.

[JSWolf]

Originally Posted by DNSB

Why doesn't KePub count? Do you have a Kobo original or Wifi that does not support KePub?

Reminds me of one person who was arguing about app development in another forum. Evidently his Android Honeycomb smartphone could not be updated to a recent version of Android and the app he wants to use now requires Android 9 as the minimum version so the developer should be forced to have the new app version run on Android 3 like the original version he paid for ($0.99) 12 years ago.

Because the idea is to use ePub and see how many programs it works with or doesn't work with.

[Vanguard3000]

This is getting silly off topic. Mods, I consider my question answered; maybe we can lock this thread? Thanks in advance.

[RbnJrg]

My first thought was not to participate in this thread but I changed my mind. It is perfectly possible to avoid blank spaces produced by images (or another element, for example tables) under epub3. I'm not going to post the code to achieve this (at least, not for now, maybe in a future) but I can CATEGORICALLY affirm that it is possible to get what the OP proposed, with the following ereaders:

ADE 4.x (Windows), Thorium (Windows and Linux), Koodo Reader (Windows and Linux), IceCream Ebook Reader (Windows), Foliate (Linux), Readium, Bibi Reader and JSReader (all Sigil plugins on both Windows and on Linux), Calibre Viewer (Windows and Linux), EPUBReader (extension for Chrome and Firefox), ePUB Reader (another extension for Chrome and Firefox), PocketBook (Android), Gitden Reader (Android), Reasily (Android), Aldiko Next (Android), Lithium (Android), OverDrive (Android), Bluefire Reader (Android), BookFusion (Android) and Colibrio Reader (Android, which with its last update fixed all the errors and now perfectly avoids fragmentation).

Some screenshots:

1) From Readium (Sigil plugin):

a) With a font-size of 100%:


b) After increasing font-size (120%):


a) With a font-size of 100%:


b) After increasing font-size (120%):



2) From PocketBook:

a) Before increasing font-size:


b) After increasing font-size:


a) Before increasing font-size:


b) After increasing font-size:


Of course, all this can only be achieved under epub3 (and with ereaders that have full support of it); it's impossible to avoid fragmentation and the existence of blank spaces caused by images and tables due to the change of font size under epub2.

[DNSB]

Originally Posted by RbnJrg

Of course, all this can only be achieved under epub3 (and with ereaders that have full support of it); it's impossible to avoid fragmentation and the existence of blank spaces caused by images and tables due to the change of font size under epub2.

Sadly, according to our resident curmudgeon, if you can't use ADE 2.0.1/ePub 2 to render the ePub, it's not doable.