[RbnJrg]

Originally Posted by roland1

Serious question2: Can I keep titles (H3) together with <p> the next paragraph? I can't seem to find any css code for that or any decent instructions. So easy in print layout, so mysterious in css. Anyone doing this?

Well, ereaders based on Legacy ADE support the property "page-break-after: avoid", so if you give that property to <h3> you'll get what you want. The drawback is that Webkit doesn't honor "page-break-after: avoid" Fortunatelly, the last versions of webkit support the property "orphans", and ADE also support it, so you can use that property as a workaround. Of that way, after an <h> tag, you can have at least, two lines of text (or the number of lines you want).

Suppose you have the following code:

<h3>This is a title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc.</p>

You need to modify that code of the following way:

<p class="joined"><span class="subh3">This is a title</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc.</p>

with the following css styles:

.joined {
   orphans: 3 /* use 4 if you want three lines of text after the <h>tag */
   text-indent: 0;
}

.subh3 {
  display: inline-block;
  width: 100%;
  font-size: 1.2em; /* change the size here according to your wishes */
  font-weight: bold;
  text-align: center; /* change the alignment if you want */
  text-indent: 0em;
  padding: 1em 0; /* change the value here if you want */
}

With the above code you will mimic the property "page-break-after: avoid" for all rendering engine.

EDIT: Of course, not all ereaders have one of the last versions of webkit. So old ereaders devices based on webkit won't be able to avoid the fragmentation.