Proprietà CSS page-break-before

La proprietà CSS page-break-before controlla se un'interruzione di pagina viene forzata, evitata o lasciata automatica prima di un dato elemento quando il documento viene stampato o visualizzato in qualsiasi contesto di supporto paginato (stampa, esportazione PDF, anteprima di stampa).

Su uno schermo normale, il contenuto web scorre in un'unica pagina continua, quindi non c'è nulla da interrompere. Ma quando la stessa pagina viene inviata a una stampante o salvata come PDF, il browser deve decidere dove finisce un foglio di carta e dove inizia il successivo. page-break-before ti permette di influenzare queste decisioni — ad esempio, per far iniziare ogni intestazione di capitolo in cima a una nuova pagina, o per mantenere il contenuto unito.

La proprietà non ha effetti visibili sullo schermo; di solito la si inserisce in un blocco @media print in modo che le regole vengano applicate solo quando il documento viene stampato. Non si applica agli elementi posizionati in modo assoluto.

Sintassi

page-break-before: auto | always | avoid | left | right | initial | inherit;

Esempio: inizia ogni capitolo su una nuova pagina

Un uso comune è forzare ogni intestazione di primo livello ad iniziare sulla propria pagina stampata. Applica page-break-before: always a ogni h2 in modo che una nuova pagina inizi prima di essa:

@media print {
  h2 {
    page-break-before: always;
  }
}

<h2>Chapter 1</h2>
<p>Content of chapter one...</p>

<h2>Chapter 2</h2>
<p>Content of chapter two...</p>

Quando viene stampato, "Chapter 2" inizia in cima a una nuova pagina, anche se "Chapter 1" lasciava spazio sulla pagina corrente.

Esempio: forza una pagina sinistra o destra

Per i documenti stampati fronte-retro (libri, report), puoi controllare da quale lato del foglio l'elemento inizia. Usa left o right per forzare una pagina dispari o pari prima dell'elemento:

@media print {
  .chapter-start {
    page-break-before: right; /* start on a right-hand (odd) page */
  }
}

Se l'elemento inizierebbe già su una pagina destra, il browser inserisce una pagina vuota per spostarlo alla successiva pagina destra. Questo è lo stesso comportamento utilizzato dai software di composizione tipografica per le aperture di capitoli nei libri.

Esempio: sopprimere le interruzioni indesiderate

Usa avoid per scoraggiare un'interruzione immediatamente prima di un elemento. Questo è utile per evitare che un paragrafo introduttivo venga separato dall'intestazione sopra di esso:

@media print {
  h2 + p {
    page-break-before: avoid;
  }
}

Nota che avoid è un suggerimento, non una garanzia. Se non c'è un altro punto ragionevole in cui interrompere la pagina, il browser potrebbe comunque inserire un'interruzione.

Valori

I valori left e right sono destinati alla stampa fronte-retro, dove si desidera che il contenuto inizi su un lato specifico del foglio.

Supporto browser e avvertenze

• Tutti i principali browser supportano auto, always e avoid. Il supporto per left e right è meno consistente tra browser e renderer PDF.
• La proprietà viene ignorata sugli elementi inline e sugli elementi posizionati in modo assoluto o fisso. Utilizza elementi a livello di blocco come <div>, <section>, <h1>–<h6> o <p>.
• Impostare page-break-before: always su ogni elemento di un elenco o tabella può produrre molte pagine brevi. Usalo selettivamente sui confini logici delle sezioni.
• page-break-before su un elemento figlio viene applicata al box a livello di blocco più vicino che genera — non al contenitore padre.

Suggerimento: abbina le altre proprietà page-break

page-break-before è una delle tre proprietà legacy per il layout di stampa. Usale insieme per un controllo completo:

• page-break-after — controlla le interruzioni dopo un elemento.
• page-break-inside — impedisce che un elemento (una tabella, una figura o un blocco di codice) venga diviso su due pagine.

Per il codice moderno, migra alle proprietà di frammentazione equivalenti:

• break-before — sostituisce page-break-before.
• break-after — sostituisce page-break-after.
• break-inside — sostituisce page-break-inside.

Consulta la guida @media print per suggerimenti sulla creazione di un foglio di stile di stampa completo, e le proprietà orphans e widows per controllare quante righe di un paragrafo vengono lasciate su una pagina prima o dopo un'interruzione.

Esercizio