full "page" images with text reflow

[RbnJrg]

Originally Posted by PilcrowandStanza

wonderful! This makes things so much simpler! (Don't have to do the whole image/caption grouped in seperate frame thing.) I even figured out how to do a variant that floats/wraps top right. (sweet!)

If you were here I would hug you!
Thank you so much!!

With your words is enough Glad that what I posted was useful for you.

[JSWolf]

Originally Posted by PilcrowandStanza

wonderful! This makes things so much simpler! (Don't have to do the whole image/caption grouped in seperate frame thing.) I even figured out how to do a variant that floats/wraps top right. (sweet!)

If you were here I would hug you!
Thank you so much!!

You do not want to use vh instead of %. The problem will be that a lot of programs/devices do not support vh and it won't work. The keep it simple rule does not allow vh in CSS.

The problem is that @RbnJrg is using Chrome add-ons such as Readium and Chrome does not support % properly. That's why full screen covers failed with valid code. Most people will not be using Chrome add-ons to read ePub. Most will be using a phone, tablet, or Reader.

[Turtle91]

Vh and vw are acceptable Jon. Did you miss the whole section/dicussion of making sure there was fallback code??

[RbnJrg]

Originally Posted by Turtle91

Vh and vw are acceptable Jon. Did you miss the whole section/dicussion of making sure there was fallback code??

That's right! The OP still has to write the code for epub2. Vh an vw belong to css2 but ADE 2.x does not honor those units. For heigth, is not possible to use % unless you first define the height of the container and, how do you do that? What do you use? Px, em? We don't know the size of the screen; for that reason vh saves the day, but ereaders based on RMSDK won't support it. Fortunatelly ADE 4.x supports viewport units.

[Turtle91]

Aside:

Spoiler:

Congrats on your 1500th post RbnJrg!!!

[RbnJrg]

Originally Posted by JSWolf

The keep it simple rule does not allow vh in CSS.

The KISS rule is deprecated

[Jellby]

Originally Posted by RbnJrg

Vh an vw belong to css2 but ADE 2.x does not honor those units.

To be fair, they are not, as far as I remember, included in the epub2 subset, so any epub2 reader is entitled to shamelessly ignore them.

[RbnJrg]

Originally Posted by Turtle91

Aside:

Spoiler:

Congrats on your 1500th post RbnJrg!!!

Thank you very much!! I hadn't realized that! Wow! 1500 post since March 2013. The truth is that it scares me a little, because time flew by

[RbnJrg]

Originally Posted by Jellby

To be fair, they are not, as far as I remember, included in the epub2 subset, so any epub2 reader is entitled to shamelessly ignore them.

And all ereaders based on RMSDK do that, they shamelessly ignore viewport units.

[RbnJrg]

Originally Posted by JSWolf

The problem is that @RbnJrg is using Chrome add-ons such as Readium and Chrome does not support % properly. That's why full screen covers failed with valid code. Most people will not be using Chrome add-ons to read ePub. Most will be using a phone, tablet, or Reader.

I test my code with all kind of apps and programs (based and non based on Chrome). The issue with "%", is that "%" works fine for "width" but in order to work fine with "height" (under Chrome or everywhere), it must be defined first the "height" of the container.

Things are not analogous. When we defined a "%" for a width, we are referring to the width of the screen. But when we defined a "%" for a height. we are not referring to the height of the screen but we are referring to the height of the container. So, if you want to use "%" referring to the height of the screen, you need first to set the height of html and body of this way:

html, body {
   height: 100%;
}

The above is ok ONLY for one page (like a cover). Do that, and things also will work under Chrome. However, you can find drawbacks in some others apps and programs.

[JSWolf]

Originally Posted by Turtle91

Sooooo, what is "correct"? 100% is not correct on some devices; it causes a blank page following. Since 95% was an example, and specifically stated as an example, we can rely on readers to be smart enough to make their own decisions.

Personally, I use 95vh to be centered and take up 95% of the viewport (screen).

Cheers!

It's not correct if it's supposed to be a full screen image yet there are lines underneath because the image does not use enough of the screen.

[JSWolf]

Originally Posted by RbnJrg

I test my code with all kind of apps and programs (based and non based on Chrome). The issue with "%", is that "%" works fine for "width" but in order to work fine with "height" (under Chrome or everywhere), it must be defined first the "height" of the container.

Things are not analogous. When we defined a "%" for a width, we are referring to the width of the screen. But when we defined a "%" for a height. we are not referring to the height of the screen but we are referring to the height of the container. So, if you want to use "%" referring to the height of the screen, you need first to set the height of html and body of this way:

html, body {
   height: 100%;
}

The above is ok ONLY for one page (like a cover). Do that, and things also will work under Chrome. However, you can find drawbacks in some others apps and programs.

Thanks. That does fix the bug with chromium.

[Turtle91]

Originally Posted by JSWolf

It's not correct if it's supposed to be a full screen image yet there are lines underneath because the image does not use enough of the screen.

Not all devices/apps work the same way. Some will eat into the 100vh, reserving the space for headers/footers/progress bars etc. So, if you state 100vh then there is a little bit that hangs over to the next page. That's why some people will use 95vh to allow for those extra little things that some apps/devices do.

If you don't like 95, then you could try 94.5 or 96....