Images and blank space

[JSWolf]

I know in ePub2 when you have some text on screen and then an image that doesn't fit in the remaining space, the image gets pushed to the next page and you end up with blank space.

In ePub3, is there a way to have the blank space filled with text when the image drops off to the next page?

[Turtle91]

I'm not sure if there is a special ePub 3 function, or if you could get an effect like that with display:flex...but couldn't you get that with using float??

I haven't tested this...I'm taking a break at work ...but something like this might work:

div {float:left; width:100%; text-align:center; break-inside:avoid}

<div>
  <img alt="" src="test.jpg" />
  Caption text
</div>

<p>Other text.</p>
<p>Other text.</p>

[JSWolf]

Originally Posted by Turtle91

I'm not sure if there is a special ePub 3 function, or if you could get an effect like that with display:flex...but couldn't you get that with using float??

I haven't tested this...I'm taking a break at work ...but something like this might work:

div {float:left; width:100%; text-align:center; break-inside:avoid}

<div>
  <img alt="" src="test.jpg" />
  Caption text
</div>

<p>Other text.</p>
<p>Other text.</p>

But what about centered or full width images?

[Turtle91]

Originally Posted by JSWolf

But what about centered or full width images?

Same thing - the div takes up the full width, but you just set the image width to whatever is desired inside the div:

div     {float:left; width:100%; text-align:center; break-inside:avoid}
div img {width:50%; margin:0 auto}


<div>
   <img alt="" src="test.jpg" />
   Caption text
 </div>
 
<p>Other text.</p>
<p>Other text.</p>

[RbnJrg]

Originally Posted by JSWolf

In ePub3, is there a way to have the blank space filled with text when the image drops off to the next page?

YES MAN!! And that is one of the best advantage of epub3 over epub2. And now I realize that you never read what I posted

Some time ago I wrote a post with examples about what you can get with epub3; read the following posts:

https://www.mobileread.com/forums/sh...3&postcount=14

https://www.mobileread.com/forums/sh...33&postcount=7

After that, I posted the method to get that (in that case, was for a full page image but is easy to adapt the method for an image of any size). Read the following posts of mine:

https://www.mobileread.com/forums/sh...3&postcount=17

https://www.mobileread.com/forums/sh...4&postcount=29

For not full page images, is also possible to employ the <img> tag instead of a svg wrapper, something like what I wrote here:

https://www.mobileread.com/forums/sh...4&postcount=19

With epub3 YOU CAN AVOID FRAGMENTATION!!! That is, there is not any blank spaces generated by images or tables or text or whatever (unless, of course, you want those blank spaces are there).