Positioning text vertically on a page

Nabodita · 06-18-2017, 02:40 AM

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.

Notjohn · 06-18-2017, 09:17 AM

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.

Toxaris · 06-18-2017, 11:18 AM

A gif? Really? I would just use an optimized png. That can also be quite small. Almost anything is better than gif...

graycyn · 06-18-2017, 11:39 AM

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

Nabodita · 06-18-2017, 12:34 PM

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.

Turtle91 · 06-18-2017, 12:59 PM

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,

Nabodita · 06-18-2017, 03:13 PM

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.

Turtle91 · 06-18-2017, 03:44 PM

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??

jhowell · 06-18-2017, 04:18 PM

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.

Notjohn · 06-19-2017, 05:55 AM

Quote:

I would just use an optimized png

Thanks for that!

JSWolf · 06-19-2017, 07:49 AM

Quote:

Originally Posted by Notjohn

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 · 06-19-2017, 07:51 AM

Quote:

Originally Posted by jhowell

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.

jhowell · 06-19-2017, 08:38 AM

Quote:

Originally Posted by JSWolf

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.)

DaleDe · 06-19-2017, 02:28 PM

Quote:

Originally Posted by Toxaris

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

Nabodita · 06-19-2017, 03:09 PM

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.

06-18-2017, 02:40 AM	#1
Nabodita Connoisseur Posts: 97 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.

06-18-2017, 11:39 AM	#4
graycyn Wizard Posts: 1,558 Karma: 11250582 Join Date: Aug 2010 Location: NE Oregon Device: Kobo Sage, Pocketbook Era, Kobo Forma, Kindle Oasis 2	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.

06-18-2017, 12:59 PM	#6
Turtle91 A Hairy Wizard Posts: 3,184 Karma: 18843349 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	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.

06-18-2017, 03:13 PM	#7
Nabodita Connoisseur Posts: 97 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

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

06-18-2017, 09:17 AM	#2
Notjohn mostly an observer Posts: 1,515 Karma: 987654 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.

06-18-2017, 11:18 AM	#3
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	A gif? Really? I would just use an optimized png. That can also be quite small. Almost anything is better than gif...

06-18-2017, 12:34 PM	#5
Nabodita Connoisseur Posts: 97 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.

06-18-2017, 03:44 PM	#8
Turtle91 A Hairy Wizard Posts: 3,184 Karma: 18843349 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	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??

06-18-2017, 04:18 PM	#9
jhowell Grand Sorcerer Posts: 6,678 Karma: 86234809 Join Date: Nov 2011 Location: Charlottesville, VA Device: Kindles	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.

06-19-2017, 03:09 PM	#15
Nabodita Connoisseur Posts: 97 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.