Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 12-10-2013, 06:41 PM   #1
Liliann
Member
Liliann began at the beginning.
 
Posts: 17
Karma: 10
Join Date: Dec 2013
Device: none
Question epub images are broken in Kobo

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.

Last edited by Liliann; 12-10-2013 at 06:43 PM.
Liliann is offline   Reply With Quote
Old 12-10-2013, 07:24 PM   #2
SBT
Fanatic
SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.
 
SBT's Avatar
 
Posts: 503
Karma: 560981
Join Date: Sep 2010
Location: Norway
Device: prs-t1, phone/Cool Reader, tablet/BlueFire, Nook Simple
Some sample code with images would be helpful, if possible.
SBT is offline   Reply With Quote
 
Enthusiast
Old 12-11-2013, 06:47 AM   #3
mrmikel
Book Twiddler
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 1,985
Karma: 1405001
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
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.
mrmikel is offline   Reply With Quote
Old 12-11-2013, 03:31 PM   #4
Liliann
Member
Liliann began at the beginning.
 
Posts: 17
Karma: 10
Join Date: Dec 2013
Device: none
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.
Attached Thumbnails
Click image for larger version

Name:	2013-12-11-09.32.29.jpg
Views:	83
Size:	104.3 KB
ID:	116547  
Liliann is offline   Reply With Quote
Old 12-11-2013, 03:47 PM   #5
mrmikel
Book Twiddler
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 1,985
Karma: 1405001
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
What is the frame-2 class and the frame-30 class?

What is the size of the image in pixels?
mrmikel is offline   Reply With Quote
Old 12-11-2013, 03:49 PM   #6
RbnJrg
Evangelist
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 448
Karma: 299860
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Liliann View Post
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.
RbnJrg is offline   Reply With Quote
Old 12-11-2013, 04:11 PM   #7
SBT
Fanatic
SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.
 
SBT's Avatar
 
Posts: 503
Karma: 560981
Join Date: Sep 2010
Location: Norway
Device: prs-t1, phone/Cool Reader, tablet/BlueFire, Nook Simple
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?
SBT is offline   Reply With Quote
Old 12-11-2013, 06:19 PM   #8
Liliann
Member
Liliann began at the beginning.
 
Posts: 17
Karma: 10
Join Date: Dec 2013
Device: none
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...
Liliann is offline   Reply With Quote
Old 12-11-2013, 07:08 PM   #9
RbnJrg
Evangelist
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 448
Karma: 299860
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Liliann View Post
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:

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

Code:
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
RbnJrg is offline   Reply With Quote
Old 12-11-2013, 07:22 PM   #10
mrmikel
Book Twiddler
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 1,985
Karma: 1405001
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
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.
mrmikel is offline   Reply With Quote
Old 12-12-2013, 01:54 AM   #11
SBT
Fanatic
SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.
 
SBT's Avatar
 
Posts: 503
Karma: 560981
Join Date: Sep 2010
Location: Norway
Device: prs-t1, phone/Cool Reader, tablet/BlueFire, Nook Simple
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:
Code:
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.
SBT is offline   Reply With Quote
Old 12-12-2013, 05:28 AM   #12
Liliann
Member
Liliann began at the beginning.
 
Posts: 17
Karma: 10
Join Date: Dec 2013
Device: none
The original image size of this one:
width: 1153px;
height: 1577px;

I'll try your solutions and get back with the result.
Liliann is offline   Reply With Quote
Old 12-12-2013, 03:27 PM   #13
Liliann
Member
Liliann began at the beginning.
 
Posts: 17
Karma: 10
Join Date: Dec 2013
Device: none
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.
Liliann is offline   Reply With Quote
Old 12-12-2013, 04:59 PM   #14
RbnJrg
Evangelist
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 448
Karma: 299860
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Liliann View Post
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:

Code:
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
RbnJrg is offline   Reply With Quote
Old 12-12-2013, 05:30 PM   #15
SBT
Fanatic
SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.
 
SBT's Avatar
 
Posts: 503
Karma: 560981
Join Date: Sep 2010
Location: Norway
Device: prs-t1, phone/Cool Reader, tablet/BlueFire, Nook Simple
Quote:
Originally Posted by Liliann View Post
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)
SBT is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
PNG Images in ePUB Files not rendered on Kobo DragonflyKing ePub 12 10-12-2013 08:28 PM
Images are broken across 2 pages after converting to ePub from RTF. iPhone. vital2k Conversion 2 05-31-2011 01:46 AM
No images in kobo epub books? jayupark Kobo Reader 8 03-29-2011 04:06 PM
Multi-level TOC broken in epub->epub conversion siebert Conversion 14 03-09-2011 05:38 PM


All times are GMT -4. The time now is 07:56 AM.


MobileRead.com is a privately owned, operated and funded community.