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 01-24-2013, 03:40 PM   #16
Kayto
Member
Kayto began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Jan 2013
Location: British Columbia, Canada
Device: Android cell phone, iPhone using Bluefire on both
Soooo....back to the original problem.

The image's size is still unchanged after implementing the various suggestions here. Any ideas on why the coding was written [svg:svg...etc.] rather than [svg ...etc]?
Kayto is offline   Reply With Quote
Old 01-24-2013, 03:46 PM   #17
Kayto
Member
Kayto began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Jan 2013
Location: British Columbia, Canada
Device: Android cell phone, iPhone using Bluefire on both
Thanks, JSWolf. I tried both codes. The first rendered a white page (no image). The second rendered a black page (no image). This has happened with other attempts to change the size. (I've changed the src and href to correlate with the image file.)

Any idea what's going on there?
Kayto is offline   Reply With Quote
Old 01-24-2013, 03:54 PM   #18
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 36,668
Karma: 17734032
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by Kayto View Post
Thanks, JSWolf. I tried both codes. The first rendered a white page (no image). The second rendered a black page (no image). This has happened with other attempts to change the size. (I've changed the src and href to correlate with the image file.)

Any idea what's going on there?
Maybe there is a problem with the image. Try one you know works and see what happens.
JSWolf is online now   Reply With Quote
Old 01-24-2013, 11:29 PM   #19
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 267
Karma: 556004
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Part of the problem may be that a lot of your SVG is under-specified. You're leaving out a bunch of optional attributes that you probably shouldn't be leaving out, e.g. preserveAspectRatio. And you shouldn't need to translate the image. Leave that out.

The following works for me everywhere I've tried it:

Code:
<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>Cover</title>
<link rel="stylesheet" type="text/css" href="nookstyles.css" />
<link rel="stylesheet" type="text/css" href="nookstyles2.css" />
<style type="text/css">
    html,body {
        height: 100% !important;
        min-height: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-width: 0 !important;
        padding: 0 !important;
    }
</style>
</head>
<body style="oeb-column-number: 1; height: 100%; width: 100%; background-color: #000000;" >
<div class="coverpage">
<svg 
	xmlns:svg="http://www.w3.org/2000/svg"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	version="1.1"
	width="100%"
	height="100%"
	id="svg2"
	xml:space="preserve" viewBox="0 0 2040 2640" preserveAspectRatio="xMidYMid">
    <image xlink:href="tiw-frontcover.jpg" height="2640" width="2040">
	<desc>Patriots: Traitors in Waiting</desc>
    </image>
</svg>
</div>
</body>
</html>

And in my stylesheet:

Code:
div.coverpage {
        page-break-inside: avoid;
        text-indent: 0 !important;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        border-width: 0;
}
div.coverpage p {
        text-indent: 0 !important;
}

Change 2040 and 2640 to the width and height of your cover image in two places.

Last edited by dgatwood; 01-24-2013 at 11:33 PM.
dgatwood is offline   Reply With Quote
Old 01-24-2013, 11:31 PM   #20
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 36,668
Karma: 17734032
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Don't use that code. It's not good. The CSS is not proper for reflowing ePub.
JSWolf is online now   Reply With Quote
Old 01-25-2013, 03:57 AM   #21
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,082
Karma: 4571547
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
My code for SVG covers (probably equivalent to JSWolf's one), adapted to your image size:

Code:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ops="http://www.idpf.org/2007/ops" xml:lang="en">
<head>
  <title>Cover</title>
  <style type="text/css">
  @page, body.cover { margin: 0; }
  div { text-align: center; }
  </style>
</head>
<body class="cover">

<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" height="100%" viewBox="0 0 600 900"
     preserveAspectRatio="xMidYMid meet">
  <image width="600" height="900" xlink:href="images/Cover.jpg" />
</svg>
</div>

</body>
</html>
Jellby is offline   Reply With Quote
Old 01-25-2013, 07:39 AM   #22
Turtle91
Guru
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
Quote:
Originally Posted by JSWolf View Post
Don't use that code. It's not good. The CSS is not proper for reflowing ePub.
Which part is not proper and why - the SVG?? I'm just getting my feet wet on SVG and was wondering.

Thanks!
Turtle91 is offline   Reply With Quote
Old 01-25-2013, 09:21 AM   #23
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 36,668
Karma: 17734032
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by Turtle91 View Post
Which part is not proper and why - the SVG?? I'm just getting my feet wet on SVG and was wondering.

Thanks!
Code:
<style type="text/css">
    html,body {
        height: 100% !important;
        min-height: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-width: 0 !important;
        padding: 0 !important;
    }
That is just messy. Look at the SVG wrapper code that Jellby and I posted. Take your pick. Both are a lot neater without this bloated CSS code.

Last edited by JSWolf; 01-25-2013 at 11:09 PM.
JSWolf is online now   Reply With Quote
Old 01-25-2013, 11:51 AM   #24
Turtle91
Guru
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
Ahh...ok. I'm all for reducing bloat! I thought there was something wrong with the SVG. Thanks!
Turtle91 is offline   Reply With Quote
Old 01-25-2013, 02:48 PM   #25
Kayto
Member
Kayto began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Jan 2013
Location: British Columbia, Canada
Device: Android cell phone, iPhone using Bluefire on both
Okay, I've had a bit of success using the following code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cover</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }
svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
</style>
</head>

<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMaxYMax meet" version="1.1" viewBox="0 0 600 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="800" width="600" xlink:href="../Images/cover.jpg"></image>
</svg>
</div>
</body>
</html>

Still have a problem though. The image is now sitting at the bottom of the e-reader screen with about 25% white space above it. It did manage to fill out in width though, which is great.

Any advice as to why it's still not filling out the screen?
Kayto is offline   Reply With Quote
Old 01-25-2013, 02:49 PM   #26
Kayto
Member
Kayto began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Jan 2013
Location: British Columbia, Canada
Device: Android cell phone, iPhone using Bluefire on both
Also, just wanted to give you guys all a shout out for helping me with this problem. Your suggested codes have been great learning tools and your advice has been invaluable!
Kayto is offline   Reply With Quote
Old 01-25-2013, 11:42 PM   #27
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 36,668
Karma: 17734032
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by Kayto View Post
Okay, I've had a bit of success using the following code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cover</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }
svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
</style>
</head>

<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMaxYMax meet" version="1.1" viewBox="0 0 600 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="800" width="600" xlink:href="../Images/cover.jpg"></image>
</svg>
</div>
</body>
</html>

Still have a problem though. The image is now sitting at the bottom of the e-reader screen with about 25% white space above it. It did manage to fill out in width though, which is great.

Any advice as to why it's still not filling out the screen?
Code:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Cover</title>
<style type="text/css">
@page {padding: 0pt; margin:0pt}
            body { text-align: center; padding:0pt; margin: 0pt; }
</style>
</head>

<body>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 590 750" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="750" width="590" xlink:href="../Images/cover_image.jpg"></image>
    </svg>
  </div>
</body>
</html>
Compare my code with your code and you can see where your CSS code may not be correct. My code works with ADE and Blufire.
JSWolf is online now   Reply With Quote
Old 01-26-2013, 03:38 AM   #28
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,082
Karma: 4571547
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Does this help?
Jellby is offline   Reply With Quote
Reply

Tags
cover image, epub, oxygen, svg

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Sigil and SVG image links Rand Brittain Sigil 1 01-05-2013 05:39 PM
Creating internal links in EPUB from svg image ecojon ePub 1 03-26-2012 12:37 PM
Trying to add link in image within svg Maal656 Sigil 0 07-25-2011 05:15 AM
Illustrated ebooks with epub: using the svg image element dpapathanasiou ePub 0 06-15-2011 04:17 PM
Calibre News Epub Image Scaling grib Calibre 3 01-07-2010 06:45 AM


All times are GMT -4. The time now is 08:22 PM.


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