Centering Text in Middle of Display Screen

[oiver55]

I am working on publishing a book in Sigil and throughout the book there are little bits of info I would like seperated with its own page and centered on the screen. Is there away to have the text centered to the screen across different display devices? I mean I could press the enter button until it looks just about right, but I wanted to know if there was another way to go about doing this with code




For More Insight:

http://postimg.org/image/gc3d3l4ft/

http://postimg.org/image/thiv9oybd/

[theducks]

Originally Posted by oiver55

I am working on publishing a book in Sigil and throughout the book there are little bits of info I would like seperated with its own page and centered on the screen. Is there away to have the text centered to the screen across different display devices? I mean I could press the enter button until it looks just about right, but I wanted to know if there was another way to go about doing this with code




For More Insight:

http://postimg.org/image/gc3d3l4ft/

http://postimg.org/image/thiv9oybd/

Just Press Enter

(Learn to) Use the stylesheet

.title {

font-size: 2em;
margin-top: 10%;
text-align: center;

}

HTML/CSS has no awareness of screen height (just as there is no limit on how long the scroll is)

the 10% I used above is relative to the WIDTH (Many displays are 3:4)
( my hint to get close to your goal)

A new file is the simple way to start a new Screen (stop thinking 'page' and work by file/section )

Semantics MUST be applied on a ONE per PER file basis
Only 1 Titlepage
Only 1 copyright-page
...

It is convenient to also do chapter per file rather than work with a monster length file. Most of the tools that work on a whole file can be used for a whole GROUP of files. Search, Merge, Link_CSS, Delete ,

[RbnJrg]

Yes, it's possible to get what you want but the needed code won't work on all e-readers. Read the following post:

https://www.mobileread.com/forums/sho...43&postcount=4

But also read all others opinions in that thread, since all of them are very usefull.

As I said in that post, the method works for Kindle (with support for .kf8, not the old Kindle models), iPad, maybe Kobo but not ADE and ereaders based on RMSDK. You'll see if that info helps you or not

Regards
Rubén

[Notjohn]

When it comes to the title page, most New York publishers are finessing this by simply using an image of the page from the print edition.

[oiver55]

Originally Posted by RbnJrg

Yes, it's possible to get what you want but the needed code won't work on all e-readers. Read the following post:

https://www.mobileread.com/forums/sho...43&postcount=4

But also read all others opinions in that thread, since all of them are very usefull.

As I said in that post, the method works for Kindle (with support for .kf8, not the old Kindle models), iPad, maybe Kobo but not ADE and ereaders based on RMSDK. You'll see if that info helps you or not

Regards
Rubén

Thanks I added the code in but I find that whenever I leave the header or the footer blank the middle row doesn't stay in the middle but goes up to the top.

As a last resort I could always just hit enter and eye it from there.

