An issue with css stylesheets

[KevinH]

If you ever add iOS to your target epub3 platforms, there is of course the Apple Books.app (iBooks), the Kobo Reader app, and a very nice, free, and compliant epub3 reader called the Bluefire Reader app that I love.

[RbnJrg]

Originally Posted by KevinH

If you ever add iOS to your target epub3 platforms, there is of course the Apple Books.app (iBooks), the Kobo Reader app, and a very nice, free, and compliant epub3 reader called the Bluefire Reader app that I love.

Hi Kevin, many thanks for the info. I can give a test to Bluefire (I didn't know it) because there are also versions for Windows and Android (I will test both of them).

Regarding Kobo, I know it and I tried it, and frankly, the support for epub3 is quite poor; I can't get with it the "vertical floating" that to me, is fundamental to avoid fragmentation. Kobo is good for epub2 but for epub3, it still has to grow

EDIT: I installed Bluefire for Android and the support for epub3 is impresive! And the best of all, my epubs3 are showed as expected

EDIT2: Just as Bluefire is great under Android, it sucks under Windows; a pity.

[JSWolf]

Originally Posted by RbnJrg

Hi Kevin, many thanks for the info. I can give a test to Bluefire (I didn't know it) because there are also versions for Windows and Android (I will test both of them).

Regarding Kobo, I know it and I tried it, and frankly, the support for epub3 is quite poor; I can't get with it the "vertical floating" that to me, is fundamental to avoid fragmentation. Kobo is good for epub2 but for epub3, it still has to grow

EDIT: I installed Bluefire for Android and the support for epub3 is impresive! And the best of all, my epubs3 are showed as expected

EDIT2: Just as Bluefire is great under Android, it sucks under Windows; a pity.

Bluefire Reader is really just a version of ADE. If I am not mistaken, I think it's been updated to the latest RMSDK on iOS and Android and not on Windows. But given that you are using the latest ADE, you don't need Bluefire.

As for ADE 2, it's very useful to see how an ePub 3 will work on an ePub 2 only program.

[DNSB]

Originally Posted by RbnJrg

Regarding Kobo, I know it and I tried it, and frankly, the support for epub3 is quite poor; I can't get with it the "vertical floating" that to me, is fundamental to avoid fragmentation. Kobo is good for epub2 but for epub3, it still has to grow

Which Kobo renderer are you using for your epub3 testing? I've only played with this a couple of times on the iOS app but at that time, it was using the same dual renderer setup as Kobo's ereaders.

[RbnJrg]

Originally Posted by JSWolf

Bluefire Reader is really just a version of ADE. If I am not mistaken, I think it's been updated to the latest RMSDK on iOS and Android and not on Windows. But given that you are using the latest ADE, you don't need Bluefire.

That's weird. Because ADE 4.x doesn't support "shapes" and Bluefire does. And ADE 4.x doesn't support "grids" and Bluefire does. Maybe Bluefire employs ADE for epub2 and use another engine for rendering epub3.

As for ADE 2, it's very useful to see how an ePub 3 will work on an ePub 2 only program.

All my epub3 look awful. Because of a known bug, ADE2 ignores the whole css stylesheet if it finds a css property or value it doesn’t like. For example, in my epub3 I frequently use the property "calc". So, if ADE2 finds something like:

blockquote {
    margin: 1.5em 0;
    border-left: 5px solid black;
    padding-left: calc(5% - 5px);
}

since ADE can’t understand calc() then it will ignore the ENTIRE CSS instead of ignoring this one and only declaration. Go figure, my epub3s are full of css3 properties that ADE2 doesn't understand, when just one of those properties is enough for the program to ignore my entire stylesheet.

[RbnJrg]

Originally Posted by DNSB

Which Kobo renderer are you using for your epub3 testing? I've only played with this a couple of times on the iOS app but at that time, it was using the same dual renderer setup as Kobo's ereaders.

Kobo Forma, Kobo for Desktop and Kobo for Android. All of these platforms have very limited css3 support. No grids, no flex-box, no shapes, very poor implementation of properties to avoid fragmentation, limitated support for MathML. I can live without grids, flex-box and shapes (even I can replace MathML with svg images) but to avoid fragmentation is —to me— a "sine qua non" for an epub3.

[DNSB]

Hmmm... fragmentation. I was looking at that in Chrome a while back and support was so-so. So for the heck of it, I hit the css3test.com site with the latest versions of Firefox, Edge, Chrome and Safari. Firefox and Safari managed a 67% rating while Edge and Chrome managed 63%. (finer grained results were Firefox passing 2233 tests, Safari passing 2207 tests, Chrome passing 2112 tests and Edge passing 2110 tests out of 3435 on 819 features.

As for the ePub3 specification, it would appear that many of the features in the latest CSS snapshot or even the Fragmentation module from 2108 are not fully supported. Though I do admit to a certain level of amusement when reading "CSS Fragmentation Module Level 3—Breaking the Web, one fragment at a time"

[RbnJrg]

Originally Posted by DNSB

Hmmm... fragmentation. I was looking at that in Chrome a while back and support was so-so.

There is a lot to talk about on the subject. It is true that not all properties are implemented, but with those that are, it is possible to create workarounds that mimic those that are not.

What I'm writting, is only valid for epub3. I make this clarification so that no one who is reading this thinks that it can be applied to epub2 (or Kindle).

Under epub3 DOES NOT WORK (except for Calibre):

page-break-before: avoid | always
page-break-after: avoid | always
page-break-inside: avoid; (here there are chances of 50% that will be accepted)

So, under epub3 must be employed:

1) To force a break BEFORE a block:

.breakBefore {
   -webkit-column-break-before: always;
   break-before: column;
}

2) To force a break AFTER a block:

.breakAfter {
   -webkit-column-break-after: always;
   break-after: column;
}

3) To avoid a break INSIDE a block:

