How to center at bottom of screen? - Page 2

RbnJrg · 09-15-2024, 12:02 PM

Quote:

Originally Posted by foosion

I'd like to center a small picture and some text at the bottom of the screen. I can easily achieve bottom

Code:

div.fixed {
  position: fixed;
  bottom: 0;
}

but can't figure out how to center, other than guessing and playing with right and left (I don't know the size of the screen).

What's the best way?

Hi;

If you want to center (text or images) by using the property "position: fixed", you need to use the following code:

1) In your xhtml file:

Code:

  <p class="fixedTop">Hello!!</p>

  <div class="fixedBottom">
    <img class="myImg" alt="epub" src="../Images/epub.png"/>
  </div>

2) In your .css file:

Code:

body {
  margin: 0;
}

.fixedTop {
  position: fixed;
  top: 0;
  width: 100%; /* This is key */
/* The following properties are for centering (text or images) */
  margin: 0;
  text-indent: 0;
  text-align: center;
}

.fixedBottom {
  position: fixed;
  bottom: 0;
  width: 100%; /* This is key */
/* The following properties are for centering (text or images) */
  margin: 0;
  text-indent: 0;
  text-align: center;
}

.myImg {
  width: 20%; /* Or the width you wish */
}

However, not all epub2 ereaders will honor the property "position: fixed". So, if you plan to make your epub only for epub2, then you should use a table; on the other hand, if you plan to make your epub for epub3, then you should use the property "display: flex" to do what you want to get.

Regards

Turtle91 · 09-15-2024, 12:16 PM

OK - last iteration, I promise!

(I use this as an excuse for getting out of chores - all y'all NEED my advice

)

Using Sigil I was able to push the vh back to 100 by surrounding the author name with the div delineator. This works no-matter the height of the display window.

Make sure you only use this technique on its own html page...otherwise the div's will superimpose over your other text.

Code:

CSS:
body, p  {text-align:center; font-family:serif; font-weight:bold;
          text-indent:0; padding:0; margin:0}

h2.title {font-size:2.7em; text-transform:uppercase}
  .auth  {font-size:1.4em; font-variant:small-caps}
  .sub   {font-size:1.1em}

  .pub     {font-size:.8em}
  .pub img {display:block; width:10%; margin:0 auto}

div[class^="v-"] {height:100vh; width:100vw; display:table; position:fixed}
div.v-top div    {display:table-cell; vertical-align:top}
div.v-mid div    {display:table-cell; vertical-align:middle}
div.v-btm div    {display:table-cell; vertical-align:bottom}

Code:

HTML:
<body>
  <div class="v-top">
    <div>
      <p class="auth">Thomas Perry</p>
    </div>
  </div>
  <div class="v-mid">
    <div>
      <h2 class="title">Eddie's Boy</h2>
      <p class="sub">A Novel</p>
    </div>
  </div>
  <div class="v-btm">
    <div>
      <p class="pub"><img alt="" src="../Images/logo_MysteriousPress.png"/>
      The Mysterious Press<br/>New York</p>
    </div>
  </div>
</body>

Click image for larger version

Name: Screenshot 2024-09-15 115519.png
Views: 26
Size: 33.6 KB
ID: 210841

Click image for larger version

Name: Screenshot 2024-09-15 115448.png
Views: 23
Size: 36.4 KB
ID: 210842

>=======<

You can also put the title/sub lines in the 'top' group:

Code:

HTML:
<body>
  <div class="v-top">
    <div>
      <p class="auth">Thomas Perry</p>
      <h2 class="title">Eddie's Boy</h2>
      <p class="sub">A Novel</p>
    </div>
  </div>
  <div class="v-btm">
    <div>
      <p class="pub"><img alt="" src="../Images/logo_MysteriousPress.png"/>
       The Mysterious Press<br/>New York</p>
    </div>
  </div>
</body>

Click image for larger version

Name: Screenshot 2024-09-15 115542.png
Views: 22
Size: 32.3 KB
ID: 210840

Click image for larger version

Name: Screenshot 2024-09-15 120714.png
Views: 19
Size: 36.8 KB
ID: 210843

RbnJrg · 09-15-2024, 12:16 PM

Quote:

Originally Posted by Turtle91

...
On this example I changed the vh to 95 (95% of viewable height) to accountfor any lost space due to the renderer mis-reporting. This will leave a little bit of space at the bottom, but should look fine.
...

