Orphaned Headers in Epubs

I have another question relating to CSS in epubs. I just learned about the CSS widows and orphans styles…

widows: 3

My pages look a lot cleaner now. However, I still have a problem with headers or subheaders that rest at the bottom of the page, with the following paragraph behind the bend on the next page.

Is there some kind CSS style or trick that can force such headers on to the next page? I can’t target specific headers, because their position will be influenced by the viewing device, font size, etc. Rather, I’m looking for something that will target any header that winds up at the bottom of a page.

Thanks!

Hi,

I think I can understand what you try to do.

The “widows” need to apply to a block that contains what should be kept together at a page break.

Have you tried wrap the header/subheader and the necessary paragraphs in a container the “widows” can be applied to? Like:

.linestack {
    widows: 3; /* heading and following two lines */
}
<div class="linestack">
  <h2>Sub Header keeping two lines</h2>
  <p>One line short paragraph</p>
  <p>Paragraph with a ten lines text block.</p>
</div>

Ah, that makes sense. Thanks!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.