Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > Workshop

Notices

Reply
 
Thread Tools Search this Thread
Old 05-26-2021, 01:52 PM   #1
Turtle91
A Hairy 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: 2,324
Karma: 13611111
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2 & Air/Surface Pro/Kindle PW
Centering text on screen vertically

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:
Code:
/* 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:
Code:
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>
Attached Thumbnails
Click image for larger version

Name:	Screenshot 2021-05-26 134721.png
Views:	112
Size:	83.0 KB
ID:	187355  

Last edited by Turtle91; 05-26-2021 at 01:55 PM.
Turtle91 is offline   Reply With Quote
Old 05-26-2021, 01:58 PM   #2
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: 7,377
Karma: 17000149
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
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.
Jellby is offline   Reply With Quote
Advert
Old 05-26-2021, 02:14 PM   #3
Turtle91
A Hairy 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: 2,324
Karma: 13611111
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2 & Air/Surface Pro/Kindle PW
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!
Turtle91 is offline   Reply With Quote
Old 05-26-2021, 05:16 PM   #4
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: 63,875
Karma: 103741419
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, PRS-650, PRS-T1, nook STR, iPad 4, iPhone SE 2020, PW3
Quote:
Originally Posted by Turtle91 View Post
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.
JSWolf is offline   Reply With Quote
Old 05-27-2021, 02:58 AM   #5
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: 7,377
Karma: 17000149
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
... 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).
Jellby is offline   Reply With Quote
Advert
Old 05-28-2021, 03:32 AM   #6
GrannyGrump
Obsessively Dedicated...
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 2,660
Karma: 32399838
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
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.)

Last edited by GrannyGrump; 05-28-2021 at 03:35 AM.
GrannyGrump is offline   Reply With Quote
Old 05-28-2021, 02:01 PM   #7
Turtle91
A Hairy 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: 2,324
Karma: 13611111
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2 & Air/Surface Pro/Kindle PW
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
Turtle91 is offline   Reply With Quote
Old 05-28-2021, 03:23 PM   #8
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: 63,875
Karma: 103741419
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, PRS-650, PRS-T1, nook STR, iPad 4, iPhone SE 2020, PW3
Quote:
Originally Posted by GrannyGrump View Post
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?
JSWolf is offline   Reply With Quote
Old 05-28-2021, 04:56 PM   #9
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 15,303
Karma: 76240000
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Forma, Clara HD, Nexus 7 HD, iPad Pro, Tolino epos
Quote:
Originally Posted by JSWolf View Post
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.
DNSB 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
SVG not centering vertically Turtle91 Sigil 6 01-09-2020 03:43 PM
Positioning text vertically on a page Nabodita ePub 21 07-04-2017 06:52 AM
Centering Text in Middle of Display Screen oiver55 Sigil 16 04-23-2015 12:34 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


All times are GMT -4. The time now is 09:28 AM.


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