Technically, your solution is right. However, it can be an issue with some epub2 ereaders (i.e. ADE) that they won't honor the "vh" unit. So, instead of "vh", you need to employ "%". But "%" won't work unless you also define the following:

Code:

html, body {height: 100%}

If this is only for one page (a title page for example), it will work; but if is more than one page, the following pages won't be showed.

And to avoid your issues with margins (and also paddings and borders) you could use the property "box-sizing: border-box"; but again

the property won't be honored by many epub2 ereaders. Today, epub2 is more a problem than a solution

To me it's totally deprecated (but I still have to use epub2 properties and code

)

Turtle91 · 09-15-2024, 12:46 PM

Quote:

Originally Posted by JSWolf

If this is for an eBook for sale, then you have to use what works for ePub2 and ePub3.

Not necessarily, Jon. As we've established many times, you can simply include fall-back coding for devices that aren't up to the current standards. If the device doesn't support a particular css then it is required to gracefully ignore it.

Quote:

Originally Posted by RbnJrg

Technically, your solution is right. However, it can be an issue with some epub2 ereaders (i.e. ADE) that they won't honor the "vh" unit. So, instead of "vh", you need to employ "%". But "%" won't work unless you also define the following:

Code:

html, body {height: 100%}

If this is only for one page (a title page for example), it will work; but if is more than one page, the following pages won't be showed.

And to avoid your issues with margins (and also paddings and borders) you could use the property "box-sizing: border-box"; but again

the property won't be honored by many epub2 ereaders. Today, epub2 is more a problem than a solution

To me it's totally deprecated (but I still have to use epub2 properties and code

)

Jinx!!

As always, it depends on the capabilities of your device.

Good point on the html, body {height:100%}!
You can also use fall-back coding for those nasty older devices that don't support 90's technology...

Code:

div[class^="v-"] {height:100%; width:100%; height:100vh; width:100vw;
                  display:table; position:fixed}

Decrepit devices will ignore the position:fixed & vh/vw if they are unsupported leaving you with:

Code:

div[class^="v-"] {height:100%; width:100%; height:100vh; width:100vw;
                  display:table; position:fixed}

IF, like the older ADE, it throws out the entire CSS if it encounters an unknown...then that is a broken system. Luckily, I won't code for such a system. IIRC ADE has fixed that.

JSWolf · 09-17-2024, 09:43 AM

Quote:

Originally Posted by Turtle91

Not necessarily, Jon. As we've established many times, you can simply include fall-back coding for devices that aren't up to the current standards. If the device doesn't support a particular css then it is required to gracefully ignore it.

Jinx!!

As always, it depends on the capabilities of your device.

Good point on the html, body {height:100%}!
You can also use fall-back coding for those nasty older devices that don't support 90's technology...

Code:

div[class^="v-"] {height:100%; width:100%; height:100vh; width:100vw;
                  display:table; position:fixed}

Decrepit devices will ignore the position:fixed & vh/vw if they are unsupported leaving you with:

Code:

div[class^="v-"] {height:100%; width:100%; height:100vh; width:100vw;
                  display:table; position:fixed}

IF, like the older ADE, it throws out the entire CSS if it encounters an unknown...then that is a broken system. Luckily, I won't code for such a system. IIRC ADE has fixed that.

If you are coding for an eBook for sale, you have to code for such a system as that's what is used on a Kobo for ePub. There's no way you can make sure the eBook is read as KePub and not ePub on a Kobo. So you have to make sure the CSS is considered valid and that the eBook looks good enough.

Turtle91 · 09-17-2024, 03:33 PM

Quote:

Originally Posted by JSWolf

If you are coding for an eBook for sale, you have to code for such a system as that's what is used on a Kobo for ePub. There's no way you can make sure the eBook is read as KePub and not ePub on a Kobo. So you have to make sure the CSS is considered valid and that the eBook looks good enough.

Jon...the key words are: "you have to make sure the CSS is considered valid"

Do that using fall-back coding....so if it doesn't understand or support a particular css then it will fall back to coding that it does support....that's all part of good/valid coding...

I will put this example up one more time. Please do some research/learning on how css works. (check out 'CSS order of precedence', and 'specificity') While you are at it, check up on @media and @supports.

{color:blue; color:red; color:green}

will show the color as green because it is the last (most recent) item on the list (not counting styling in the header of the html page, or inline styling)

{height:50%; height:75vh}

