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-18-2017, 02:40 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: 86
Karma: 44418
Join Date: Jul 2013
Location: Mostly in my own head!
Device: Kindle Fire, iPad
Positioning text vertically on a page

So, I was going through different threads in the forum and found a post about using divs to position text vertically on a page. It seemed like a simple solution and so excited was I that I didn't bother to read any further... off I went to try it out and wow, it really worked so well in ADE!

Unfortunately, iBooks appears to be disregarding those empty divs completely and I can't find that thread anymore.

All I was trying to do was create a title page... it doesn't get simpler than that.

Here's my title page:

Code:
<div id="topGap"></div>
<p id="bookTitle">Scaramouche</p>
<p id="bookAuthor">Rafael Sabatini</p>
...and here's my CSS:

Code:
div#topGap {
    margin: 0;
    padding: 0;
    height: 20%;
}

p#bookTitle {
    font-size: 2em;
    font-weight: bold;
    height: 10%;
}

p#bookAuthor {
    font-size: 1.6em;
    font-weight: bold;
}
I already know the answer to my question but I'm asking anyway. This code won't work on apple devices, am I right?

I know I can use margins or padding to do this but changing the font size throws off the positioning.
Nabodita is offline   Reply With Quote
Advert
Old 06-18-2017, 09:17 AM   #2
Notjohn
mostly an observer
Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.
 
Posts: 1,039
Karma: 448520
Join Date: Dec 2012
Device: Kindle
I think you'd do better with margin-top or margin-bottom.

And best of all, IMHO, is a gif file scanned from the print edition is there is one. That's what most (all?) Big Five publishers do.
Notjohn is offline   Reply With Quote
Old 06-18-2017, 11:18 AM   #3
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,359
Karma: 117701645
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
A gif? Really? I would just use an optimized png. That can also be quite small. Almost anything is better than gif...
Toxaris is offline   Reply With Quote
Old 06-18-2017, 11:39 AM   #4
graycyn
Guru
graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.
 
Posts: 998
Karma: 1595976
Join Date: Aug 2010
Location: NE Oregon
Device: Kindle Voyage, Kobo Aura HD, Kobo Aura One
I've just been making most title pages as SVG with rare exception. Inkscape is my new friend! They work well, except for text to speech. I use title tags for reading apps that don't support SVG.

I *was* using a transparent PNG in an SVG wrapper, but I had problems with a number of Android reading apps that would render it as a blank page. A non-transparent PNG would work fine in such apps though. But I prefer transparency for non-e-ink devices, hence the move to SVG.

P.S. Although the SVG title pages have worked on my Sony readers, Kobo readers, on Kindle (once converted) and in most Android apps, I don't own any Apple devices, so I don't know about that.

There are some Android apps that have issues with display of the SVG on 4:3 ish aspect ratio tablet devices. What happens is the bottom of the image is cut and appears on the top of the next page. It's annoying as the same apps will display the exact same book images fine on a phone with the taller, narrower aspect ratio.


Sent from my Nexus 7 using Tapatalk

Last edited by graycyn; 06-18-2017 at 12:13 PM.
graycyn is offline   Reply With Quote
Old 06-18-2017, 12:34 PM   #5
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: 86
Karma: 44418
Join Date: Jul 2013
Location: Mostly in my own head!
Device: Kindle Fire, iPad
Seems like a simple solution and probably the way I'm going to go.

Just gives me an itch, though. Vertical positioning shouldn't have to be rocket science.
Nabodita is offline   Reply With Quote
Advert
Old 06-18-2017, 12:59 PM   #6
Turtle91
Wizard
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: 1,416
Karma: 11177778
Join Date: Dec 2012
Location: Altus, Oklahoma today
Device: iPhone 6/5/iPad 1,2 & Air/Surface Pro/Kindle PW
There are solutions to vertical spacing...I use them all the time for my title and dedication page. It relies on the "display:table" and "display:table-cell" elements without actually using a table. It allows the element - in this case the <div> - to behave like a <td> and thus use the "Verticle-align" property. It works great on some devices/apps - and IMO should be supported by all compliant devices - but you'll have to test it to make sure.

Here is what I use:
Code:
CSS
div.v-ctr     {display:table; position:fixed; 
               height:100%; width:100%; 
               padding:0; margin:0; text-indent:0}

div.v-ctr div {display:table-cell; vertical-align:middle;
               padding:0; margin:0}

HTML
<body>
  <div class="v-ctr">
    <div>
      <p>Centered vertically</p>
    </div>
  </div>
</body>
Hope that helps!

Cheers,

Last edited by Turtle91; 06-18-2017 at 01:02 PM.
Turtle91 is offline   Reply With Quote
Old 06-18-2017, 03:13 PM   #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: 86
Karma: 44418
Join Date: Jul 2013
Location: Mostly in my own head!
Device: Kindle Fire, iPad
Thanks Turtle91. Will play around with this and test it out tonight.

