Remove empty space at the bottom of page before figure.

[bo4568]

Like I mention in title, how to avoid blank space before images? Appendix is not .epub format, I just use EPUB Packages 3.2 and create .mobi with kindlegen. To see more clearly what I mean (images comes from Kindle Preview 3, but it’s behave the same on my device Kindle Paperwhite 3) take a look: https://i.imgur.com/A0mIUL4.jpg.


I understand that this happen because image is to large and can’t fit into page, therefore device start new page with image at the top. I know it depends of font size, sometimes smaller font will create enough place for image. In this situation in empty place (where image can't fit), text of next paragraph should be pulled to fulfil entire page.

Seeing it in other perspective: how to force device to always full page with text (text should appear to the last available line in the page), it can mix-up order of HTML marks, pull some paragraph after <figure> mark if necessary. I don’t care if image appear before or after one paragraph, it's no difference, it's close enough. It’s seems that device don’t want of any cost to split <p>. Reader priority is to keep <figure> always appear after to <p> to which it's declared in code.

The empty space is allowed only if it’s end of chapter, no more text is available, turning page will reveal new chapter.

So far I tested:
Solution 1 (used in chapter1.xaml): Put <figure> inside <p> mark.
Solution 2 (used in chapter2.xaml): Tread <figure> separate, write it outside <p>.
Solution 3 (used in chapter3.xaml): Remove <p> whatsoever, leave only <figure> (this will create new problem with text)

The only solution I came up it's just do not intertwine <p> with <figure>. Keep <figure> at the end of chapter. I don't want to do that.

[jhowell]

Amazon has been working of as solution for this problem. The latest version of the Kindle Previewer supports the CSS property "float: snap-block". This allows text to be repositioned around an image in a way that avoids extra blank space in most cases. It only works for Enhanced Typesetting (KFX format).

I haven't worked out all of the rules for using it and there is no actual documentation from Amazon. You can read a bit more in this thread: Kindle Previewer 3.40 - 64bit, SVG text, snap-block.

As a test I modified your sample book to add snap-block to the first image. After some trial and error I was able to get it to work. The attached images show how the Kindle Previewer renders it at two different font sizes.

[bo4568]

Okay, it's seems behavior I want to accomplish is holy grail in typesettings.
I'm left with put images at the end of section / chapter, do not intertwine continuous text with images.

[hobnail]

Originally Posted by bo4568

Okay, it's seems behavior I want to accomplish is holy grail in typesettings.
I'm left with put images at the end of section / chapter, do not intertwine continuous text with images.

If I remember correctly LaTeX has a thing where images are floated to a convenient spot so that these spacing problems are avoided. And that encouraged the writer/formatter to put captions on the pictures so that you could refer to them from the text. And it has this clever feature where you could say "see Figure N on page M" and it would fill in the correct numbers for you. But you can leave out the "on page M" part at least.

[Tex2002ans]

Originally Posted by bo4568

I'm left with put images at the end of section / chapter, do not intertwine continuous text with images.

That works, depending on the book. Or you can leave as is.

I think most people who read ebooks are used to it.

Similar situation with captions being split from the images. There's no way to reliably keep image+caption together (especially on very small devices like a cellphone + large fonts), so you just try to code them as best as you can.

Originally Posted by hobnail

If I remember correctly LaTeX has a thing where images are floated to a convenient spot so that these spacing problems are avoided.

I discussed more details in the Kindle Previewer 3.40 link that jhowell provided.

In HTML, you just had simple left/right floats. (Think: sidebar.)

In Print, you also have access to top/bottom floats. (Think: large figure+caption that attaches itself to the top of the next page.)

There is newer CSS3 "Paged Media" that has been introduced which tries to rectify this problem. Not much really supports it yet, but parts are slowly being implemented (and will most likely work in future ebook formats).

Originally Posted by hobnail

And that encouraged the writer/formatter to put captions on the pictures so that you could refer to them from the text. [...]

This is just good book design/writing. It's extremely common, but not the best idea to write:

The cows are brown, as seen here:

[Image of Figure 1]

It's better to say:

The cows are brown, as seen in Figure 1.

because Figure 1 might not be IN THAT EXACT SPOT. It might fit right below that sentence, but it's usually nearby on the opposite left/right page.

[bo4568]

@jhowell proposal to use .kfx and "float: snap-block" works, I was able to recreate your result(it works perfect with different font size):


BUT "float: snap-block" seems works only on <img> with <p> around it. As soon as you replace raw <img> with sth more complicated like <figure> or <svg>, everything backs to normal (ugly empty space). And problem with captions arise.

I try hack it by using <p> as replacement for <figcaption> but result disappoint me:


I try draw text/caption in <svg> but as I mentioned above "float: span-block" doesn't work with anything beside <img>.

Any ideas?

[bo4568]

Originally Posted by Tex2002ans

Similar situation with captions being split from the images. There's no way to reliably keep image+caption together (especially on very small devices like a cellphone + large fonts), so you just try to code them as best as you can.

Code below doesn't work? It didn't split it any single time:

figure > img
{
  page-break-after: avoid;
  text-align: center;
}
figure > figcaption
{
  page-break-before: avoid;
  break-inside: avoid;
  font-size:75%;
  text-align: center;
}

<figure>
    <img src="../images/image2.png" alt="Nulla feugiat dapibus."/>
    <figcaption> Nulla feugiat nec nunc pulvinar dapibus.</figcaption>
</figure>

[Hitch]

Originally Posted by Tex2002ans

That works, depending on the book. Or you can leave as is.

I think most people who read ebooks are used to it.

Similar situation with captions being split from the images. There's no way to reliably keep image+caption together (especially on very small devices like a cellphone + large fonts), so you just try to code them as best as you can.



I discussed more details in the Kindle Previewer 3.40 link that jhowell provided.

In HTML, you just had simple left/right floats. (Think: sidebar.)

In Print, you also have access to top/bottom floats. (Think: large figure+caption that attaches itself to the top of the next page.)

There is newer CSS3 "Paged Media" that has been introduced which tries to rectify this problem. Not much really supports it yet, but parts are slowly being implemented (and will most likely work in future ebook formats).



This is just good book design/writing. It's extremely common, but not the best idea to write:

The cows are brown, as seen here:

[Image of Figure 1]

It's better to say:

The cows are brown, as seen in Figure 1.

because Figure 1 might not be IN THAT EXACT SPOT. It might fit right below that sentence, but it's usually nearby on the opposite left/right page.

Tex:

Have you given any thought to fallback coding? For the snapblock use for ET? Or do we simply assume that the fallback is, as per usual, that the images and captions simply lay where they fall? No pun intended...

Hitch

[Tex2002ans]

Originally Posted by Hitch

Have you given any thought to fallback coding? For the snapblock use for ET?

I'm assuming the fallback is its usual functionality. You'll get the big gap, just like Post #1.

(There hasn't been extensive testing though... interesting how this exact use-case popped up just a few weeks after Amazon even announced the snap-block code is now "supported", so nobody has really tested the boundaries yet.)

Originally Posted by bo4568

Code below doesn't work? It didn't split it any single time:

You have to be careful with <figure> + <figcaption>. That's HTML5, and functionality across older devices isn't guaranteed.

And as you can see here, using bleeding edge code (like the new snap-block floats) probably doesn't mix too well.

Wonder if Post #6's caption-not-floating bug will occur if you wrap Post #6 in <div>s instead of using <figure>+<ficaption>?

* * *

And on the "Image+Captions stuck together"... there are dozens of examples on MobileRead over the years, discussing all the pros/cons, and various different methods/reasonings on how to work around this.

Most can be found by searching:

RbnJrg SVG caption site:mobileread.com

in your search engine.

• 2016 "Svg wrapper with a caption text field"
• 2015 "images and captions"
• 2016 "adding text after svg (not caption) on single page"
• 2015 "join (image + caption) and fill page"
• 2017 "Universal Solution for Centering Text Under Image"
• 2019 "Revolutionary code? Need feedback"

It also depends if you're creating EPUB2/EPUB3, MOBI/KF8/KFX, or personal/for the MobileRead library, etc.

[jhowell]

Originally Posted by Tex2002ans

interesting how this exact use-case popped up just a few weeks after Amazon even announced the snap-block code is now "supported",

As far as I know Amazon has not said anything about snap-block. I found out about it by looking at recent changes in the Kindle Previewer. If you can point to any actual documentation from Amazon I would be interested.

[Tex2002ans]

Originally Posted by jhowell

As far as I know Amazon has not said anything about snap-block. I found out about it by looking at recent changes in the Kindle Previewer. If you can point to any actual documentation from Amazon I would be interested.

Nope, I based it on your findings in the Kindle Previewer 3.40 thread.

(And KP 3.41 just got released. Anything interesting in there?)

[jhowell]

Originally Posted by Tex2002ans

(And KP 3.41 just got released. Anything interesting in there?)

Well, according to Amazon's release note it contains:

New in Kindle Previewer 3.41.0:
1) Includes stability improvements and bug fixes.

Not mentioned are changes to the Enhanced Typesetting converter that allow some books with more complex formatting to be converted to KPF/KFX. For example, Japanese books that contain a mix of horizontal and vertical text.