schlutek
Level 1 (0 points)

Q: Image split error in iBooks

My epub file contains an error I'm unsure how to fix. When looking at the file in iBooks horizontally, some images split between two pages (ie the top of an image appears at the bottom of the page and the remaining image appears at the top of the next page). iBookstore's support suggested making sure each image is within its own <div> tag.

 

However, the images splitting are within their own <div> tags.

 

But does it matter that the <div class="keep"> is {display: inline-block;}? Could this be the concern?

 

Is there another solution to prevent images splitting? As i mentioned, this only happens for some (and not all) images in the horizontal viewing. I'm also confused as i have images that are not contained in their own <div> and those images are not breaking.

 

So, what causes the images in ibooks to split between pages? Any thoughts or advice?

Posted on Sep 17, 2012 8:48 AM

Close
schlutek

Q: Image split error in iBooks

  • All replies
  • Helpful answers

  • by mzmm,

    mzmm mzmm Sep 18, 2012 12:17 PM in response to schlutek
    Level 1 (5 points)
    Sep 18, 2012 12:17 PM in response to schlutek

    you should be able to prevent images from splitting between pages by wrapping them in a div with the 'page-break' property set to 'avoid'.  ie:

     

    .nobreak {

         page-break-inside: avoid;

    }

     

    <div class="nobreak"><img/></div>

     

    i've used the inline-block method you've described to keep images from splitting apart from their captions across pages, although the page-break method will work for that as well.

  • by Jimbo53,

    Jimbo53 Jimbo53 Oct 20, 2012 12:52 PM in response to mzmm
    Level 1 (0 points)
    Oct 20, 2012 12:52 PM in response to mzmm

    I tried "page-break-inside: avoid" and it was successful.