I also like the idea of a transparent png... do android reading apps mean ADE?

Out of curiousity, is iBooks ignoring the empty div or the height property? I've still been fiddling with it and it looks like its the height that's being ignored.

Last edited by Nabodita; 06-18-2017 at 03:31 PM. Reason: Update
Nabodita is offline   Reply With Quote
Old 06-18-2017, 03:44 PM   #8
Turtle91
Wizard
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: 1,416
Karma: 11177778
Join Date: Dec 2012
Location: Altus, Oklahoma today
Device: iPhone 6/5/iPad 1,2 & Air/Surface Pro/Kindle PW
I'm not sure about iBooks. I stay away from it as much as possible. But some (many?) devices/apps specifically ignore empty elements. And the height property is difficult to pin down. What is the "height" of a scrolling window??
Turtle91 is offline   Reply With Quote
Old 06-18-2017, 04:18 PM   #9
jhowell
Wizard
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 1,417
Karma: 12030469
Join Date: Nov 2011
Location: Florida
Device: iPad Air 2, Kindle PW2, Nexus 7, Fire 5th Gen
What you need for proper rendering is to refer to the height and width of the screen (viewport). Unfortunately vh and vw units were a fairly late addition to CSS and so are not supported by most EPUB software.
jhowell is online now   Reply With Quote
Old 06-19-2017, 05:55 AM   #10
Notjohn
mostly an observer
Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.
 
Posts: 1,039
Karma: 448520
Join Date: Dec 2012
Device: Kindle
Quote:
I would just use an optimized png
Thanks for that!
Notjohn is offline   Reply With Quote
Old 06-19-2017, 07:49 AM   #11
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: 47,781
Karma: 36281079
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
Quote:
Originally Posted by Notjohn View Post
I think you'd do better with margin-top or margin-bottom.

And best of all, IMHO, is a gif file scanned from the print edition is there is one. That's what most (all?) Big Five publishers do.
A jpeg is what most publishers use. They don't use GIF or PNG.
JSWolf is offline   Reply With Quote
Old 06-19-2017, 07:51 AM   #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: 47,781
Karma: 36281079
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
Quote:
Originally Posted by jhowell View Post
What you need for proper rendering is to refer to the height and width of the screen (viewport). Unfortunately vh and vw units were a fairly late addition to CSS and so are not supported by most EPUB software.
You don't use the height and/or width of the vewport. You use %. That works and you don't need to know the dimensions of the viewport.
JSWolf is offline   Reply With Quote
Old 06-19-2017, 08:38 AM   #13
jhowell
Wizard
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 1,417
Karma: 12030469
Join Date: Nov 2011
Location: Florida
Device: iPad Air 2, Kindle PW2, Nexus 7, Fire 5th Gen
Quote:
Originally Posted by JSWolf View Post
You don't use the height and/or width of the vewport. You use %. That works and you don't need to know the dimensions of the viewport.
In html/css "height: 25%" does not mean 25% of the screen height. It is 25% of the height of the containing block, the html body in this case. But since the height of the body depends on the height of the elements within it, the value cannot be resolved and it does not work consistently.

Actually, upon further thought the containing block should really be the same as the screen in this case. I take back the above.

The vh and vw units are percentages of the screen size. "height: 25vh" makes the element 25% of the screen high. That is what is desired in this case. (It is too bad that this isn't well supported.)

Last edited by jhowell; 06-19-2017 at 10:49 AM.
jhowell is online now   Reply With Quote
Old 06-19-2017, 02:28 PM   #14
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 10,664
Karma: 11044306
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2
Quote:
Originally Posted by Toxaris View Post
A gif? Really? I would just use an optimized png. That can also be quite small. Almost anything is better than gif...
For simple images with lots of single color areas a GIF is very good. PNG can be a pain sometimes and it more complicated to use. Nothing else is as good that those two with compression. Certainly not JPG which does terrible at large areas of a single color.

GIF got a bad name due to copyright but that is all over now.

Dale
DaleDe is offline   Reply With Quote
Old 06-19-2017, 03:09 PM   #15
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: 86
Karma: 44418
Join Date: Jul 2013
Location: Mostly in my own head!
Device: Kindle Fire, iPad
Update: Couldn't get the code to work in ADE; some sort of positioning is happening in iBooks but its certainly not centering vertically. Still fiddling with it, will post back with updates.
Nabodita 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
PDF page number positioning TheOldFellow Conversion 2 11-10-2014 04:02 PM
PDF page number positioning TheOldFellow Introduce Yourself 0 11-10-2014 02:48 PM
How do you vertically center a text? Julius Caesar Workshop 9 09-08-2013 02:58 PM
How do you center text vertically? 44reader ePub 8 08-06-2012 01:52 PM
Problem: positioning text to the bottom-right JulienDym ePub 5 07-06-2011 09:03 AM


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


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