Preventing images breaking across pages

[verydeepwater]

Being frequently plagued by the problem of images breaking over the page in iPad and on kindle, I am looking for the best way to avoid this.

I place the images in div tags with the css rules:
page-break-inside:avoid !important; and as appropriate with
page-break-before:always; and /or
page-break-after:always ;

But if the image is tall and thin, there is always the possibility that it will break over to the next page, especially in landscape. It seems to help if the image is of similar proportions to the screen e.g. 860px by 600px but this is not always the case.

For large images, I have also tried using :
}
img
{
max-height:97%;
}

Nothing seems to be full proof, i wonder if anyone has better ideas how to prevent images breaking.

[odedta]

page-break is not a good css rule for these things, just out of experience, I don't know why it doesn't work really.

If you set the image width to 100% it should fit to screen, no div, wrappers or anything, just add css rule for

width:100%;

[verydeepwater]

[QUOTE=odedta;2821123]page-break is not a good css rule for these things, just out of experience, I don't know why it doesn't work really.

If you set the image width to 100% it should fit to screen, no div, wrappers or anything, just add css rule ...

This will make the width of the image fit to screen - I use it regularly, but you can still have problems with tall thin images.

[mrmikel]

For us with older devices, using giant images is going to make for very slow files to open and process and un-uploadable here since the limit is 20 Meg.

[odedta]

Originally Posted by verydeepwater

This will make the width of the image fit to screen - I use it regularly, but you can still have problems with tall thin images.

Can you show me an example of an ePub you're having problems with?

[odedta]

Your solution:

Add class image to the wrapper <p> tags of your image. e.g.

<p class="center image"><a id="page_16"></a><img src="../Images/image3.jpg" alt="" /></p>

Add this new rule to your CSS file:

.image {
max-width: 99%;
max-height: 99%;
padding:0;
margin:0;
}

Calibre is spitting out some error messages I think you should address if you want to have that file compatible with as much devices as possible.

I've only checked it on the first tall image I encountered because i'm in a hurry today, it should work for the rest.

[verydeepwater]

Originally Posted by odedta

Your solution:

Add class image to the wrapper <p> tags of your image. e.g.


Add this new rule to your CSS file:


Calibre is spitting out some error messages I think you should address if you want to have that file compatible with as much devices as possible.

I've only checked it on the first tall image I encountered because i'm in a hurry today, it should work for the rest.

Dear Odedta

Yes the rule max-height works much better on the p wrapper ranter than on the image itself. Thanks for this.

You mentioned some errors in Calibre but I can't get Calibre to indicate any errors, nor epubcheck. I usually just check with epubcheck rather than worrying about calibre, but if you found some errors I am not aware of, I would appreciate it if you told me what they were.
Thanks

[odedta]

Some stuff about fonts and unsupported CSS rules, it's quite important to fix those, this is why I love Calibre check book feature, ePubCheck wouldn't tell you these things.

I attached an image with all the errors you get when running "Check Book" on the file you sent me.

[Abekonge]

For tall thin images or tall images with captions I use the following CSS. It should work uniformly on ADE and iBooks and other devices.

First you need to wrap a div around your image

HTML:

  <div class="tallImage">
    <img alt="" src="../Images/image.jpg" /></p>
  </div>

And this CSS:

div.tallImage {
	width:80%;
	height:auto;
	page-break-inside: avoid;
	margin-left:10%; 
}

img {
	max-width:100%; 
	height:auto;
}

The matching width and margin-left forces iBooks to resize the image. You can make these smaller or larger depending on the size of your image. Remember always to test!

[verydeepwater]

[QUOTE=Abekonge;2825193]For tall thin images or tall images with captions I use the following CSS. It should work uniformly on ADE and iBooks and other
And this CSS:

div.tallImage {
	width:80%;
	height:auto;
	page-break-inside: avoid;
	margin-left:10%; 
}

img {
	max-width:100%; 
	height:auto;
}

It's true, putting the max-height on the p tag will only work for images without captions. My question is how do you work out, apart from extensive trial and error, the optimum width for the image. Also note, kindle fires have a different screen proportion in width and height to an ipad. It seems images are more likely to break on an iPad when in landscape mode, and it would be nice to have a full proof method of stopping them break without have to guestimate the necessary width of the image to fill as much of the screen as possible without causing it to break.

What if you put 'Max-height:100%;' under the img tag above, instead of max-width?

[odedta]

Wouldn't CSS @media queries do the trick for the different proportions?

[Abekonge]

Well there is only trial and error, and after a lot of that, you can formulate best practice: If you take 100 tall images from books, most of them will be within a certain range (so sort your images into tall, wide and square). If you're captions are shortish, the css above should work for most. If things are different you have to tweak. In general images should not break on ibooks on ipad though, but you can add page-break-inside: avoid; on the img tag as well. Ibooks on OSX on the other hand is not to be trusted with anything

max-height:100%; severely f**** image-dimensions in Adobe Digital Editions. Also max-height, max-width are not support by kindle - it will not break a conversion - for specific kindle productions it is better to do without.

@media is not supported by Adobe Digital Editions. You can do some things with @viewport though to emulate a bit of that - but it is not something I have tested rigorously.

[odedta]

I sincerely hope kovid will come out with a stand-alone device ePub 3 reader so he can us of all this compatibility nonsense :P