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 02-17-2014, 12:03 AM   #1
Nabodita
Connoisseur
Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.
 
Nabodita's Avatar
 
Posts: 97
Karma: 44418
Join Date: Jul 2013
Location: Mostly in my own head!
Device: Kindle Fire, iPad
Red face 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
Click image for larger version

Name:	photo.JPG
Views:	325
Size:	351.3 KB
ID:	119185  
Nabodita is offline   Reply With Quote
Old 02-17-2014, 02:48 AM   #2
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
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.
Toxaris is offline   Reply With Quote
Old 02-17-2014, 02:48 AM   #3
elibrarian
Imperfect Perfectionist
elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.
 
elibrarian's Avatar
 
Posts: 451
Karma: 672038
Join Date: Dec 2011
Location: Ølstykke, Denmark
Device: none
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
elibrarian is offline   Reply With Quote
Old 02-17-2014, 05:05 AM   #4
Nabodita
Connoisseur
Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.
 
Nabodita's Avatar
 
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.
Nabodita is offline   Reply With Quote
Old 02-17-2014, 06:07 AM   #5
elibrarian
Imperfect Perfectionist
elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.elibrarian ought to be getting tired of karma fortunes by now.
 
elibrarian's Avatar
 
Posts: 451
Karma: 672038
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
elibrarian is offline   Reply With Quote
Old 02-17-2014, 06:28 AM   #6
Nabodita
Connoisseur
Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.
 
Nabodita's Avatar
 
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
Nabodita is offline   Reply With Quote
Old 02-17-2014, 06:44 AM   #7
Nabodita
Connoisseur
Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.
 
Nabodita's Avatar
 
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.
Nabodita is offline   Reply With Quote
Old 04-14-2014, 03:09 AM   #8
lucywill
Junior Member
lucywill began at the beginning.
 
Posts: 1
Karma: 10
Join Date: Apr 2014
Device: none
Quote:
Originally Posted by Toxaris View Post
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
lucywill is offline   Reply With Quote
Old 04-14-2014, 05:54 AM   #9
JLius
Village idiot
JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.
 
JLius's Avatar
 
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>
JLius is offline   Reply With Quote
Old 04-16-2014, 04:25 PM   #10
odedta
Addict
odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.
 
Posts: 398
Karma: 96448
Join Date: Dec 2013
Device: iPad
Quote:
Originally Posted by Nabodita View Post
Well, I'm still getting the image centered horizontally but not vertically. That's what I want really.
PHP Code:
displaytable-cell;
vertical-alignmiddle
That should do it.

If you're looking to center a div or an image vertically on screen you should use:
PHP Code:
margin-leftauto;
margin-rightauto
And not:
PHP Code:
text-aligncenter
@JLius: Correct, same result with less code
odedta is offline   Reply With Quote
Old 04-16-2014, 04:50 PM   #11
RbnJrg
Wizard
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: 1,528
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by odedta View Post

PHP Code:
displaytable-cell;
vertical-alignmiddle
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

Last edited by RbnJrg; 04-16-2014 at 04:58 PM.
RbnJrg is offline   Reply With Quote
Old 04-17-2014, 01:59 AM   #12
JLius
Village idiot
JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.JLius ought to be getting tired of karma fortunes by now.
 
JLius's Avatar
 
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.
JLius is offline   Reply With Quote
Old 04-17-2014, 04:55 AM   #13
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
Quote:
Originally Posted by odedta View Post
PHP Code:
margin-leftauto;
margin-rightauto
And not:
PHP Code:
text-aligncenter
@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.
Toxaris is offline   Reply With Quote
Old 04-17-2014, 10:43 AM   #14
odedta
Addict
odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.
 
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. :/
odedta is offline   Reply With Quote
Old 04-17-2014, 12:22 PM   #15
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
Quote:
Originally Posted by odedta View Post
@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.
Toxaris 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
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


All times are GMT -4. The time now is 06:04 AM.


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