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 06-30-2011, 10:22 PM   #1
bfollowell
Fanatic
bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.
 
Posts: 510
Karma: 1152752
Join Date: Aug 2010
Location: Evansville, IN, USA
Device: Amazon Kindle 3 Wi-Fi & B&N Nook Tablet & B&N Nook HD+
Can you center vertically?

I know how to center text/images/etc. horizontally. Is there any way to center say a title page image vertically on the screen?

Thanks.

- Byron
bfollowell is offline   Reply With Quote
Old 07-01-2011, 12:27 AM   #2
Adjust
Addict
Adjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel is
 
Adjust's Avatar
 
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
Make the image the size of the Screen.
e.g. iBook for iPad the images size need to be 600x860pixels. This will fill up the screen.

I guess you could have something like making the image sit at a drop of 50%.

p.chapterhead {
margin-top: 50%;
}

<p class="chapterhead"><img src="images/Contents.png" alt="contents.png"/></p>
Adjust is offline   Reply With Quote
Old 07-01-2011, 04:11 AM   #3
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,148
Karma: 4792399
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by Adjust View Post
Make the image the size of the Screen.
e.g. iBook for iPad the images size need to be 600x860pixels. This will fill up the screen.
And it won't work when you change the orientation or use a different device.

Quote:
I guess you could have something like making the image sit at a drop of 50%.

p.chapterhead {
margin-top: 50%;
}

<p class="chapterhead"><img src="images/Contents.png" alt="contents.png"/></p>
Unfortunately, percent values in top/bottom margins are (or should be) interpreted relative to the width of the container element, not the height.

I'm afraid there is no robust, compliant way of positioning elements vertically in the screen...
Jellby is offline   Reply With Quote
Old 07-01-2011, 05:40 AM   #4
bfollowell
Fanatic
bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.
 
Posts: 510
Karma: 1152752
Join Date: Aug 2010
Location: Evansville, IN, USA
Device: Amazon Kindle 3 Wi-Fi & B&N Nook Tablet & B&N Nook HD+
Quote:
Originally Posted by Jellby View Post
I'm afraid there is no robust, compliant way of positioning elements vertically in the screen...
I had a feeling that was the case. I was just hoping someone may've known of some obscure element I was missing.

Thanks anyway guys.

- Byron
bfollowell is offline   Reply With Quote
Old 07-01-2011, 07:48 AM   #5
Adjust
Addict
Adjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel is
 
Adjust's Avatar
 
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
Quote:
Originally Posted by Jellby View Post
And it won't work when you change the orientation or use a different device.
What if you made the image 600x860 and then set the height to 100%.
Wouldn't that resize itself to whatever screen size or orientation?
Adjust is offline   Reply With Quote
Old 07-01-2011, 01:41 PM   #6
bfollowell
Fanatic
bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.
 
Posts: 510
Karma: 1152752
Join Date: Aug 2010
Location: Evansville, IN, USA
Device: Amazon Kindle 3 Wi-Fi & B&N Nook Tablet & B&N Nook HD+
Quote:
Originally Posted by Adjust View Post
What if you made the image 600x860 and then set the height to 100%.
Wouldn't that resize itself to whatever screen size or orientation?
I'm not certain that would help. Ultimately, these epubs will be converted to mobi for use on a Kindle. Kindle's resolution for in-book images (anything but the cover) is 520x622. The particular image I have in mind is just a little wider than that aspect ratio, so if it stretches or shrinks to fit the screen, there will always be a little extra white space at the bottom. That's why I was hoping there was a way to center vertically.

Probably what I need to do is paste my image into another "template" that's the size of my screen, with the correct aspect ratio, and use my photo-editing software to center it vertically. I was just hoping there was an easy way to do that with html rather than editing the image.

Thanks again for the assistance guys.

- Byron
bfollowell is offline   Reply With Quote
Old 07-02-2011, 04:30 AM   #7
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,148
Karma: 4792399
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by Adjust View Post
What if you made the image 600x860 and then set the height to 100%.
Wouldn't that resize itself to whatever screen size or orientation?
If it worked, it would be less than optimal, since it wouldn't take the whole width.

But the problem, in my experience, is that it is not clear what "height: 100%" means. We would like it to be "the whole usable screen height", but in the ePUB format (and in the way it is interpreted by the reading software) this is not the case, there is no concept of "screen", and it rather refers to the height of the containing element, which is often not defined. Say you have something like:

