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 08-15-2012, 01:02 AM   #1
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Limiting image size in ePub

I have several images that are around 600x800 pixels that when viewed in an ePub app like ADE or Sony Reader get cut off. Setting the height to 100% solves that problem.

However, I have several images that are smaller than the screen size of the average ereader but too wide to fit in a mobile app, for example. If I set them to 100% so they are not cut off on a mobile app, they are then upsized in a larger device or computer app and look like crap.

What I want is to contain the 100% height or width to the maximum of the image's native pixel dimensions so that small screens will not cut off the images and larger screens will not uprez them.

Having read a few posts I thought wrapping them in an SVG container would do the trick (I thought perhaps the "viewBox" referred to a container of sorts), but when tested in ADE, Nook for PC, Sony reader for PC, and Aldiko on Android, there was no difference between using the SVG container and simply setting the height to 100%. My small images are still uprezzing past their native dimensions.

In other words, there was no difference between this (the native code after inserting the image in Sigil with the height value added):

Code:
<p class="sgc-1"><img alt="" height="100%" src="../Images/1_Bookmark.jpg" /></p>
and this:

Code:
<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 293 333" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="333" width="293" xlink:href="../Images/1_Bookmark.jpg"></image>
    </svg>
  </div>
I also read you can set max-height or max-width but not only does it not work to limit the image size, some of the images become distorted.

Is there a way to do what I want?
eggheadbooks1 is offline   Reply With Quote
Old 08-15-2012, 08:54 AM   #2
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: 37,022
Karma: 18129756
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
If you can, make the images larger.
JSWolf is offline   Reply With Quote
Old 08-15-2012, 12:11 PM   #3
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Not possible in this case. So the question remains, is there a way to limit the uprezzing to the actual pixel dimensions?
eggheadbooks1 is offline   Reply With Quote
Old 08-15-2012, 02:12 PM   #4
mmat1
Det
mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.
 
mmat1's Avatar
 
Posts: 951
Karma: 1120522
Join Date: Jan 2012
Location: Zischebattem
Device: Acer Lumiread
Quote:
Originally Posted by eggheadbooks1 View Post
What I want is to contain the 100% height or width to the maximum of the image's native pixel dimensions so that small screens will not cut off the images and larger screens will not uprez them.
1. You may try the max-width - attribute
2. You may follow JSWolf's advice, it's actually a good idea and i'll go to try out for myself. You can add "white -space" at the top and bottom of your picture to change the orientation from landscape to portrait, so the max-height 100% should always work...

Last edited by mmat1; 08-15-2012 at 02:16 PM.
mmat1 is offline   Reply With Quote
Old 08-15-2012, 02:39 PM   #5
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Have been doing more experiments with images that are in the mid-size range, dimensions like 500 x 593, 490 x 768, and this is what I am finding:

The SVG wrapper helps to maintain the proper ratio; if only a height=100% or width=100% value is used, the one value causes the image to be uprezzed and the rest of the image is cut off.

I tried the max-height and max-width value; this distorted the images. Will try again in an SVG wrapper but will only set one max value and see if that works.

Any other suggestions greatly appreciated.Otherwise the default is to leave the images at their native dimensions and say to hell with it. In the dedicated readers and mobile device apps I tested,they all tended to do a much better job of downsizing images to fit when they are not in an SVG wrapper, and in the computer apps the downsampling is of such poor quality that the size issue becomes almost academic.
eggheadbooks1 is offline   Reply With Quote
Old 08-16-2012, 04:38 AM   #6
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,142
Karma: 4792399
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by eggheadbooks1 View Post
I tried the max-height and max-width value; this distorted the images.
Did you try with only max-height (for instance), no width, no max-width, just max-height.

With SVG, this works in my browser (Opera):

Code:
<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 800" preserveAspectRatio="xMidYMid meet">
  <image width="600" height="800" xlink:href="images/Cover.jpg" />
</svg>
</div>
The numbers in "viewBox" and the image "width" and "height" must match, but they don't need to be the real pixel dimensions of the image, or even the same ratio.

The height="100%" does nothing in Opera, because there's no defined height for the containing block, but it might work in ebook readers.