If I understand all this correctly all my sections (which aren't many) should have semantics? I have a Cover, Title Page, Table of Content, a soon to be copyright page and 4 sections devoted for the content of the book , so 8 sections total.

[theducks]

Originally Posted by oiver55

Thanks I added the code in but I find that whenever I leave the header or the footer blank the middle row doesn't stay in the middle but goes up to the top.

As a last resort I could always just hit enter and eye it from there.

If I understand all this correctly all my sections (which aren't many) should have semantics? I have a Cover, Title Page, Table of Content, a soon to be copyright page and 4 sections devoted for the content of the book , so 8 sections total.

the contents (what you read) only once: Also referred as: Start reading

text gets assigned to the first file you would actually read as a user: EG Prologue/Chapter 1

[RbnJrg]

Originally Posted by oiver55

Thanks I added the code in but I find that whenever I leave the header or the footer blank the middle row doesn't stay in the middle but goes up to the top.

No, no You don't have to have three "rows" for what you want, you need to have one row. Do the following:

In the .css stylesheet, write:

html, body {
    height: 100%;
}

#content {
    display: table;
    font-family: serif; /* Or the font-family you want */
    height: 100%;
    width: 100%;
    text-indent: 0;
    text-align: center;
}

.middle_row {
    display: table-row;
    height: 100%;
}

.middle_cell {
    display: table-cell;
    vertical-align: middle;
    text-indent: 0;
    text-align: center;
    font-size: 2em; /* Or the font-size you want */
    font-weight: bold; /* If you wish */
}

And in the .html file write:

  <div id="content">
    <div class="middle_row">
      <p class="middle_cell">Your Text<br />Centered Here</p>
    </div>
  </div>

Below you can see the respective .epub
Regards

[PeterT]

@RbnJrg:

In ADE 1.7.2 I see that text at the TOP of the screen; albeit centered at the top.

[RbnJrg]

Originally Posted by PeterT

@RbnJrg:

In ADE 1.7.2 I see that text at the TOP of the screen; albeit centered at the top.

Hi Peter;

If you read my first post, you'll see that I said this method ONLY works for Kindle (new Kindle models, those ones who support .kf8), iPad and maybe Kobo but not for ADE or ereaders based on RMSDK. So, yes, you are right, it doesn't work for ADE 1.x. However, it should work for ADE 4.x as epub3.

Regards

[PeterT]

I'd suggest that you repeat any caveats when you post a solution. Not all of us remember the conditions from earlier posts and when you post a solution saying "It works" it causes extra confusion when someone like me or JSWolf tries what you have shared.

[RbnJrg]

Originally Posted by PeterT

I'd suggest that you repeat any caveats when you post a solution. Not all of us remember the conditions from earlier posts and when you post a solution saying "It works" it causes extra confusion when someone like me or JSWolf tries what you have shared.

Yes, Peter, I did exactly what you have written. Please, read again the post #4 of THIS thread and you'll see that I warn about the method doesn't work on ADE. Also I said that the method IS FOR Kindle (new Kindles), iPad and maybe Kobo. I didn't repeat it in my post #7 of this thread because I thought that was enough to write that warning in my original post (https://www.mobileread.com/forums/sho...3&postcount=4) and in the post #4.

Regards

[PeterT]

Forget it. No point discussing it.

[oiver55]

Okay I have tried it out and your epub works both in the sigil previewer and kindle previewer standing alone, but when I insert it in my epub it looks right, in the sigil book view mode but when I preview it in kindle previewer, the same thing happens. The text just shoots right up to the top.
Here is a look at the code above and below your code:

  <div style="page-break-before:always;"></div>

  <div id="content">
    <div class="middle_row">
      <p class="middle_cell">Your Text<br />
      Centered Here</p>
    </div>
  </div><!--
                   FOOD FOR THOUGHT
   Did you know that of all the countless creatures that inhabit planet earth, that man is the only one who destroys his food with heat and chemicals before he eats it? And that consequently, man is the only one who needs so many hospitals?
-->

  <div style="page-break-before:always;"></div>

[RbnJrg]

Originally Posted by oiver55

Okay I have tried it out and your epub works both in the sigil previewer and kindle previewer standing alone, but when I insert it in my epub it looks right, in the sigil book view mode but when I preview it in kindle previewer, the same thing happens. The text just shoots right up to the top.
Here is a look at the code above and below your code:

  <div style="page-break-before:always;"></div>

  <div id="content">
    <div class="middle_row">
      <p class="middle_cell">Your Text<br />
      Centered Here</p>
    </div>
  </div><!--
                   FOOD FOR THOUGHT
   Did you know that of all the countless creatures that inhabit planet earth, that man is the only one who destroys his food with heat and chemicals before he eats it? And that consequently, man is the only one who needs so many hospitals?
-->

  <div style="page-break-before:always;"></div>

You don't need to use "page-break: before" and "page-break: after". Just write the code in a new .xhtml; so you should have to have something like:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title/>
  <link href="../Styles/Style0001.css" rel="stylesheet" type="text/css"/>
</head>

<body>
  <div id="content">
    <div class="middle_row">
      <p class="middle_cell">Your Text<br/>
      Centered Here</p>
    </div>
  </div>
</body>
</html>

Of course, the name of your stylesheet will be different (and the text to be centered). Be sure that the .css stylesheet is linked with the .xhtml page, otherwise the text won't appear centered.

[Grizella]

LOL. You should also mention that the eReader needs to be charged and switched on, otherwise the text will not appear at all