.nobreak {
   -webkit-column-break-inside: avoid;
   page-break-inside: avoid;
   break-inside: avoid;
}

4) To control orphans and widows:

.orphwid {
   orphans: 2; /* any POSITIVE-NON ZERO value will work */
   widows: 2;
}

5) To avoid a break BEFORE or AFTER a block:
You can't Properties like the following:

-webkit-column-break-after: avoid;
page-break-after: avoid;
break-after: avoid-column;
break-after: avoid-page;
break-after: avoid;

sadly won't work. But since the property orphans works, then is possible to build a workaround to control a break, for example, after a heading. Suppose we have something like:

  <h2>This is a title</h2>

  <p>This is a long (or not) paragraph of text...</p>

and we want to have at least, and ever, two lines of text after the heading. To do that we have to change the precedent code a bit:

  <p class="special"><span class="heading2">This is a title</span>This is a long (or not) paragraph of text...</p>

with the following styles:

.special {
    text-indent: 0;
    orphans: 3; /* because after h2 has to have two lines of text */
}

.heading2 {
   display: inline-block; /* This is key */
   width: 100%;  /* This is key */
   text-indent: 0;
   text-align: center; /* or whatever you want */
   font-weight: bold; /* or whatever you want */
   font-size: 1.2em; /* or whatever you want */
   padding: 2em 0 1em; /* or whatever you want */
}

The last thing you can control is the fragmentation flow, that is, that there is no blank space left in the flow of text (those blank spaces are generated by images, tables, etc. and cause a break, a jump in the text). It is also possible to avoid those breaks, by using the property "float" in a "special way", but it would take me a lot to explain how to use it.

According to what i have done, under epub3 is possible to get an ebook practically with a minimum of blank spaces (just one or two lines of text at the end of some pages), no matter if the epub have images, tables, side notes, etc. And an ereader for epub3 that can't display that, then -to me- is not a good ereader for epub3. The list of programs and apps I posted, all of them can control the fragmentation, so (and again I make the clarification) to me, they are not garbage.

[CubGeek]

Originally Posted by KevinH

a very nice, free, and compliant epub3 reader called the Bluefire Reader app that I love.

Just a heads-up: Bluefire Reader for iOS is currently listing as $4.99

[JSWolf]

Originally Posted by RbnJrg

That's weird. Because ADE 4.x doesn't support "shapes" and Bluefire does. And ADE 4.x doesn't support "grids" and Bluefire does. Maybe Bluefire employs ADE for epub2 and use another engine for rendering epub3.

Bluefire Reader is based on RMSDK 12.5. But that doesn't mean that the author hasn't done other things to it.

[KevinH]

Originally Posted by CubGeek

Just a heads-up: Bluefire Reader for iOS is currently listing as $4.99

Is that country specific? I do not see any price listed on App store download page.

But either way, well worth the money.

[CubGeek]

Originally Posted by KevinH

Is that country specific? I do not see any price listed on App store download page.

Possibly, I'm here just south of Canada.

But either way, well worth the money.

The last update to the app was over a year ago, which usually makes me a bit nervous; but, I've also spent more than $5 on a bad lunch, so...

I'll give it a shot, thanks!