With this, the image is never distorted, and it's always resized (up or down) to maximum possible size. To limit the maximum size, this works too:

Code:
<div style="max-width:600px; max-height:800px">
<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 800" preserveAspectRatio="xMidYMid meet">
  <image width="600" height="800" xlink:href="images/Cover.jpg" />
</svg>
</div>
Now the "max-width" and "max-height" in the div are the image pixel dimensions. It also works (in Opera) if the style is put in the <svg> element instead of the <div>.
Jellby is offline   Reply With Quote
Old 08-16-2012, 01:00 PM   #7
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Thanks, will try that. I had found something similar on a blog about setting limits within the div style but it didn't give an example of how to actually do it.

I had tried using only one max-height or max-width value but either it had no effect or images were distorted on some devices or apps.

Will try to do this today and report back.
eggheadbooks1 is offline   Reply With Quote
Old 08-16-2012, 02:13 PM   #8
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Jellby:

Almost there! Just one last hurdle:

My images were centered. In Sigil, this translated into a div class

Code:
<div class="sgc-2">
whereby sgc is

div.sgc-2 {text-align: center;}

I tried coding it like this:

Code:
<div class="sgc-2" style="max-width:293px; max-height:333px">
but Sigil then changes each style to a div.sgc and I end up with this

Code:
<div class="sgc-2 sgc-3">
whereby sgv 3 is

Code:
div.sgc-3 {max-width:293px; max-height:333px}
but the ereaders ignore the centering. So I get my max width or height (THANK YOU!) but I lose my centering.

I tried this:

Code:
<div class="sgc-2">
   <div class="sgc-3">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" max-width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 293 333" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="333" width="293" xlink:href="../Images/Angel72.jpg"></image><br />
    </svg>
   </div>
  </div>
but it didn't work.

I also tried opening the division with

Code:
<div class="sgc-2; sgc-3">
but that didn't work either. I'm not a programmer and I am out of ideas.

Any thoughts?

Last edited by eggheadbooks1; 08-16-2012 at 05:01 PM.
eggheadbooks1 is offline   Reply With Quote
Old 08-16-2012, 04:41 PM   #9
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: 37,022
Karma: 18129756
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
To fix Sigil from changing things to those annoying sgc styles, run Sigil with no files loaded, turn off Tidy and then close Sigil. Now when you run Sigil, Tidy won't run and create those sgc styles.
JSWolf is offline   Reply With Quote
Old 08-16-2012, 05:04 PM   #10
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Thanks. Turned off Tidy. But I still can't get my centering back. With

Code:
<div class="sgc-2" style="max-width:531px; max-height:800px">
the ereaders ignore the class and only read the style.
eggheadbooks1 is offline   Reply With Quote
Old 08-17-2012, 04:58 AM   #11
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,142
Karma: 4792399
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by eggheadbooks1 View Post
I tried coding it like this:

Code:
<div class="sgc-2" style="max-width:293px; max-height:333px">
but Sigil then changes each style to a div.sgc and I end up with this

Code:
<div class="sgc-2 sgc-3">
whereby sgv 3 is

Code:
div.sgc-3 {max-width:293px; max-height:333px}
That's OK, both things mean the same and should be rendered the same.

Your problem is that you don't want centering, but auto margins. Centering, as a text-align value, refers to the alignment of content inside the <div>, but it doesn't specify how the whole <div> will be placed in the page (or screen, or other containing block). That would be done by adding "margin-left: auto; margin-right: auto;" to the sgc-3 style, but readers are allowed to ignore auto margins (and Adobe does).

There are some things you could try, one of them is this, that you already tried:

Code:
<div class="sgc-2">
   <div class="sgc-3">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" max-width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 293 333" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="333" width="293" xlink:href="../Images/Angel72.jpg"></image><br />
    </svg>
   </div>
