epub images are broken in Kobo

[RbnJrg]

Originally Posted by Liliann

I'm testing it on Kobo Arc.

Rubén, with your first solution there is only one page and the image is missing in a mysterious way...the second one does the same.

Is there any way to disable the landscape mode only on Kobo?

Well, let's contine trying

In your css stylesheet write:

.block {
   width: 100%;
}

Now, in the .html file use the following code:

<div class="block">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1153 1577" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="1577" width="1153" xlink:href="../Images/flame.jpeg"></image>
    </svg>
</div>

I think this time we'll have success (or maybe not )

Regards
Rubén

[Liliann]

I've already tried this solution...
You don't give up easily, do you?

[RbnJrg]

Originally Posted by Liliann

I've already tried this solution...
You don't give up easily, do you?

You had tried to apply:

   width: 100%;

And that worked in portraid mode but not in landscape. But now that propety is apply to a <div> that contains a image inside a svg wrapper. The svg wrapper would avoid that the image is distorted in landscape mode. So, is not the same solution that I told you in one of my first post

And I don't give up until trying all available alternatives My problem in this case in that I don't have a Kobo Arc and I don't know what ccs2 and css3 properties supports your tablet so I'm trying to blind It seems not to support properties supported by ADE and that is strange.

[Liliann]

Originally Posted by RbnJrg

You had tried to apply:

   width: 100%;

And that worked in portraid mode but not in landscape. But now that propety is apply to a <div> that contains a image inside a svg wrapper. The svg wrapper would avoid that the image is distorted in landscape mode. So, is not the same solution that I told you in one of my first post

And I don't give up until trying all available alternatives My problem in this case in that I don't have a Kobo Arc and I don't know what ccs2 and css3 properties supports your tablet so I'm trying to blind It seems not to support properties supported by ADE and that is strange.

Yes, you're right.
Now I've tried in this way and it still breaks it, but it's good to know that there is no problem with ADE.

[RbnJrg]

Originally Posted by Liliann

Yes, you're right.
Now I've tried in this way and it still breaks it, but it's good to know that there is no problem with ADE.

Is there a Kobo guideline in some place where I can consult the css properties supported by your tablet?

[Liliann]

Originally Posted by RbnJrg

Is there a Kobo guideline in some place where I can consult the css properties supported by your tablet?

I'm not sure if you meant that but there is a "User Guides and Downloads" and a "Contact Customer Care" menu on their page (http://www.kobo.com/help)

[RbnJrg]

Originally Posted by Liliann

I'm not sure if you meant that but there is a "User Guides and Downloads" and a "Contact Customer Care" menu on their page (http://www.kobo.com/help)

Hi Liliann;

The Kobo Arc Guideline you can download in that site doesn't help. Anyway I will try once more, this time by putting the <img> inside a table-cell (a html table cell). Try this code:

1. In your .html file write:

<table>
   <tr>
       <td><img alt="" src="../Images/flame.jpeg" /></td>
   </tr>
</table>

2. In your css stylesheet:

table, tr, td {
   width: 100%;
   border-collapse: collapse;
   border: none;
}

Good luck
Rubén

[Liliann]

Originally Posted by RbnJrg

Hi Liliann;

The Kobo Arc Guideline you can download in that site doesn't help. Anyway I will try once more, this time by putting the <img> inside a table-cell (a html table cell). Try this code:

1. In your .html file write:

<table>
   <tr>
       <td><img alt="" src="../Images/flame.jpeg" /></td>
   </tr>
</table>

2. In your css stylesheet:

table, tr, td {
   width: 100%;
   border-collapse: collapse;
   border: none;
}

Good luck
Rubén

In portrait mode the image goes to a new page, in landscape mode it's broken...
I'm trying to find a way to lock the landscape orientation but I've found only for iBooks so far...

[RbnJrg]

Originally Posted by Liliann

In portrait mode the image goes to a new page, in landscape mode it's broken...
I'm trying to find a way to lock the landscape orientation but I've found only for iBooks so far...

It's incredible; it must be something related with your Kobo Arc. I'm going to do one last thing; I'm going to download Kobo for Android in my tablet to see if I can emule Kobo Arc and write some code that works there.

