How to center at bottom of screen?

[JSWolf]

Originally Posted by RbnJrg

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).

I do like your idea of different CSS for ePub2 or ePub3.

[RbnJrg]

Originally Posted by JSWolf

I do like your idea of different CSS for ePub2 or ePub3.

The best thing is that works If the ereader device can't read the javascript that links the css3 stylesheet to the xhtml files, then it means that is only an epub2 ereader and the css3 code never is loaded; in that case you have a perfect epub2 ebook On the other hand, if the javascript can be executed, then it means that we have an epub3 ereader, the css3 stylesheet is linked and the css2 classes are overwritten; you have a perfect epub3 ebook. Two epubs in only one ebook; the best of both worlds.

[RbnJrg]

For those who want to play with the idea of ​​changing styles from css2 to css3 via javascript, I attach a simple epub that only contains a title page.

The epub is initially only linked to the epub2.css stylesheet and therefore the layout is pure epub2/css2. When the epub is loaded, if the e-reader is one that supports epub3, the script will be executed and link the epub3.css stylesheet. Since the styles in this stylesheet have the same name as the styles in the epub2.css and is linked later, the epub3 styles overwrite the epub2 ones and of this way the epub gives the best reading experience.

In the example you can see how the title page improves when a flex-box is used. All texts are perfectly centered, both horizontally and vertically, and the layout is maintained regardless of the change in font size. This does not happen when the epub is opened in an e-reader that only supports epub2, since here, changes in font size strongly affect the layout. Try opening the epub first in ADE 2.x/3.x (or KOReader, that is a nice epub2 ereader) and then open this same epub for example in Calibre Viewer/Thorium/Readium. When you open it in ADE 2.x/3.x/KOReader only the code for epub2 is active and consequently the vertical centering is affected by the change in font size. On the other hand, when the epub is opened in Calibre Viewer/Thorium/Readium the code for epub3 is activated and the centering, both vertical and horizontal, is maintained regardless of the font size.

In conclusion, the attached epub can be opened by an epub2 and epub3 e-reader. If it is opened by an epub2 device, only de epub2 code is enabled and the reader has a nice and old epub to read ; if it is opened by an epub3 device, then the epub3 code is enabled and overwrites the epub2, giving the best reading experience.

In the epub you can also see the simple script that allows the linking of the code for epub3 when the book is opened.

[JSWolf]

Originally Posted by RbnJrg

For those who want to play with the idea of ​​changing styles from css2 to css3 via javascript, I attach a simple epub that only contains a title page.

What happens if this ePub is read initially with an ePub3 reader and the Javascript is executed. Then the ePub is read on an ePub2 reader. How does CSS2 get used since the CSS is now CSS3 from the previous view? Does the Javascript run when either the ePub is closed and/or the program is exited to put the CSS2 back in place?

[Turtle91]

Jon, the JavaScript doesn’t CHANGE the css… it simply attaches the new file when the epub is loaded on a device that runs js. If it doesn’t run js it doesn’t link the new css file.

The epub file doesn’t change at all between devices.

[Turtle91]

Also, this js technique is not strictly necessary on a compliant device. Simply linking the ePub3 css file AFTER the ePub2 css file would work the same way. RbnJrg’s js technique protects against non-compliant devices/apps by only linking the ePub3 css if it can run js. Thus you wouldn’t have decrepit devices ignoring all the css if it didn’t like one. A compliant device would do this automatically by ignoring css it doesn’t support. This js technique can be used in multiple ways, however, and is a great step in learning “fall-back” coding theories.

Thanks RbnJrg

[RbnJrg]

Originally Posted by JSWolf

What happens if this ePub is read initially with an ePub3 reader and the Javascript is executed. Then the ePub is read on an ePub2 reader. How does CSS2 get used since the CSS is now CSS3 from the previous view? Does the Javascript run when either the ePub is closed and/or the program is exited to put the CSS2 back in place?

Turtle91 answered you very well; nothing happens! Because the linking of the css3 stylesheet is temporal; once the epub is closed, the linking is broken and again you only have an epub with the css2 sheet "physically" linked. Do the try and you'll see how the things work.

[RbnJrg]

Originally Posted by Turtle91

Also, this js technique is not strictly necessary on a compliant device. Simply linking the ePub3 css file AFTER the ePub2 css file would work the same way. RbnJrg’s js technique protects against non-compliant devices/apps by only linking the ePub3 css if it can run js. Thus you wouldn’t have decrepit devices ignoring all the css if it didn’t like one.

Exactly! I developed this hack as a workaround for epub ereaders based on ADE 2.x (RMSDK).

A compliant device would do this automatically by ignoring css it doesn’t support.

That's right.

This js technique can be used in multiple ways, however, and is a great step in learning “fall-back” coding theories.

With this technique is easy to convert an epub2 into an epub3. It's not necessary to erase nothing; just to add a new css stylesheet with the new properties for existing styles. And one doesn't have to worry about compatibility with old epub ereaders because the new styles, they only will be loaded (and will overwrite the existing ones) by epub3 ereaders. The issues with ADE 2.x are gone!

Thanks RbnJrg

You are welcome