epub images are broken in Kobo

[Liliann]

Hey all,

I have a project that was exported from InDesign to epub2.0.1. On iPad looks nice, but Kobo breaks images e.g. one page has the top part of the image, the next page has the rest. I tried to give "page-break-inside:avoid" to the images in the CSS file, since the "page-break-before" property worked, but unfortunately it's still the same. Every img tag is inside a div.
I would appreciate any idea how I can make it work.

[SBT]

Some sample code with images would be helpful, if possible.

[mrmikel]

You can run into this sort of a problem if you have included text inside of your div or paragraph along with the image making the combination of text and image too big for one page.

There is no easy solution if you want both text and image to display on the same page, since the user can increase the text size and cause it to fail. You can shrink the image slightly and add the caption as part of the image at the bottom.

[Liliann]

Here is a sample of the code:
<div class="frame-2">
<img class="frame-30" src="image/1647_002_fmt.jpg" alt="flame" />
</div>
All of them is written in the same way. There is no paragraph just the image.
And I made a picture of the two pages to show how it looks like. I hope you can see it.

[mrmikel]

What is the frame-2 class and the frame-30 class?

What is the size of the image in pixels?

[RbnJrg]

Originally Posted by Liliann

Here is a sample of the code:
<div class="frame-2">
<img class="frame-30" src="image/1647_002_fmt.jpg" alt="flame" />
</div>
All of them is written in the same way. There is no paragraph just the image.
And I made a picture of the two pages to show how it looks like. I hope you can see it.

Hi Liliann;

Would it be possible for you to post also the definitions of the classes "frame-2" and "frame-30"? You'll find them in your css stylesheet.

[SBT]

The majority of e-ink e-readers have screen ratios width:height of 3/4. If your image has a width:height ratio less than this, it'll be split over pages. One remedy is to pad your image with white left- and right margins, another is to define such margins in the style sheet. There is sadly no method within the Epub2 specifications to allow the reader to fit the screen vertically.
So what's the width and height of the image in question, Liliann?

[Liliann]

Thanks for the answers.
Every div with an image inside has the frame-2 class with the following style:
div.frame-2 {
margin: 0px auto 0px auto;
text-align: center;
}

And every image has different height and width. The one I've sent has these properties:

img.frame-30 {
height: 756px;
width:553px;
}
These classes and properties are generated by inDesign. The problem is that they made the project originally for different reasons not to create an epub. I'm trying to keep the design as much as I can, but I see that epub doesn't support everything I'd like to.
I was thinking to give a max-width to the div-s but I don't know how much or it works at all...

[RbnJrg]

Originally Posted by Liliann

Thanks for the answers.
Every div with an image inside has the frame-2 class with the following style:

div.frame-2 {
margin: 0px auto 0px auto;
text-align: center;
}

And every image has different height and width. The one I've sent has these properties:

img.frame-30 {
height: 756px;
width:553px;
}

These classes and properties are generated by inDesign. The problem is that they made the project originally for different reasons not to create an epub. I'm trying to keep the design as much as I can, but I see that epub doesn't support everything I'd like to.
I was thinking to give a max-width to the div-s but I don't know how much or it works at all...

Just to try the easy way before trying another methods; you said us that had used the property "page-break-inside: avoid" for the image without success. Well, maybe could work to apply that property to the div (class frame-2) and not to the <img> tag as you did previously. Try using:

div.frame-2 {
    margin: 0px auto 0px auto;
    text-align: center;
    page-break-inside: avoid;
}

Also try:

img.frame-30 {
    height: auto;
    width: 100%;
}

By the way, the image size, is 553x756px? That is the size in the class but, has the image that dimension?

Regards
Rubén

[mrmikel]

Which dimension is which? If it is 756 px wide, it is too wide for a small screen, which is about 600. That could be a problem if that is the case. There are ways of handling it suggested by Ruben, but just by itself that would be too wide. A little under 800 px high is all you can go without having problems in some units without adding some extra information to the image statement.

[SBT]

The width:height ratio of your image is 0.73, so Rubens suggestion probably will not give the desired result. I would suggest adding margins in the stylesheet, something like:

img.frame-30 {
    width:90%;
    margin:auto 5%;
}

I would presume that adding a page-break-inside tag to an image is superfluous, as unless your style sheet is exceedingly contorted or text is badly formatted, an image small enough to fit the screen will never be split over pages.

[Liliann]

The original image size of this one:
width: 1153px;
height: 1577px;

I'll try your solutions and get back with the result.

[Liliann]

Unfortunately they didn't work. When the image was fine in portrait mode, it was still broken in landscape, and with the other solution it wasn't broken but distorted. I keep trying because it partly worked at least.
I really appreciate your replies, good to see an active forum with helpful people.

[RbnJrg]

Originally Posted by Liliann

Unfortunately they didn't work. When the image was fine in portrait mode, it was still broken in landscape, and with the other solution it wasn't broken but distorted. I keep trying because it partly worked at least.
I really appreciate your replies, good to see an active forum with helpful people.

Ok; then try this one:

img.frame-30 {
    height: 100%;
    width: auto;
}

If this solution doesn't work we'll think in another thing (I think that to enclose the image in a SVG wrapper could fix your issue, but first, try the code above).

Regards
Rubén

[SBT]

Originally Posted by Liliann

Unfortunately they didn't work. When the image was fine in portrait mode, it was still broken in landscape, and with the other solution it wasn't broken but distorted. I keep trying because it partly worked at least.
I really appreciate your replies, good to see an active forum with helpful people.

Ah, well, in landscape mode, the width:height ratio becomes 4/3, so you'll have to pad the sides of your image even more; around 25% on each side and set width to 50% would be my guess. But then you'll have a correspondingly smaller image in portrait mode...
I'm very much afraid you can't have it both ways (if you'll pardon the pun)