[Rev. Bob]

Originally Posted by Liliann

I've attached an image that has these properties:
width: 553px;
max-width: 100%;
height: auto;

I regularly replace cover pages in epubs, for precisely this sort of reason; too many cover images get distorted in certain contexts. Here's what I've come up with for "tall" images:

max-width: 100%;
height: 100%;

I also wrap the image in a DIV that has:

text-align: center;
padding: 0;
margin: 0;
background-color: (something fitting);

...where "something fitting" is either black or a color that blends well with the image's background. For your application, you probably won't need to worry about that. You'll probably want to set page-break-before: always; (and maybe -after as well), though. The end result should be that the image displays on its own page, at full reader height, with the width auto-adjusted to maintain the proper aspect ratio.

I'm away from my computer at the moment, so that's going from memory. If it doesn't work, let me know and I'll post my complete cover page template (all 18 lines) when I get back to it.

[Liliann]

Originally Posted by Rev. Bob

I regularly replace cover pages in epubs, for precisely this sort of reason; too many cover images get distorted in certain contexts. Here's what I've come up with for "tall" images:

max-width: 100%;
height: 100%;

I also wrap the image in a DIV that has:

text-align: center;
padding: 0;
margin: 0;
background-color: (something fitting);

...where "something fitting" is either black or a color that blends well with the image's background. For your application, you probably won't need to worry about that. You'll probably want to set page-break-before: always; (and maybe -after as well), though. The end result should be that the image displays on its own page, at full reader height, with the width auto-adjusted to maintain the proper aspect ratio.

I'm away from my computer at the moment, so that's going from memory. If it doesn't work, let me know and I'll post my complete cover page template (all 18 lines) when I get back to it.

Thanks for your comment.
This solution also breaks the image, and the problem is that even if the image fits in one page in portrait mode it breaks in landscape anyway...

[Rev. Bob]

Originally Posted by Liliann

Thanks for your comment.
This solution also breaks the image, and the problem is that even if the image fits in one page in portrait mode it breaks in landscape anyway...

That...hasn't been my experience. On the contrary; I frequently get books that don't show the full cover in ADE/landscape, in that the image is taller than the window. After applying my standard fix, they do; the cover shrinks to vertically fit the window, and the width shrinks accordingly to maintain the aspect ratio.

Did you apply page breaks both before and after the DIV containing the image?

[Liliann]

Originally Posted by Rev. Bob

Did you apply page breaks both before and after the DIV containing the image?

yes I did

[Rev. Bob]

Originally Posted by Rev. Bob

I'm away from my computer at the moment, so that's going from memory. If it doesn't work, let me know and I'll post my complete cover page template (all 18 lines) when I get back to it.

Now that my winter break is over and I'm back at that PC, here's the code I use for a "tall and narrow" cover page with a black background:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<title>Cover</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
@page { margin: 0; padding: 0; }
body, div { margin: 0; padding: 0; }
body { background-color: #000000; color: #ffffff; }
div { text-align: center; page-break-after: always; }
img { height: 100%; max-width: 100%; }
</style>
</head>
<body><div>
<img alt="Cover" title="Cover" src="cover.jpeg"/>
</div></body>
</html>

This should work unaltered for a calibre-generated cover page; otherwise, you'll probably have to change the filename in red.

[Liliann]

Originally Posted by Rev. Bob

Now that my winter break is over and I'm back at that PC, here's the code I use for a "tall and narrow" cover page with a black background:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<title>Cover</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
@page { margin: 0; padding: 0; }
body, div { margin: 0; padding: 0; }
body { background-color: #000000; color: #ffffff; }
div { text-align: center; page-break-after: always; }
img { height: 100%; max-width: 100%; }
</style>
</head>
<body><div>
<img alt="Cover" title="Cover" src="cover.jpeg"/>
</div></body>
</html>

This should work unaltered for a calibre-generated cover page; otherwise, you'll probably have to change the filename in red.

unfortunately these properties do the same :/
and I kinda gave up with Kobo...it works well in iBooks and it seems enough for now
thank you for all of your effort