Svg wrapper and image resizing

Nabodita · 02-17-2014, 12:03 AM

Hi all...

I know the issue of svg wrapper code for cover images has been done to death but I'm having a bit of a problem and after several hours of going through posts, I decided to ask for help!

I'm creating an epub for iPad only. My image dimensions are 600 X 800. I've copy-pasted the svg wrapper code into my Front Cover xhtml file and changed the dimensions to that of my image. Unfortunately, the image is not resizing to fill the page. More specifically, its fine for top, left and right but not the bottom. I've attached an image for your reference.

For test purposes I resized my actual image to 489 X 751 (an image size from someone else's working epub) and it worked fine.

I was wondering if there's a glitch with image dimensions and iBooks or if anyone else has faced this problem...

Any ideas would be sincerely appreciated!

Thanks in advance
Nabodita

Toxaris · 02-17-2014, 02:48 AM

If you implemented the SVG wrapper correctly, the aspect ratio is maintained. If the aspect ratio of the image differs from the ratio of the screen, you will get margins.

elibrarian · 02-17-2014, 02:48 AM

Quote:

For test purposes I resized my actual image to 489 X 751 (an image size from someone else's working epub) and it worked fine.

The SVG-wrapper (if you are using the "standard" one) does not work to fill the page, but to show the entire image - whatever the screen area available - at the correct aspect/ratio and without cutting anything.

600 X 800 is - well - 600 X 800, translating 489 X 751 to the same ratio gives you 600 X 921, which is why it fills the ipad screen better

I don't know if this sounds clear - but I think there are a guide somewhere to ipad/ibook specs.

Regards

Kim

Nabodita · 02-17-2014, 05:05 AM

Oh. Duh.

Yes, I used the standard code. For the preserve aspect ratio, I used 'xMidYMid meet'. If I set this to 'none', will it distort and fill the screen?

Also, is there any way to center the image on the screen so that the margins on each side are equal - that way, I can get away with using my 600 X 800 image. Otherwise, what original aspect ratio should I be aiming for for my image?

Before I tried the svg wrapper code, I was using a simple <img> tag inside a <div> for the cover, and iBooks displayed it exactly the same.

Ok, bottomline. I need the image to fill the screen as much as possible. I will resize the image if I need to. So what would be the best way of achieving this?

Thanks
Nabodita

Update: Set preserve aspect ratio to 'none' for my 600 X 800 image and got the same result as with 'xMidYMid meet'. Still looks the same as the pic I attached in the first post.

elibrarian · 02-17-2014, 06:07 AM

Well, FWIW, I use this in the cover.xhtml file:

Code:

<body class="cover">
  <h1 style="display:none">Forside</h1>
  <div class="svg_outer">
    <div class="svg_inner">
      <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 900 1200" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image height="1200" width="900" xlink:href="../Images/cover.jpg"/>
      </svg>
    </div>
  </div>

</body>

and this in my style.css:

Code:

.cover {
   margin:0;
   padding: 0;
   border-width: 0;
   }

.svg_outer {
   display: block;
   margin-bottom: 0;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
   padding-bottom: 0;
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
   text-align: left;
   }
.svg_inner {
   display: block;
   text-align: center;
   }

which sort of works on most devices. But then again, we are producing general epubs for use on many devices, not ipad specific ones. And I much prefer to se a full, non-distorted image that may or may not fill the screen, to one, that fills out the screen, but is more or less unrecognisable. Each to his own ...

I don't think, there's any fool-proof way, that works on all and everything, but you might try a look at Liz Castros blog (she produces epubs for ipad exclusively): http://www.pigsgourdsandwikis.com/20...-ereaders.html

Regards.

Kim

Nabodita · 02-17-2014, 06:28 AM

Kim, thank you so much.

I'll give your code a try and let you know how it turns out. I would also prefer non distorted images so if necessary I'll use a combination of resizing my actual image and the svg wrapper.

Nabodita

Nabodita · 02-17-2014, 06:44 AM

Well, I'm still getting the image centered horizontally but not vertically. That's what I want really. That the image should be centered on the screen while maintaining the aspect ratio. It would be ideal if my image had the same aspect ratio as the screen but I don't know what that should be.

I suppose I should have said that to start with. Darn.

lucywill · 04-14-2014, 03:09 AM

Quote:

Originally Posted by Toxaris

If you implemented the SVG wrapper correctly, the aspect ratio is maintained. If the aspect ratio of the image differs from the ratio of the screen, you will get margins.

thanks, sometimes i will get this problem.
______________
image resizing
image processing

JLius · 04-14-2014, 05:54 AM

Or, as an alternative to Kim's CSS coding, you can just add this in your xhtml (correct me if I'm wrong):

Code:

<style type="text/css" title="override_css">
  @page {
    padding: 0;
    margin: 0;
    }
  body {
    text-align: center;
    padding: 0;
    margin: 0;
  }
  </style>

odedta · 04-16-2014, 04:25 PM

Quote:

Originally Posted by Nabodita

Well, I'm still getting the image centered horizontally but not vertically. That's what I want really.

PHP Code:


			
display: table-cell;

vertical-align: middle;

That should do it.

If you're looking to center a div or an image vertically on screen you should use:

PHP Code:


			
margin-left: auto;

margin-right: auto;

And not:

PHP Code:


			
text-align: center;

@JLius: Correct, same result with less code

RbnJrg · 04-16-2014, 04:50 PM

Quote:

Originally Posted by odedta

PHP Code:


			
display: table-cell;
vertical-align: middle;

That should do it.

Not necessarily

In fact, that will vertically center anything inside the "table-cell" but, what is the height of that table-cell? If you don't set a height for the "cell" then it will have a default height (that is, the height of object that contains). But of that way, the object will be centered in the cell but the cell won't be centered in the page. You also need something like:

Code:

html, body {
    height: 100%;
}

.container {
    display: table;
    height: 100%;
}

.content {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

And in the .xhtml file:

Code:

<body>
  <div class="container">
     <div class="content">
        The content you want vertically centered in the page
     </div>
  </div>
</body>

This will work ok for iPad, the new Kindle devices (those who support .kf8), maybe works in Kobo but it can have some issues under ADE

Regards
Rubén

JLius · 04-17-2014, 01:59 AM

Indeed, with height: 100% my sony reader won't be able to skip to the next page, but you're only creating the epub for your iPad, so you should be fine.

Toxaris · 04-17-2014, 04:55 AM

Quote:

Originally Posted by odedta

PHP Code:


			
margin-left: auto;

margin-right: auto;

And not:

PHP Code:


			
text-align: center;

@JLius: Correct, same result with less code

Nope. Using auto for margin is a sure way to fail. According to the specifications of the ePUB standard auto can be interpreted as 0 and most readers will do so. That is not the result you are aiming for. Text-align: center works fine, but sometimes you must enclose it in an additional <div> for iBooks.

odedta · 04-17-2014, 10:43 AM

@Toxaris, I'm more familiar with web development and that always works and the right way to center a div or an image, perhaps eBooks readers have issues with that. :/

Toxaris · 04-17-2014, 12:22 PM

Quote:

Originally Posted by odedta

@Toxaris, I'm more familiar with web development and that always works and the right way to center a div or an image, perhaps eBooks readers have issues with that. :/

The ePUB2 specs are not equal to (X)HTML specifications. There are differences. Therefore you can never assume what works for web development also works for an e-book. A lot is the same, but not everything. Some apps (iBooks) use a web-rendering engine instead of an engine that follows the specs more closely because it is easier to program. So, sometimes it works on those apps.

The auto margins are a well known difference. Personally I don't like that the specifications gives room for margin. It should be supported or not and should not be the choice of the programmer. That will always lead to duality or worse.

02-17-2014, 12:03 AM	#1
Nabodita Connoisseur Posts: 97 Karma: 44418 Join Date: Jul 2013 Location: Mostly in my own head! Device: Kindle Fire, iPad	Svg wrapper and image resizing Hi all... I know the issue of svg wrapper code for cover images has been done to death but I'm having a bit of a problem and after several hours of going through posts, I decided to ask for help! I'm creating an epub for iPad only. My image dimensions are 600 X 800. I've copy-pasted the svg wrapper code into my Front Cover xhtml file and changed the dimensions to that of my image. Unfortunately, the image is not resizing to fill the page. More specifically, its fine for top, left and right but not the bottom. I've attached an image for your reference. For test purposes I resized my actual image to 489 X 751 (an image size from someone else's working epub) and it worked fine. I was wondering if there's a glitch with image dimensions and iBooks or if anyone else has faced this problem... Any ideas would be sincerely appreciated! Thanks in advance Nabodita Attached Thumbnails

02-17-2014, 05:05 AM	#4
Nabodita Connoisseur Posts: 97 Karma: 44418 Join Date: Jul 2013 Location: Mostly in my own head! Device: Kindle Fire, iPad	Oh. Duh. Yes, I used the standard code. For the preserve aspect ratio, I used 'xMidYMid meet'. If I set this to 'none', will it distort and fill the screen? Also, is there any way to center the image on the screen so that the margins on each side are equal - that way, I can get away with using my 600 X 800 image. Otherwise, what original aspect ratio should I be aiming for for my image? Before I tried the svg wrapper code, I was using a simple <img> tag inside a <div> for the cover, and iBooks displayed it exactly the same. Ok, bottomline. I need the image to fill the screen as much as possible. I will resize the image if I need to. So what would be the best way of achieving this? Thanks Nabodita Update: Set preserve aspect ratio to 'none' for my 600 X 800 image and got the same result as with 'xMidYMid meet'. Still looks the same as the pic I attached in the first post. Last edited by Nabodita; 02-17-2014 at 05:32 AM.

02-17-2014, 06:07 AM	#5
elibrarian Imperfect Perfectionist Posts: 616 Karma: 863576 Join Date: Dec 2011 Location: Ølstykke, Denmark Device: none	Well, FWIW, I use this in the cover.xhtml file: Code: <body class="cover"> <h1 style="display:none">Forside</h1> <div class="svg_outer"> <div class="svg_inner"> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 900 1200" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="1200" width="900" xlink:href="../Images/cover.jpg"/> </svg> </div> </div> </body> and this in my style.css: Code: .cover { margin:0; padding: 0; border-width: 0; } .svg_outer { display: block; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; text-align: left; } .svg_inner { display: block; text-align: center; } which sort of works on most devices. But then again, we are producing general epubs for use on many devices, not ipad specific ones. And I much prefer to se a full, non-distorted image that may or may not fill the screen, to one, that fills out the screen, but is more or less unrecognisable. Each to his own ... I don't think, there's any fool-proof way, that works on all and everything, but you might try a look at Liz Castros blog (she produces epubs for ipad exclusively): http://www.pigsgourdsandwikis.com/20...-ereaders.html Regards. Kim

04-14-2014, 05:54 AM	#9
JLius Village idiot Posts: 157 Karma: 519566 Join Date: Mar 2014 Location: Belgium Device: sony PRS T-1	Or, as an alternative to Kim's CSS coding, you can just add this in your xhtml (correct me if I'm wrong): Code: <style type="text/css" title="override_css"> @page { padding: 0; margin: 0; } body { text-align: center; padding: 0; margin: 0; } </style>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Need Example SVG wrapper including caption	GrannyGrump	ePub	30	11-06-2013 03:20 AM
Adding an SVG Wrapper	ghostyjack	Sigil	16	06-15-2013 05:13 AM
An Issue about a SVG wrapper	RbnJrg	Kindle Formats	29	06-10-2013 08:11 PM
resizing of svg logo with text increasing and decreasing in epub	ashokbnpal	Introduce Yourself	0	07-21-2011 04:26 AM
Image resizing	Falcao	Feedback	7	10-28-2010 04:32 AM

02-17-2014, 02:48 AM	#2
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	If you implemented the SVG wrapper correctly, the aspect ratio is maintained. If the aspect ratio of the image differs from the ratio of the screen, you will get margins.

02-17-2014, 06:28 AM	#6
Nabodita Connoisseur Posts: 97 Karma: 44418 Join Date: Jul 2013 Location: Mostly in my own head! Device: Kindle Fire, iPad	Kim, thank you so much. I'll give your code a try and let you know how it turns out. I would also prefer non distorted images so if necessary I'll use a combination of resizing my actual image and the svg wrapper. Nabodita

02-17-2014, 06:44 AM	#7
Nabodita Connoisseur Posts: 97 Karma: 44418 Join Date: Jul 2013 Location: Mostly in my own head! Device: Kindle Fire, iPad	Well, I'm still getting the image centered horizontally but not vertically. That's what I want really. That the image should be centered on the screen while maintaining the aspect ratio. It would be ideal if my image had the same aspect ratio as the screen but I don't know what that should be. I suppose I should have said that to start with. Darn.

04-17-2014, 01:59 AM	#12
JLius Village idiot Posts: 157 Karma: 519566 Join Date: Mar 2014 Location: Belgium Device: sony PRS T-1	Indeed, with height: 100% my sony reader won't be able to skip to the next page, but you're only creating the epub for your iPad, so you should be fine.

04-17-2014, 10:43 AM	#14
odedta Addict Posts: 398 Karma: 96448 Join Date: Dec 2013 Device: iPad	@Toxaris, I'm more familiar with web development and that always works and the right way to center a div or an image, perhaps eBooks readers have issues with that. :/

Advert

Advert