CSS orfani: come evitare le intestazioni (h1, h2 ...) nella pagina inferiore?

Question

Ho un documento HTML di grandi dimensioni con intestazioni (h1, h2, h3 ...) e paragrafi. Quando stampo il documento, voglio che, automaticamente, le intestazioni a fondo documento vai alla pagina successiva:

Come posso fare? Io uso "orfani: 3" CSS con paragrafi e funziona con i tag "p", ma con h1 o h2 non funzionano.

@page { 
    size: A4; 
} 

p { 
    orphans:3; 
} 

h1, h2 { 
    orphans:3 
} 

Full example on action dove:

• 1-2 pagina: paragrafi opere orfane bene.
• 2-3 pagina: le intestazioni non funzionano.

Requisiti:

• HTML hanno un div contenitore principale.
• Non modificare l'HTML.
• Il supporto del browser non è importante (sul mio lavoro specifico).
• Ho bisogno di qualche trucco nei CSS (non JS o Jquery, preferibilmente)
• Non riesco a usare page-break-before: sempre perché voglio che le intestazioni vadano solo alla pagina successiva quando appare in fondo alla pagina.

Answer 1

In tipografia orfano è:

Una linea paragrafo di apertura che appare da solo nella parte inferiore di una pagina o colonna, quindi separata dal resto del testo.

Tuttavia in HTML <h1> e <p> sono diversi paragrafi allora quello che hai da utilizzare è break-after proprietà di raccontare motore di layout per non mettere un'interruzione di pagina dopo che il punto (con l'effetto collaterale di spostare paragrafo successivo up alla pagina precedente - se opportuno - o per spostarsi alla pagina successiva intestazione

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

Nota sulla compatibilità: break-after impostazione è un progetto vera di lavoro e anche le caratteristiche di base non sono ampiamente supportato (n. tably Internet Explorer 10 fa). Per risolvere questo si può utilizzare un altro immobile con significato simile:

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

Nota che page-break-after vale per sia la pagina e le colonne.page-break-after non è ben supportato da FF (it is a bug) allora se la compatibilità è importante e paragrafo non si estenderà su più pagine È possibile risolvere il confezionamento <h1> e <p> all'interno di un contenitore (diciamo <section>) e quindi applicare page-break-inside come questo:

section { 
    page-break-inside: avoid; 
} 

IMO è necessario combinare page-break-after e page-break-inside utilizzando page-break-inside con il prefisso -moz finché non verrà risolto il problema.