</div>
(remove that <br/>, it's not doing any good, I'm not even sure it's allowed in SVG)

But add "display: inline" to the sgc-3 style. Normally a <div> is "display: block", which is rendered as a "paragraph", ignoring text-align, with "display: inline" you make it behave as "character" (of whatever size), and it should obey text-align.

Or you could skip a level and go with:

Code:
<div class="sgc-2">
    <svg style="max-width:293px; max-height:333px" xmlns="http://www.w3.org/2000/svg" height="100%" max-width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 293 333" xmlns:xlink="http://www.w3.org/1999/xlink" >
      <image height="333" width="293" xlink:href="../Images/Angel72.jpg"></image>
    </svg>
</div>
That is, set the maximum size for the <svg> element directly (again, it works in Opera). You could also try with class="sgc-3" instead. I'm not quite sure this is really compliant, but nothing is lost trying.
Jellby is offline   Reply With Quote
Old 08-17-2012, 01:59 PM   #12
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: 37,022
Karma: 18129756
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by eggheadbooks1 View Post
Thanks. Turned off Tidy. But I still can't get my centering back. With

Code:
<div class="sgc-2" style="max-width:531px; max-height:800px">
the ereaders ignore the class and only read the style.
Turning Tidy off will only help with eBooks Tidy has not already screwed. With the one you already ran through Sigil, the only was to fix things is manually.
JSWolf is offline   Reply With Quote
Old 08-19-2012, 05:41 PM   #13
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 103
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Quote:
(remove that <br/>, it's not doing any good, I'm not even sure it's allowed in SVG)
Sorry about that. That was just lazy cutting and pasting...

And the winner is:

Code:
<div class="sgc-2">
    <svg style="max-width:293px; max-height:333px" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 293 333" xmlns:xlink="http://www.w3.org/1999/xlink" >
      <image height="333" width="293" xlink:href="../Images/Angel72.jpg"></image>
    </svg>
</div>
Yeah!!! Works in ADE, Aldiko on Kindle Fire, Kobo Touch, Sony for PC, Nook for PC. (I had to take out the "max" in "max-width="100%" for a reason I don't understand. If it were left in some of the images didn't shrink correctly).

Thank you so much!

Just out of curiosity: what is the function of the viewBox as opposed to the max width and height of the svg style? When I first saw the SVG code I thought the viewBox would be a constraint of some sort; its name suggests so.

Last edited by eggheadbooks1; 08-19-2012 at 05:51 PM.
eggheadbooks1 is offline   Reply With Quote
Old 08-20-2012, 04:19 AM   #14
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,142
Karma: 4792399
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
The viewBox sets the coordinates of the svg canvas, they are not pixels or mm or anything, just numbers. It's telling that one corner is at coordinates (0,0) and the opposite at (293,333), so that when you make your image's size 293×333 it fills the whole space reserved for the SVG picture. You'll see why these numbers don't need to match the real pixel dimensions of the image.
Jellby is offline   Reply With Quote
Old 08-20-2012, 06:37 PM   #15
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: 37,022
Karma: 18129756
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by Jellby View Post
The viewBox sets the coordinates of the svg canvas, they are not pixels or mm or anything, just numbers. It's telling that one corner is at coordinates (0,0) and the opposite at (293,333), so that when you make your image's size 293×333 it fills the whole space reserved for the SVG picture. You'll see why these numbers don't need to match the real pixel dimensions of the image.
Originally, Calibre had is using the numbers to fill the screen and if they were not the numbers for the image, the image would come out with the incorrect aspect ratio even if the code said to make the aspect correct. I pointed this out to Kovid and he fixed it so when Calibre generates the SVG code for the cover, it uses the numbers for the resolution of the cover. This could be a bug in ADE. But since most ePub is read using ADE, using different numbers (other then the resolution) may not work well.
JSWolf is offline   Reply With Quote
Reply

Tags
epub, images cut off, maximum size images, svg

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Image and Pixel size for Childrens Book in EPUB? Brittany Writers' Corner 1 09-27-2011 03:15 PM
Cover Image size dezignlady ePub 6 08-04-2011 10:41 AM
Image Size benjaminsolah ePub 13 09-24-2010 11:47 PM
How to get the maximum image size on a DX? Diegan Amazon Kindle 1 08-04-2010 12:05 PM
Cover Image Size gr8npwrfl Calibre 0 12-21-2009 12:49 AM


All times are GMT -4. The time now is 05:40 AM.


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