Orphan CSS: How avoid headers (h1, h2...) on bottom page?

Question

I have a large HTML document with headers (h1, h2, h3...) and paragraphs. When I print the document, I want that, automatically, headers at bottom of document go to next page:

How can I do? I use "orphans: 3" CSS with paragraphs and works with "p" tags, but with h1 or h2 don't work.

@page {
  size: A4;
}

p {
  orphans:3;
}

h1, h2 {
  orphans:3
}

Full example on action where:

• 1-2 page: paragraphs orphan works fine.
• 2-3 page: headers don't works.

Requirements:

• HTML have one main div container.
• Don't alter HTML.
• Browser support isn't important (on my specific job).
• I need some trick in CSS (no JS or Jquery, preferably)
• I can't use page-break-before:always because I want that headers only go to next page when appears at bottom of page.

Answer 1

In typography an orphan is:

A paragraph-opening line that appears by itself at the bottom of a page or column, thus separated from the rest of the text.

However in HTML <h1> and <p> are different paragraphs then what you have to use is break-after property to tell layout engine to do not put a page break after that paragraph (with the side effect to move next paragraph up to previous page - if fit - or to move header to next page.

h1, h2 {
    break-after: avoid-page;
}

Note about compatibility: break-after setting is a true working draft and even basic features are not widely supported (notably Internet Explorer 10 does). To workaround this you may use another property with similar meaning:

h1, h2 {
    page-break-after: avoid;
}

Note that page-break-after applies to both page and columns. page-break-after isn't well supported by FF (it is a bug) then if compatibility is important and paragraph won't span across multiple pages you can workaround wrapping <h1> and <p> inside a container (let's say <section>) and then apply page-break-inside like this:

section {
    page-break-inside: avoid;
}

IMO you should combine page-break-after and page-break-inside using page-break-inside with -moz prefix until it will fix that bug.