kepub epub3. Avoiding blank spaces caused by images

[Acopdegarrotix]

In order to avoid blank spaces when images are pushed to next page (kePub ePub3), I've tried to use code based on RbnJrg's suggestion, and it worked beautifully in Calibre's viewer.

Originally Posted by RbnJrg

Yes, is what I said in my previous post. Watch the images I included there, and how the text moves when the font size is changed to avoid blank spaces. With epub3 the fragmentation is completely avoided. Use something like this:

  <figure>
    <img src="../Images/Your_image.jpg" alt="" style="width:100%"/>

    <figcaption>Fig.1 - Blah, blah, blah</figcaption>
  </figure>

and

figure {
  float: left;
  margin: 1em 0;
  padding: 4px;
  -webkit-column-break-inside: avoid !important; /* for webkit ereaders */
  break-inside: avoid !important;  /* for the rest of ereaders */
}

figcaption {
  font-style: italic; /* if you wish */
  padding: 2px; /* set here the measure you wish */
  text-align: center; 
}

However, all my attempts to have it working on my Kobo Sage have failed utterly, so I'm wondering whether I'm making some sort of mistake or it is simply that Kobos don't honor this code.

Here's the code I'm using.

In the CSS:

figure {
  margin: 1em 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  display: inline-block !important;
  float: left !important;
  width: 100%;
  text-align: center;
  -webkit-column-break-inside: avoid !important;
  -webkit-page-break-inside: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

img {
  max-width: 80%;
  max-height: 80vh;
}

And in the xhtml:

  <figure>
    <img alt="" src="../Images/colour_01a.jpg"/>
  </figure>

Many thanks in advance to you all for your help.

Ernest

[icallaci]

Have you tried margin: 0; instead of margin: 1em 0;?

[Acopdegarrotix]

Hi, Icallaci.

Yes, I did. No joy, though. The only difference is that the text sits closer to the image.

I've attached screens from Calibre (left) and Kobo (right).

[icallaci]

Yeah, it looks like there's not enough room to fit the image on the page under the text, so Kobo moves it to the next page where it does fit. Does the same thing happen in the Calibre viewer? For example, in your screenshots, Calibre shows a full page of text on the left, then the image at the top of a new page, while the Kobo shows a partial page of text on the left, so there is no room for the image on the same page. If you fiddle with the font size in Calibre to show a partial page of text before the image is shown, does Calibre also force the image to the next page? I believe Kobo uses paged mode exclusively, while the Calibre viewer offers either paged mode or flow mode (Preferences/Page Layout). Flow mode in Calibre will scroll images, while paged mode will behave similarly to the Kobo. None of this is very helpful to actually fixing the problem, so maybe someone else with more expertise than I have can jump in here and offer some suggestions.

[Aleron Ives]

I'm not sure this can be called a problem. If there isn't enough room to fit the image on the page, the image will get bumped to the next page. In the screenshot, there are six lines of text below the image, and the previous page has seven lines of text, so it would seem that WebKit wants no more than six lines of text at that font size in order to decide that the image will fit.

How many blank lines do you consider to be too many? You've set the image width to 100%, so you would probably need to allow the image to shrink if you want it to still appear on pages with more than six lines of text, i.e. you can't have both 100% width and also more than six lines of text on the page.