Centering text on screen vertically

[Turtle91]

Hi all,

Until now I've been using table properties to vertically center items (title, dedication, etc.) on the page. That works on my iOS reader of choice, but I've been told that table properties aren't handled very well on other/older devices.

Spoiler:

/* Vertically centered on page */

div.v-ctr {
	height: 100%;
	width: 100%;
	display: table;
	position: fixed;
	padding: 0;
	margin: 0;
	text-indent: 0;
}

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


  <div class="v-ctr">
    <div>
      <h2 class="title">This is the Awesome Title</h2>
      <p class="series">myBooks Saga<br/>Volume 4242</p>
      <p class="author">Dionyseus the Great</p>
    </div>
  </div>

Soooo, I was kinda thinking around about the vh property and tying the top margin of a div to being 33vh with the div height being 33vh (so the div encompasses the middle third of the screen height.

That also seems to work - it's supported by all browsers, and it displays fine on Sigil - but I was wondering if anyone had experience with vh support "out in the wild"?? Or is it a case of the other/older devices that don't support table properties don't support vh either???

Spoiler:

div.titlearea          {margin:33vh 0; height:33vh; border:1px solid red}
div.titlearea p        {text-indent:0; text-align:center; font-style:italic}
div.titlearea p.title  {font-size:7.5vh}
div.titlearea p.series {font-size:3vh; padding-top:1vh}
div.titlearea p.author {font-size:5vh; padding-top:1vh}



<div class="titlearea">
<p class="title">This is the Awesome Title</p>
<p class="series">myBooks Saga<br/>Volume 4242</p>
<p class="author">Dionyseus the Great</p>
</div>

[Jellby]

It might work in some, I'm pretty sure it won't in many/most. It's not a required CSS property in ePub 2, so don't rely on it.

[Turtle91]

hmmm...that sucks....kinda what I was expecting, but still sucks. At some point I hope the industry gives up on the older devices and moves ahead with new technology...


Thanks!

[JSWolf]

Originally Posted by Turtle91

hmmm...that sucks....kinda what I was expecting, but still sucks. At some point I hope the industry gives up on the older devices and moves ahead with new technology...


Thanks!

Your table approach will work in more places then your vh approach.

The problem is two-fold. Older devices that are still in use and companies that are not going to update the reading software or the reading software is updated but just is lacking features.

There's no way to know what your reader is going to use to read the eBook with. So you have to go with the lowest common denominator.

[Jellby]

... or downgrade gracefully. Say, use vh inside a @supports block, and let the block just not be centered if it's not supported (assuming devices that don't support @supports will simply ignore it, and not choke and barf).

[GrannyGrump]

I gave up trying for vertical centering long ago, and rely on simply using a fairly large top margin or top padding. White space of 8em or 10em (or more) at the top of the page can be sufficient to dramatically set off your title, even if it does lack the cool factor of centering.

(but hobbiests like me can get away with that stuff.)

[Turtle91]

I totally get that technique… my problem with it was not knowing what size display it would be read on… a large display, a few empty lines weren’t enough, a small display could cause it to roll to the next page!

The other benefit I saw in my experiment with vh was that I could adjust the font size dynamically… without js… it certainly wasn’t perfect, but it was pretty cool.

Alas, it’s just a fun experiment if devices aren’t supporting it.

Unless maybe using the @supports with a graceful downgrade as jelby mentioned

[JSWolf]

Originally Posted by GrannyGrump

I gave up trying for vertical centering long ago, and rely on simply using a fairly large top margin or top padding. White space of 8em or 10em (or more) at the top of the page can be sufficient to dramatically set off your title, even if it does lack the cool factor of centering.

(but hobbiests like me can get away with that stuff.)

How does that work on a small cell phone screen?

[DNSB]

Originally Posted by JSWolf

How does that work on a small cell phone screen?

Not very well. I once spent a weekend playing with various methods of trying to—approximately—vertically center a text box depending on the size of the screen. An exercise in futility since I couldn't manage to get the mix of media queries, @supports and a few other oddments to give me a result that looks close to what I wanted across my collection of ereaders and apps.