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