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-15-2013, 04:42 PM   #31
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
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:

Code:
.block {
   width: 100%;
}
Now, in the .html file use the following code:

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
RbnJrg is offline   Reply With Quote
Old 12-16-2013, 05:13 AM   #32
Liliann
Member
Liliann began at the beginning.
 
Posts: 17
Karma: 10
Join Date: Dec 2013
Device: none
I've already tried this solution...
You don't give up easily, do you?
Liliann is offline   Reply With Quote
Old 12-16-2013, 05:41 AM   #33
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
I've already tried this solution...
You don't give up easily, do you?
You had tried to apply:

Code:
   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.
RbnJrg is offline   Reply With Quote
Old 12-16-2013, 09:28 AM   #34
Liliann
Member
Liliann began at the beginning.
 
Posts: 17
Karma: 10
Join Date: Dec 2013
Device: none
Quote:
Originally Posted by RbnJrg View Post
You had tried to apply:

Code:
   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.
Liliann is offline   Reply With Quote
Old 12-16-2013, 11:38 AM   #35
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
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?
RbnJrg is offline   Reply With Quote
Old 12-16-2013, 04:30 PM   #36
Liliann
Member
Liliann began at the beginning.
 
Posts: 17
Karma: 10
Join Date: Dec 2013
Device: none
Quote:
Originally Posted by RbnJrg View Post
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)
Liliann is offline   Reply With Quote
Old 12-17-2013, 05:49 PM   #37
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
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:
Code:
<table>
   <tr>
       <td><img alt="" src="../Images/flame.jpeg" /></td>
   </tr>
</table>
2. In your css stylesheet:

Code:
table, tr, td {
   width: 100%;
   border-collapse: collapse;
   border: none;
}
Good luck
Rubén
RbnJrg is offline   Reply With Quote
Old 12-18-2013, 06:37 AM   #38
Liliann
Member
Liliann began at the beginning.
 
Posts: 17
Karma: 10
Join Date: Dec 2013
Device: none
Quote:
Originally Posted by RbnJrg View Post
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:
Code:
<table>
   <tr>
       <td><img alt="" src="../Images/flame.jpeg" /></td>
   </tr>
</table>
2. In your css stylesheet:

Code:
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...
Liliann is offline   Reply With Quote
Old 12-18-2013, 01:01 PM   #39
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
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.
RbnJrg is offline   Reply With Quote
Old 12-19-2013, 03:46 PM   #40
Rev. Bob
Guru
Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.
 
Rev. Bob's Avatar
 
Posts: 785
Karma: 4028724
Join Date: Feb 2013
Device: Kobo Glo, Kindle Touch
Quote:
Originally Posted by Liliann View Post
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.
Rev. Bob is offline   Reply With Quote
Old 12-20-2013, 03:35 PM   #41
Liliann
Member
Liliann began at the beginning.
 
Posts: 17
Karma: 10
Join Date: Dec 2013
Device: none
Quote:
Originally Posted by Rev. Bob View Post
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...
Liliann is offline   Reply With Quote
Old 12-20-2013, 08:47 PM   #42
Rev. Bob
Guru
Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.
 
Rev. Bob's Avatar
 
Posts: 785
Karma: 4028724
Join Date: Feb 2013
Device: Kobo Glo, Kindle Touch
Quote:
Originally Posted by Liliann View Post
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?
Rev. Bob is offline   Reply With Quote
Old 01-02-2014, 11:31 AM   #43
Liliann
Member
Liliann began at the beginning.
 
Posts: 17
Karma: 10
Join Date: Dec 2013
Device: none
Quote:
Originally Posted by Rev. Bob View Post
Did you apply page breaks both before and after the DIV containing the image?
yes I did
Liliann is offline   Reply With Quote
Old 01-06-2014, 11:41 AM   #44
Rev. Bob
Guru
Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.Rev. Bob ought to be getting tired of karma fortunes by now.
 
Rev. Bob's Avatar
 
Posts: 785
Karma: 4028724
Join Date: Feb 2013
Device: Kobo Glo, Kindle Touch
Quote:
Originally Posted by Rev. Bob View Post
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:

Code:
<?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.
Rev. Bob is offline   Reply With Quote
Old 01-09-2014, 11:32 AM   #45
Liliann
Member
Liliann began at the beginning.
 
Posts: 17
Karma: 10
Join Date: Dec 2013
Device: none
Quote:
Originally Posted by Rev. Bob View Post
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:

Code:
<?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
Liliann 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 12:27 PM.


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