Page breaks & keeping paragraphs together

[roland1]

Hey folks. Still using Sigil. Enjoying the improvements.

My question is this: I'm putting out an epub version of a book I published before. It is a book of questions, and each questions has a topic heading. In other words, there's a title followed by a paragraph of text, usually 2 lines or less.

Sort of question1: I want to make 3 or four questions per page. I guess I'll have to split the pages, right?

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?

I may have more questions, but this is good for now. Thanks in advance.

[theducks]

<h3 does not cause a page break by default. So...

<div class="together">
<h3 class="foo">Topic</h3>
<p class="descript">bar1</p>
<p class="descript">bar2</p>
<p class="descript">bar3</p>
</div>

Where CSS

.together {
Display:block; 
page-break-inside:avoid;
}

The issue is not all devices process this code

[Tex2002ans]

Originally Posted by roland1

I'm putting out an epub version of a book I published before. It is a book of questions, and each questions has a topic heading. In other words, there's a title followed by a paragraph of text, usually 2 lines or less.

Sort of question1: I want to make 3 or four questions per page. I guess I'll have to split the pages, right?

The only way to 100% guarantee this working across all devices is to:

• split each question+answer into its own HTML file.

Otherwise, you have to rely on:

• page-break-before: always and/or page-break-inside: avoid in your CSS.

Your ebook can then make suggestions to the device—"please break here"—but most devices don't support (or will ignore) that CSS code.

- - -

Side Note: For more detailed info, see my responses and code examples in:

• 2022: "Widows & Orphans won't disappear"
  
  • See "Method #1: Split Each Poem Into Its Own HTML File" + "Method #2: CSS page-break"
    
• 2022: "Remove blank pages"
  
  • See the "Side Note" ~3/4th of the way down, where I discuss page-break-before + page-break-after.
    

In those threads, I also went into extreme detail on lyrics/poetry, where you sometimes want these things kept together as entire chunks.

(I believe one of those users had a book full of poems, so wanted each poem starting on its own screen.)

- - -

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.

It's possible... But would it work well on actual devices? Not really.

When I deal with poems + figures/captions, I follow the best practices I described in the links above, then cross my fingers and hope better devices/readers come out in the future.

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

[Turtle91]

Originally Posted by Tex2002ans

...

It's possible... But would it work well on actual devices? Not really.

When I deal with poems + figures/captions, I follow the best practices I described in the links above, then cross my fingers and hope better devices/readers come out in the future.

Yup, that pretty much sums it up. You could try something like:

div.keeptogetherprettyplease {break-inside:avoid}


<div class="keeptogetherprettyplease">
  <h3>The First Question</h3>
  <p class="Question">WHAT is your name?</p>
  <p class="Answer">Sir Robin of Camelot.</p>
</div>

<div class="keeptogetherprettyplease">
  <h3>The Second Question</h3>
  <p class="Question">WHAT is your quest?</p>
  <p class="Answer">To seek the Holy Grail.</p>
</div>

<div class="keeptogetherprettyplease">
  <h3>The Third Question</h3>
  <p class="Question">WHAT is the capital of Assyria?</p>
  <p class="Answer">I don’t know that.......Auuuuuuuugh.</p>
</div>

The device/app is responsible for all that stuff. All we can do is put in the way we would want it (our css). Some devices/apps are better at following those desires than others. However, even for the best device out there, they are still constrained by unchangeable things like screen size, or if the device is in portrait vs landscape mode, or how big is the font the user wants to read with, or what are the margins around the outer edge of the device, or what line-spacing they want..... are you seeing some of the issues??

No matter what we would like, the user may not see more than a few words per screen (seriously... my wife has the font sooo large and the spacing so big, she only sees a few words per 'page' on her iPhone 14 Pro Max.) So all that headache you are putting yourself through to get it just right really is only worth it in a print format....not a reflowable electronic one.


Cheers!


edit: ooops...ninja'd by RbnJrg. I would completely trust his advice if you are using ePub2. But I think widows/orphans have been deprecated in ePub3, so you may need to check that if you are using ePub3.

[RbnJrg]

Originally Posted by Turtle91

edit: ooops...ninja'd by RbnJrg. I would completely trust his advice if you are using ePub2. But I think widows/orphans have been deprecated in ePub3, so you may need to check that if you are using ePub3.

Orphans and widows are honored under epub3. The main issue here are ereader devices. Under epub3, it is guaranteed that a break can be avoided after a <h>. Under epub2, with apps, practically there are no problems there and the code I posted will work, but with physical devices, things are not good. For example, with Kobo, things won't work (I don't know why Kobo is still using an old version of webkit). Fragmentation can be better avoided in a Nook or (it may seem paradoxical) in an old readers like Sony (both devices are based on RMSDK). And under epub2, is better to use:

.joined {
    display: inline-block;
    width: 100%;
}

than:

.joined {
    display: block;
    page-break-inside: avoid;
    break-inside: avoid;
}

The first code, will work everywhere, but with second code "page-break-inside: avoid" only willl work with RMSDK and "break-inside: avoid" only with readers that have one of the last versions of webkit (in Kobo for example, won't work).