css for horizontal and vertically centred - Page 2

lucie · 05-14-2024, 05:05 AM

Quote:

Originally Posted by Turtle91

Hi Lucie - welcome to MR!

The easiest way to make sure it is on it's own page is to put it in its own html file. Each chapter should be in a separate file and you can just place the quote file before the chapter file.

Are you using ePub2 or ePub3?? There are different techniques for the different versions.

For ePub2, I borrow some <table> properties without having to use a table. It works great on my devices but I can't guarantee all devices support <table>s, although, it would be a pretty poor device/app that didn't... What device/app are you targeting for your book?

In my case (ePub2) I surround whatever I want to be vertically centered with a double <div>. You can style the interior paragraphs however you like... ie. horizontally centered. You can see a better explanation on W3Schools website. They are a pretty decent resource for coding specifics.

Code:

CSS:
/* 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}


HTML:
<body>
  <div class="v-ctr">
    <div>
      <p>yadda yadda yadda</p>
    </div>
  </div>
</body>

You can actually use the same technique for ePub3, but there are some more elegant solutions using display:flex... be aware that many, especially older, devices won't support ePub3 coding.

Cheers!

Thank you so much for this... I've got new files set up for each quote so they appear on their own page, but I'm still trying to get my head around the coding thing.

This is what I have currently in Sigil.

Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
	<head>
		<title>The_Me_I_Didn&apos;t_See_-_FoundHer_Series_V1_copy-2</title>
		<link href="css/idGeneratedStyles.css" rel="stylesheet" type="text/css" />
	</head>
	<body id="The_Me_I_Didn-t_See_-_FoundHer_Series_V1_copy-2" lang="en-GB" xml:lang="en-GB">
		<div class="_idGenObjectStyleOverride-1">
			<p class="Dedication">For all the women who looked in the mirror one day </p>
			<p class="ParaOverride-2"><span class="CharOverride-4">and didn’t recognize the woman looking back... </span></p>
			<p class="ParaOverride-2"><span class="CharOverride-4">We see you.</span></p>
		</div>
	</body>
</html>

Im not sure how/where to add the code to keep the previous styles.

Many thanks in advance...This newbie really appreciates the help!!

lucie · 05-14-2024, 05:36 AM

This is what I have in the style sheet for that section.

Code:

p.Dedication {
	color:#000000;
	font-family:"EB Garamond", serif;
	font-size:1em;
	font-style:italic;
	font-variant:normal;
	font-weight:normal;
	line-height:1.25;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
	orphans:1;
	page-break-after:auto;
	page-break-before:always;
	text-align:center;
	text-decoration:none;
	text-indent:0;
	text-transform:none;
	widows:1;

The ParaOverride-2 is I guess from indesign.

text-align:center;
}

Turtle91 · 05-14-2024, 07:01 AM

Wellllll...that's a right mess! InDesign is definitely NOT known for concise css...

There are a couple classes in your example that you haven't shown us the css for:
_idGenObjectStyleOverride-1
CharOverride-4

Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
	<head>
		<title>The_Me_I_Didn&apos;t_See_-_FoundHer_Series_V1_copy-2</title>
		<link href="css/idGeneratedStyles.css" rel="stylesheet" type="text/css" />
	</head>
	<body id="The_Me_I_Didn-t_See_-_FoundHer_Series_V1_copy-2" lang="en-GB" xml:lang="en-GB">
		<div class="_idGenObjectStyleOverride-1">
			<p class="Dedication">For all the women who looked in the mirror one day </p>
			<p class="ParaOverride-2"><span class="CharOverride-4">and didn’t recognize the woman looking back... </span></p>
			<p class="ParaOverride-2"><span class="CharOverride-4">We see you.</span></p>
		</div>
	</body>
</html>

Without those other classes, I couldn't guarantee the exact same styling. However, InDesign IS known for repetitive, unnecessary, css... so we would be pretty safe to use the following:

Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
  <head>
    <title>The_Me_I_Didn&apos;t_See_-_FoundHer_Series_V1_copy-2</title>
    <style>
      *         {text-indent:0 !important; margin:0 !important; padding:0 !important}
      .ded      {font-family:"EB Garamond", serif; font-style:italic;
                 font-size:1em; text-align:center}
      div.v-ctr {height:100%; width:100%; display:table; position:fixed}
      div.v-ctr div {display:table-cell; vertical-align:middle}
    </style>
  </head>
  <body id="The_Me_I_Didn-t_See_-_FoundHer_Series_V1_copy-2">
    <div class="v-ctr">
      <div>
        <p class="ded">For all the women who looked in the mirror one day<br/>
        and didn’t recognize the woman looking back...<br/>
        We see you.</p>
      </div>
    </div>
  </body>
</html>

NOTE: I removed the link to the stylesheet to keep things from getting too confusing. It is not needed on these vertically centered pages as all the required css is included between the <style> tags in the header.

If the last 2 lines in the dedication are different styling, as described by CharOverride-4, then you could put a <span> around those two lines like this:

Code:

<p class="ded">For all the women who looked in the mirror one day<br/>
<span class="CharOverride-4">and didn’t recognize the woman looking back...<br/>
We see you.</span></p>

Although I would definitely want to give it a better descriptive name for the class instead of "CharOverride-4";
maybe <span class="ded2">

Of course, you would need to add the span class to the <style> section in the header.

Code:

<style>
  *         {text-indent:0 !important; margin:0 !important; padding:0 !important}
  .ded      {font-family:"EB Garamond", serif; font-style:italic;
             font-size:1em; text-align:center}
  .ded2     {whatever styling differences from CharOverride-4, if any}
  div.v-ctr {height:100%; width:100%; display:table; position:fixed}
  div.v-ctr div {display:table-cell; vertical-align:middle}
</style>

lucie · 05-14-2024, 07:19 AM

Ahh this is great, thank you so much!

It seems to work perfectly on Sigil, but when I load it in the kindle previewer to check it doesn't work, do you have any idea why that would be?

Turtle91 · 05-14-2024, 07:38 AM

Kindle preview is a little quirky, plus there is an actual conversion process from ePub to the proprietary kindle format (not ePub). I'd recommend loading it onto the kindle itself for checking.

MY guess...based on old information... is that the kindle previewer may be hanging up on the position:fixed. IIRC the older kindles didn't support that but now do. Kindle previewer may have not been updated???

If you see the same problem on an actual kindle then you can try using this instead:

Code:

div.v-ctr {height:100vh; width:100vw; display:table}

If that doesn't fix it, then I have officially exhausted my knowledge of Kindle quirks. Maybe someone else knows more?

RbnJrg · 05-14-2024, 10:01 AM

Quote:

Originally Posted by Turtle91

Kindle preview is a little quirky, plus there is an actual conversion process from ePub to the proprietary kindle format (not ePub). I'd recommend loading it onto the kindle itself for checking.

MY guess...based on old information... is that the kindle previewer may be hanging up on the position:fixed. IIRC the older kindles didn't support that but now do. Kindle previewer may have not been updated???

If you see the same problem on an actual kindle then you can try using this instead:

Code:

div.v-ctr {height:100vh; width:100vw; display:table}

If that doesn't fix it, then I have officially exhausted my knowledge of Kindle quirks. Maybe someone else knows more?

Your answer is a very good one. The OP issue under Kindle is due to you are using the property "height: 100%". That value only will work if also is set

html, body { height:100% }

Of course, with those values, only it will be showed the first page of the xhtml file, so only should be employed for a title page or similar. To avoid this issue the best is to employ -as you indicate it- height: 100vh (avoiding so html, body {100%}) but the problem now is that vh very probably won't be honored by epub2 ereaders. In some cases, when a table can't be employed, the best under epub2 is to use a svg wrapper. We have to set the height in px (for example 600 x 800), and the property preserveaspectratio="XMidYMid meet" will do all the hard work. To write the text (one can do it by hand, of course) the easiest way is to use Inkscape (all the code for the svg can be generated with Inkscape, also the size of the svg).

KevinH · 05-14-2024, 10:29 AM

All of this should probably be move to MR's epub forum so everyone benefits, not just Sigil users.

lucie · 05-15-2024, 07:47 AM

Thanks so much this as really helpful... though unfortunatly I couldn't get it to work.

So in the end I just did a top margin of 50% and centred the text, which seems to work ok, not perfect, but better than it was.

RbnJrg · 05-15-2024, 10:27 AM

Quote:

Originally Posted by lucie

Thanks so much this as really helpful... though unfortunatly I couldn't get it to work.

So in the end I just did a top margin of 50% and centred the text, which seems to work ok, not perfect, but better than it was.

Where it doesn't work? On Kindle? On epub2? On epub3? There is something you are not doing well. If you want a single page with some text centered vertical and horizontally, you have the following methods:

1. On epub2:
a) By using a table
b) By using a svg wrapper

2. On epub3
a) By using the property display: flex

If your epub is a epub2 and the table method is not working for you (I can't understand why, because the answer by Turtle91 should work fine) then employ a svg wrapper: it can't fail if the device supports svg (Kindle supports it).

Quote:

So in the end I just did a top margin of 50%

If you were able to set a margin-top of 50%, then the table method should work for you; you're doing something wrong. By the way, what happens when you change the font size?

05-14-2024, 07:38 AM	#20
Turtle91 A Hairy Wizard Posts: 3,228 Karma: 19001261 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	Kindle preview is a little quirky, plus there is an actual conversion process from ePub to the proprietary kindle format (not ePub). I'd recommend loading it onto the kindle itself for checking. MY guess...based on old information... is that the kindle previewer may be hanging up on the position:fixed. IIRC the older kindles didn't support that but now do. Kindle previewer may have not been updated??? If you see the same problem on an actual kindle then you can try using this instead: Code: div.v-ctr {height:100vh; width:100vw; display:table} If that doesn't fix it, then I have officially exhausted my knowledge of Kindle quirks. Maybe someone else knows more?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Centred and scaled image not centred or scaled	AlanHK	Kindle Formats	12	08-05-2020 01:35 PM
correct interpretation of <br> with centred text	cybmole	Sigil	23	08-16-2014 11:55 AM
Authors vertically	jfbok	Library Management	4	05-30-2012 01:31 PM
Can you center vertically?	bfollowell	ePub	10	07-07-2011 04:19 AM
last line in each paragraph centred	scgf	Calibre	9	09-10-2008 03:23 PM

05-14-2024, 07:19 AM	#19
lucie Member Posts: 13 Karma: 10 Join Date: May 2024 Device: none	Ahh this is great, thank you so much! It seems to work perfectly on Sigil, but when I load it in the kindle previewer to check it doesn't work, do you have any idea why that would be?

05-14-2024, 10:29 AM	#22
KevinH Sigil Developer Posts: 8,160 Karma: 5450818 Join Date: Nov 2009 Device: many	All of this should probably be move to MR's epub forum so everyone benefits, not just Sigil users.

05-15-2024, 07:47 AM	#23
lucie Member Posts: 13 Karma: 10 Join Date: May 2024 Device: none	Thanks so much this as really helpful... though unfortunatly I couldn't get it to work. So in the end I just did a top margin of 50% and centred the text, which seems to work ok, not perfect, but better than it was.

Advert

Advert