will use a height of 75% of the viewable height IF THE DEVICE SUPPORTS VH. If it doesn't support VH then it gracefully ignores it (as required by spec) and falls back to the next most recent item on the list and will use a height of 50%.

Thus you CAN have css that uses the advanced ePub3.3 and/or html5 for the devices that support it, while still being readable on an ePub2 device. You absolutely do NOT have to code for ePub2 only just to be compatible.

JSWolf · 09-20-2024, 01:50 PM

Quote:

Originally Posted by Turtle91

Jon...the key words are: "you have to make sure the CSS is considered valid"

Do that using fall-back coding....so if it doesn't understand or support a particular css then it will fall back to coding that it does support....that's all part of good/valid coding...

I will put this example up one more time. Please do some research/learning on how css works. (check out 'CSS order of precedence', and 'specificity') While you are at it, check up on @media and @supports.

{color:blue; color:red; color:green}

will show the color as green because it is the last (most recent) item on the list (not counting styling in the header of the html page, or inline styling)

{height:50%; height:75vh}

will use a height of 75% of the viewable height IF THE DEVICE SUPPORTS VH. If it doesn't support VH then it gracefully ignores it (as required by spec) and falls back to the next most recent item on the list and will use a height of 50%.

Thus you CAN have css that uses the advanced ePub3.3 and/or html5 for the devices that support it, while still being readable on an ePub2 device. You absolutely do NOT have to code for ePub2 only just to be compatible.

What I am meaning is there is some code that does work for ePub 3 but for the older RMSDK that Kobo uses it's treated as an error and thus the entire CSS is ignored. That's what happens with Standard EBooks. They use some code that fails on a Kobo as ePub. That's why you have to make sure the code works well enough for that older version of RMSDK and doesn't cause RMSDK to think of it as an error and ignore the CSS.

The other thing is, if the older ePub 2 type code does work such as % instead of vh, then there's no reason to use vh.

The other thing I'm not sure of is doesn't duplicate code lower down in the CSS get used instead of code higher up? If that is the case, then the % would be ignored for the vh and the code would not work in the older RMSDK.

But what do you do with ePub 3.x CSS that the older RMSDK thinks is an error and ignores the entire CSS? That would mean the code you are using is going to be an issue.

Turtle91 · 09-20-2024, 02:19 PM

Quote:

Originally Posted by JSWolf

What I am meaning is there is some code that does work for ePub 3 but for the older RMSDK that Kobo uses it's treated as an error and thus the entire CSS is ignored. That's what happens with Standard EBooks. They use some code that fails on a Kobo as ePub. That's why you have to make sure the code works well enough for that older version of RMSDK and doesn't cause RMSDK to think of it as an error and ignore the CSS.

Thus the comment that "the device does matter", but if the decrepit device completely ignores the entire css, then it is broken and does not conform to the spec. Kobo needs to fix it.

For the small(ish) percentage of people that publish specifically on the kobo, they should be aware of their broken product and bring it up with the manufacturer. If the manufacturer is unresponsive, and they continue using a broken product, then that is on them.

Quote:

Originally Posted by JSWolf

The other thing is, if the older ePub 2 type code does work such as % instead of vh, then there's no reason to use vh.

There is a reason to use vh: if you want to use the capabilities that vh provides, which % does not.

Quote:

Originally Posted by JSWolf

The other thing I'm not sure of is doesn't duplicate code lower down in the CSS get used instead of code higher up? If that is the case, then the % would be ignored for the vh and the code would not work in the older RMSDK.

