06-25-2020, 08:40 AM | #1 |
Junior Member
Posts: 4
Karma: 10
Join Date: Jun 2020
Device: none
|
Remove empty space at the bottom of page before figure.
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. |
06-25-2020, 10:12 AM | #2 |
Grand Sorcerer
Posts: 6,553
Karma: 84810789
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
|
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. |
Advert | |
|
06-25-2020, 04:23 PM | #3 |
Junior Member
Posts: 4
Karma: 10
Join Date: Jun 2020
Device: none
|
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. |
06-25-2020, 04:39 PM | #4 |
Running with scissors
Posts: 1,552
Karma: 14325282
Join Date: Nov 2019
Device: none
|
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.
|
06-25-2020, 10:03 PM | #5 | |||
Wizard
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
Quote:
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. Quote:
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). Quote:
Code:
The cows are brown, as seen here: [Image of Figure 1] Code:
The cows are brown, as seen in Figure 1. Last edited by Tex2002ans; 06-25-2020 at 10:15 PM. |
|||
Advert | |
|
06-25-2020, 10:37 PM | #6 |
Junior Member
Posts: 4
Karma: 10
Join Date: Jun 2020
Device: none
|
@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? |
06-25-2020, 10:41 PM | #7 | |
Junior Member
Posts: 4
Karma: 10
Join Date: Jun 2020
Device: none
|
Quote:
Code:
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> |
|
07-04-2020, 04:00 PM | #8 | |
Bookmaker & Cat Slave
Posts: 11,463
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
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 |
|
07-04-2020, 09:48 PM | #9 | |
Wizard
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
Quote:
(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.) 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: Code:
RbnJrg SVG caption site:mobileread.com
It also depends if you're creating EPUB2/EPUB3, MOBI/KF8/KFX, or personal/for the MobileRead library, etc. Last edited by Tex2002ans; 07-04-2020 at 09:52 PM. |
|
07-04-2020, 09:57 PM | #10 |
Grand Sorcerer
Posts: 6,553
Karma: 84810789
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
|
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.
|
07-05-2020, 01:59 AM | #11 | |
Wizard
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
Quote:
(And KP 3.41 just got released. Anything interesting in there?) |
|
07-05-2020, 08:17 AM | #12 | ||
Grand Sorcerer
Posts: 6,553
Karma: 84810789
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
|
Quote:
Quote:
Last edited by jhowell; 07-05-2020 at 08:19 AM. |
||
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Getting rid of the Bottom Margin's Blank Space | denbertu | KOReader | 8 | 01-16-2020 10:58 AM |
Empty space in Paragraph | odedta | ePub | 11 | 12-27-2014 09:18 AM |
Insert metadata page - remove blank space | kristalana | Calibre | 5 | 03-18-2014 12:55 PM |
White space at the bottom of an epub on prs 650 | sage79 | Sony Reader | 6 | 04-11-2013 02:21 PM |
RTF Settings and blank space at the bottom of the page | Greg G | Sony Reader | 2 | 10-10-2006 05:31 AM |