Code:
<html>
<body>
<div><img src="cover.jpg" alt=""/></div>
</body>
</html>
... and you say in CSS "img {height: 100%}". That means the img's height will be the same as the div's, but what is the div's height? It's the height needed to contain the img . Then you say "div {height: 100%}". Now the div's height is defined, it's the same as the body's. Same problem. So you say "body {height: 100%}", and then "html {height: 100%}", and expect it to mean "the same as the usable screen space". But I don't see anything in the spec saying that this is so, and even if there were, it is not something that is widely supported/implemented. It may work in some reader, it may break uglily in some other.
Jellby is offline   Reply With Quote
Old 07-04-2011, 03:28 AM   #8
virtual_ink
Zealot
virtual_ink can extract oil from cheesevirtual_ink can extract oil from cheesevirtual_ink can extract oil from cheesevirtual_ink can extract oil from cheesevirtual_ink can extract oil from cheesevirtual_ink can extract oil from cheesevirtual_ink can extract oil from cheesevirtual_ink can extract oil from cheese
 
virtual_ink's Avatar
 
Posts: 107
Karma: 1000
Join Date: Sep 2010
Location: Melbourne, Australia
Device: iPad2, Kindle
Quote:
Originally Posted by bfollowell View Post
I know how to center text/images/etc. horizontally. Is there any way to center say a title page image vertically on the screen?

Thanks.

- Byron
Hi Byron, could you please help me with some tips for center alignment over here: http://www.mobileread.com/forums/sho...d.php?t=141545 - would be mucho appreciated!!
virtual_ink is offline   Reply With Quote
Old 07-06-2011, 07:48 AM   #9
ghostyjack
Guru
ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.
 
ghostyjack's Avatar
 
Posts: 714
Karma: 1085604
Join Date: Mar 2009
Location: Bristol, England
Device: PRS-T1, 1825PT, Galaxy Tab, One X, TF700T, Aura HD, Nexus 7
This question was asked some time ago and someone wrote a bit of code that sort of fixes this for text, not tried it for pictures though.

Code:
<body>
  <div class="wedge"></div>

  <div class="container">
    <table>
      <tr>
        <td>
          <p>Bull's eye!</p>
        </td>
      </tr>
    </table>
  </div>
</body>
With a separate CSS file for it being:
Code:
  html, body    {height:100%; margin:0; padding:0; font-style: italic;}
  .wedge        {float:left; height:50%; margin-bottom:-2em;}
  .container    {clear:both; height:4em; position:relative;}
  table, tr, th {height:4em;width:100%;text-align:center;}
I use this for a page that has a dedication on it.

The author of the code said it's a bit rought-and-ready, but it did seem to work for me.
ghostyjack is offline   Reply With Quote
Old 07-06-2011, 09:38 AM   #10
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,148
Karma: 4792399
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by ghostyjack View Post
Code:
  html, body    {height:100%; margin:0; padding:0; font-style: italic;}
  .wedge        {float:left; height:50%; margin-bottom:-2em;}
  .container    {clear:both; height:4em; position:relative;}
  table, tr, th {height:4em;width:100%;text-align:center;}
That's (the red parts) what I mentioned, it's not clear at all to me that it must work as intended (i.e., I don't see the spec is clear in this point). It may work in some readers/systems, though.
Jellby is offline   Reply With Quote
Old 07-07-2011, 03:19 AM   #11
ghostyjack
Guru
ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.
 
ghostyjack's Avatar
 
Posts: 714
Karma: 1085604
Join Date: Mar 2009
Location: Bristol, England
Device: PRS-T1, 1825PT, Galaxy Tab, One X, TF700T, Aura HD, Nexus 7
Hell if I know Jellby, but it works for me to centre a line or two of text slap-bang in the middle of a page both virtically and horizontally on every single reading device and software I've tried it on (except for v2 of Aldiko, Coolreader and FBReader).

As long as it works, I'm not worrying about it, just waiting until a better way comes about.
ghostyjack 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
Center a div marcelo2605 ePub 4 05-13-2011 07:39 AM
image be in the center yuxi_kelly ePub 2 03-19-2011 10:40 AM
Images flipped vertically when converting from PDF kataleen Calibre 1 12-16-2010 02:26 AM
How to center an image vertically GBAV ePub 23 06-16-2010 10:41 AM
How to center 10% hr on ADE/PRS505 Ankh ePub 5 04-16-2009 10:05 PM


All times are GMT -4. The time now is 06:12 PM.


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