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