Is it Safe to Use height: 100vh?

[Slevin#7]

In some cases I wanna center images vertically on a single page. For that reason I set page-break-before and after on the container and center the image via flex.

HTML

<div class="single-page v-center">
  <figure>
    <img src="../images/aloha.png"/>
  </figure>
</div>

CSS

.single-page {
  -webkit-column-break-before: always;
            page-break-before: always;
                 break-before: always;
   -webkit-column-break-after: always;
             page-break-after: always;
                  break-after: always;
}

.single-page.v-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Now, my question is, are there any downsides using the full 100vh, since I've seen some people using 98vh for whatever reason?

Also, I've noticed that Thorium (at least the version I'm running) doesn't recognize the page-break properties, but still uses the full 100vh for the conainer, which results in a container with the expected height but the container is split into two parts over two pages, while the image itself is put on the second page, overlaying text which is not nudged bottomwards. The space reserved is correct with 100vh, but it's not reserved on a single page, while the image is then taken out of the flow and put onto the second page. Really bad.

However, all other reader I've tested (Google, Apple, Calibre, PocketBook) seem to work well.

I'm grateful for any opinion on that.
Thanks

[JSWolf]

It's not a good idea to with hv or wv if you want ePub2 compatibility. If you don't care about ePub2 compatibility, you can use vh and vw,

[Slevin#7]

Originally Posted by JSWolf

It's not a good idea to with hv or wv if you want ePub2 compatibility. If you don't care about ePub2 compatibility, you can use hv and wv,

Afaik, EPUB2 would simply ignore the vh, since it just doesn't know about, right? And since flex also isn't supported by EPUB2, it just shouldn't do anything but displaying the content in its normal flow.

Btw, is that a typo in your answer with hv and wv, or are these proper units?

[RbnJrg]

Originally Posted by Slevin#7

...
I'm grateful for any opinion on that.
Thanks

You don't need page-breaks if you work under epub3; watch the attached epub. Try to increase/decrease the font-size to see what happens.

[RbnJrg]

Originally Posted by Slevin#7

Btw, is that a typo in your answer with hv and wv, or are these proper units?

JSWolf made a typo; the right units are vh (viewport-height) and vw (viewport-width).

[JSWolf]

Originally Posted by Slevin#7

Afaik, EPUB2 would simply ignore the vh, since it just doesn't know about, right? And since flex also isn't supported by EPUB2, it just shouldn't do anything but displaying the content in its normal flow.

Btw, is that a typo in your answer with hv and wv, or are these proper units?

If you did something like

.height {
height: 100%;
height: 100vh;
}

the last height line would be the one used or ignored. Same goes for ePub3. So if you want ePub2 compatibility, vh and vw have to go. You cannot use them.

[JSWolf]

Originally Posted by RbnJrg

JSWolf made a typo; the right units are vh (viewport-height) and vw (viewport-width).

Thanks for catching the typo. I've fixed it.

[Quoth]

Originally Posted by JSWolf

If you did something like

.height {
height: 100%;
height: 100vh;
}

the last height line would be the one used or ignored. Same goes for ePub3. So if you want ePub2 compatibility, vh and vw have to go. You cannot use them.

Or even maybe two sets of CSS?

[Turtle91]

Yes, he could just use 2 css sheets.

I think JSWolfe's understanding of CSS is tainted by his experience with ADE. He thinks that the use of anything not understood/supported will cause the entire css sheet to be ignored, instead of just that portion that is not understood/supported. That is a valid concern under ADE but it is not a CSS issue. The portion below in red is an ADE issue not a css issue.

If you did something like

.height {
height: 100%;
height: 100vh;
}

the last height line would be the one used or ignored. Same goes for ePub3. So if you want ePub2 compatibility, vh and vw have to go. You cannot use them.

Instead, he should have said something like this:

Under ePub2
If you did something like

.height {
height: 100%;  /*accepted: height = 100%/*
height: 100vh; /*rejected - vh not supported: height remains = 100%/*
}

The last height line would be ignored because vh is not supported/understood.

Under ePub3
If you did something like

.height {
height: 100%;  /*accepted: height = 100%/*
height: 100vh; /*accepted - vh supported: height = 100vh/*
}

The last height line would be used because vh is supported and it is the most recent css following css heirarchy rules (height would be set to 100vh instead of 100%).

Unfortunately ADE (old decrepit version) is not the only device/app that doesn't follow css rules, so you must test your coding on the devices/apps that you are marketing.

[Falkor]

Originally Posted by Turtle91

Unfortunately ADE (old decrepit version) is not the only device/app that doesn't follow css rules, so you must test your coding on the devices/apps that you are marketing.

Current versions of ADE still have this problem, but only when opening epub2 files.

[RbnJrg]

Originally Posted by Falkor

Current versions of ADE still have this problem, but only when opening epub2 files.

That is because ADE 4 has two rendering engines: the old RMSDK to render epub2 and a Readium derivative for rendering epub3. That's why epub2 renders look the same in both ADE 2.x/3.x and ADE 4.x.

[JSWolf]

Originally Posted by Turtle91

Yes, he could just use 2 css sheets.

I think JSWolfe's understanding of CSS is tainted by his experience with ADE. He thinks that the use of anything not understood/supported will cause the entire css sheet to be ignored, instead of just that portion that is not understood/supported. That is a valid concern under ADE but it is not a CSS issue. The portion below in red is an ADE issue not a css issue.

It's not because of ADE. It's because many programs that do not support ePub3 will not support vh and vw. And CSS works top down. So if you have two height lines like a posted, only the second one will be used. The first one will not be used. vh and vw are not considered an error in ADE. But the 100% will not work because the second height line will be used instead.

Also, using 2 style sheets will not always work. Not every ePub3 compatible program supports Javascript. So you have to treat your ePub like the program being used don't do Javascript.

[KevinH]

For the record, which true epub3 ereaders do not support even basic javascript?

[RbnJrg]

By the way, the OP could try using not only "vh" but also "svh" or "dvh" (for example, Sigil and its plugins, Thorium, Calibre Viewer, accept those units). Regarding units viewport there are much more than vh and wh:

https://www.terluinwebdesign.nl/en/b...h-svw-lvw-dvw/

https://caniuse.com/?search=svh

These new sv* units are especially useful for Android and iOS e-readers. One could try a style with:

.myHeight {
   height: 100vh;
}

@supports (height: 100svh) {
   .myHeight {
      height: 100svh;
   }
}

[theducks]

Originally Posted by Slevin#7

Afaik, EPUB2 would simply ignore the vh, since it just doesn't know about, right? And since flex also isn't supported by EPUB2, it just shouldn't do anything but displaying the content in its normal flow.

Btw, is that a typo in your answer with hv and wv, or are these proper units?

Some IGNOR THE WHOLE CSS when they disagree. Don't always believe the specs. They are only guidelines