The vh would get used, IF IT IS SUPPORTED. If it is not supported then, on spec compliant devices, it would ignore vh and use the % instead. (that's called fall-back coding)

Quote:

Originally Posted by JSWolf

But what do you do with ePub 3.x CSS that the older RMSDK thinks is an error and ignores the entire CSS? That would mean the code you are using is going to be an issue.

Upgrade your decrepit RMSDK device...

At some point you need to stop using the horse and buggy...

JSWolf · 09-20-2024, 02:39 PM

I highly doubt that Kobo will update RSMDK. They haven't updated RMSDK since I've had a Kobo. The thing is, you cannot guarantee that an eBook will be read as KePub on a Kobo.

There is no upgrading RMSDK on a Kobo. I cannot see Kobo updating to the latest RMSDK.

Turtle91 · 09-20-2024, 03:08 PM

Quote:

Originally Posted by JSWolf

I highly doubt that Kobo will update RSMDK. They haven't updated RMSDK since I've had a Kobo. The thing is, you cannot guarantee that an eBook will be read as KePub on a Kobo.

There is no upgrading RMSDK on a Kobo. I cannot see Kobo updating to the latest RMSDK.

As you’ve mentioned many times…

My point still stands: if the manufacturer refuses to update their non-spec-compliant device, and you choose to continue using it, that’s on you. Your choice, of course, but choices have consequences. On the other hand, if people stop using broken devices, they will either get fixed, replaced, or go out of business.

RbnJrg · 09-21-2024, 01:02 AM

Quote:

Originally Posted by JSWolf

...
But what do you do with ePub 3.x CSS that the older RMSDK thinks is an error and ignores the entire CSS? That would mean the code you are using is going to be an issue.

That point is not a problem at all. What I do to avoid that with a property that is not recognized by the program and so the entire css is ignored is to employ JAVASCRIPT!!!

All css3 properties are in one css stylesheet and all css2 properties are in another css stylesheet. With javascript I add the stylesheet with the css3 properties to the xhtml files. If the epub is open with an epub2 ereader, then the script is not executed and the css3 properties never are employed (because never is linked to the xhtml files). On the other hand, if the epub is open by an epub3 ereader, the script is executed, the css3 stylesheed is added and the css3 properties overwrite the css2 ones. One of this days I will upload an epub2/3 so you can watch how the code works. The epub3 ereaders will give the best reading experience while epub2 ereaders can give a decent (but not the best) one.

JSWolf · 09-21-2024, 05:27 AM

Quote:

Originally Posted by RbnJrg

That point is not a problem at all. What I do to avoid that with a property that is not recognized by the program and so the entire css is ignored is to employ JAVASCRIPT!!!

All css3 properties are in one css stylesheet and all css2 properties are in another css stylesheet. With javascript I add the stylesheet with the css3 properties to the xhtml files. If the epub is open with an epub2 ereader, then the script is not executed and the css3 properties never are employed (because never is linked to the xhtml files). On the other hand, if the epub is open by an epub3 ereader, the script is executed, the css3 stylesheed is added and the css3 properties overwrite the css2 ones. One of this days I will upload an epub2/3 so you can watch how the code works. The epub3 ereaders will give the best reading experience while epub2 ereaders can give a decent (but not the best) one.

So basically any ePub software that's not ePub3 or does not do the Javascript will get the CSS2 code and the rest will get the CSS3 code. I wonder if that will work on a Kobo with KePub.

RbnJrg · 09-21-2024, 08:13 AM

Quote:

Originally Posted by JSWolf

So basically any ePub software that's not ePub3 or does not do the Javascript will get the CSS2 code and the rest will get the CSS3 code.

Exactly!

Quote:

I wonder if that will work on a Kobo with KePub.

Yes, it works on Kobo (and in ADE 2.x, that is RMSDK).

JSWolf · 09-23-2024, 08:58 AM

Quote:

Originally Posted by RbnJrg

Exactly!

Yes, it works on Kobo (and in ADE 2.x, that is RMSDK).

Actually, it's RMSDK from ADE 3.x.

RbnJrg · 09-23-2024, 11:46 PM

Quote:

Originally Posted by JSWolf

Actually, it's RMSDK from ADE 3.x.

What I wanted to mean is that the epub would be opened even for those ereaders with the old ADE 2.x engine (and ignoring all the code for epub3 included in the ebook).

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Screen shady bottom	emreceng	Onyx Boox	3	02-09-2020 01:15 PM
Aura HD Lines on bottom of screen	hf.tan	Kobo Reader	4	08-28-2014 08:02 PM
Page numbers at bottom of screen	Waylander	Sony Reader	1	10-18-2013 02:21 PM
Circled M or S at the bottom of the screen	Larken	Sony Reader	4	12-18-2009 03:15 PM
Black line 3½ cm from bottom of screen	Moonraker	iRex	6	08-20-2006 11:19 AM

09-20-2024, 02:39 PM	#24
JSWolf Resident Curmudgeon Posts: 76,140 Karma: 134368292 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	I highly doubt that Kobo will update RSMDK. They haven't updated RMSDK since I've had a Kobo. The thing is, you cannot guarantee that an eBook will be read as KePub on a Kobo. There is no upgrading RMSDK on a Kobo. I cannot see Kobo updating to the latest RMSDK.