13 Media a pagine

Sommario

13.1 Introduzione ai media a pagine

I media a pagine (per esempio carta, diapositive, pagine che sono visualizzate sugli schermi di computer, ecc.) differiscono dai media continui in quanto il contenuto del documento è diviso in una o più pagine distinte. Per gestire le interruzioni di pagina, i CSS2 estendono il modello di formattazione visuale come segue:

  1. Il riquadrato di pagina estende il modello per riquadrati per consentire agli autori di specificare le dimensioni di una pagina, i suoi margini, ecc.
  2. Il modello di pagina estende il modello di formattazione visuale per tenere conto delle interruzioni di pagina.

Il modello di pagina dei CSS2 specifica come un documento è formattato all'interno di un'area rettangolare -- il riquadrato di pagina -- che ha una larghezza ed un'altezza finite. Il riquadrato di pagina non corrisponde necessraimente al foglio reale su cui il documento sarà infine reso (carta, diapositiva, schermo, ecc.). Il modello di pagina CSS specifica la formattazione nel riquadrato di pagina, ma è compito del programma utente trasferire il riquadrato di pagina sul foglio. Alcune possibilità di trasferimento includono:

Sebbene i CSS2 non specifichino come i programmi utente trasferiscano i riquadrati di pagina sui fogli, nodimeno essi includono alcuni meccanismi per istruire i programmi utente sulle dimensioni e l'orientamento del foglio di destinazione.

13.2 Riquadrati di pagina: la regola @page

Il riquadrato di pagina è una regione rettangolare che contiene due aree:

Nota. Nei CSS2, le proprietà del bordo e le proprietà del cuscinetto non si applicano alle pagine; questo potrà accadere in futuro.

Gli autori specificano le dimensioni, l'orientamento, i margini, ecc. di un riquadrato di pagina all'interno di una regola @page. Una regola @page consiste della parola chiave "@page", un selettore di pagina (seguita senza intervento di spazio da una pseudo-classe opzionale di pagina), e di un blocco di dichiarazioni (che si dicono trovarsi nel contesto di pagina).

Il selettore di pagina specifica per quali pagine si applicano le dichiarazioni. Nei CSS2, i selettori di pagina possono designare la prima pagina, tutte le pagine sinistre, destre, o una pagina con un nome specifico.

Le dimensioni del riquadrato di pagina sono impostate tramite la proprietà 'size'. Le dimensioni dell'area di pagina sono uguali alle dimensioni del riquadrato di pagina meno l'area di margine.

Esempi(o):

Per esempio, la seguente regola @page imposta la dimensione del riquadrato di pagina su 8.5 x 11 pollici [inches] e crea '2cm' di margine su tutti i lati fra il limite del riquadrato di pagina e l'area di pagina:

@page { size 8.5in 11in; margin: 2cm }
La proprietà 'marks' in una regola @page specifica gli indicatori di taglio [crop marks, indicano dove la pagina va tagliata] e a croce [cross marks, ossia le crocette stampate per evidenziare l'allineamento] per il riquadrato di pagina.

13.2.1 Margini di pagina

Le proprietà dei margini ('margin-top', 'margin-right', 'margin-bottom', 'margin-left', e 'margin') si applicano all'interno del contesto di pagina. Il seguente diagramma mostra le relazioni fra il foglio, il riquadrato di pagina e i margini di pagina:

Illustrazione di foglio, riquadrato di
pagina, margine e area di pagina.   [D]

Il valore calcolato dei margini del riquadrato sulla parte superiore o inferiore dell'area di pagina è '0'.

Il contesto di pagina non ha nozione dei font, così le unità 'em' e 'ex' non sono consentite. I valori percentuali sulle proprietà dei margini sono relativi alle dimensioni del riquadrato di pagina; per i margini destro e sinistro, si riferiscono alla larghezza del riquadrato di pagina, mentre per i margini superiore e inferiore si riferiscono all'altezza del riquadrato di pagina. Tutte le altre unità associate con le rispettive proprietà CSS2 sono consentite.

A causa dei valori negativi per i margini (sia sul riquadrato di pagina che sugli elementi) o del posizionamento assoluto, il contenuto può finire fuori del riquadrato di pagina, ma questo contenuto può essere "tagliato" -- dal programma utente, dalla stampante, o per ultimo dal tagliacarta.

13.2.2 Dimensioni di pagina: la proprietà 'size'

'size'
Valore:  <length>{1,2} | auto | portrait | landscape | inherit
Iniziale:  auto
Si applica a:  contesto di pagina
Ereditata:  N/A
Percentuali:  N/A
Media:  visuale, a pagine

Questa proprietà specifica le dimensioni e l'orientamento di un riquadrato di pagina.

Le dimensioni di un riquadrato di pagina possono sia essere "assolute" (dimensioni fisse) che "relative" (scalabile, ossia che si adatta alle dimensioni disponibili del foglio). I riquadrati di pagina relativi consentono ai programmi utente di scalare un documento e di ottimizzarlo per le dimensioni di destinazione.

Tre valori per la proprietà 'size' creano un relativo riquadrato di pagina:

auto
Il riquadrato di pagina verrà impostato sulle dimensioni e l'orientamento del foglio di destinazione.
landscape
Sovrascrive l'orientamento della destinazione. Il riquadrato di pagina ha le stesse dimensioni della destinazione, e i lati più lunghi sono orizzontali.
portrait
Sovrascrive l'orientamento della destinazione. Il riquadrato di pagina ha le stesse dimensioni della destinazione, e i lati più corti sono orizzontali.

Esempi(o):

Nel seguente esempio, i limiti esterni del riquadrato di pagina si allineeranno con la destinazione. Il valore percentuale per la proprietà 'margin' è relativo alle dimensioni della destinazione, così se le dimensioni del foglio di destinazione sono 21.0cm x 29.7cm (ossia un foglio A4), i margini sono 2.10cm e 2.97cm.

@page {
  size: auto;   /* auto is the initial value */
  margin: 10%;
}

I valori di lunghezza per la proprietà 'size' creano un riquadrato di pagina assoluto. Se viene specificata solo una lunghezza, questa imposta al contempo la larghezza e l'altezza del riquadrato di pagina (ossia il riquadrato è un quadrato). Poichè il riquadrato di pagina è il blocco contenitore iniziale, i valori percentuali non sono ammessi per la proprietà 'size'.

Esempi(o):

Per esempio:

@page {
  size: 8.5in 11in;  /* width height */
}

L'esempio di sopra imposta la larghezza di un riquadrato di pagina su 8.5in e l'altezza su 11in. Il riquadrato di pagina di questo esempio richiede un foglio di destinazione di dimensioni 8.5"x11" o superiori.

I programmi utente possono consentire agli utenti di controllare il trasferimento del riquadrato di pagina sul foglio (per esempio ruotando un riquadrato di pagina assoluto prima della stampa).

Riprodurre riquadrati di pagina che non sono della misura del foglio di destinazione

Se un riquadrato di pagina non si adatta alle dimensioni del foglio di destinazione, il programma utente può scegliere di:

Il programma utente dovrebbe consultare l'utente prima di eseguire queste operazioni.

Posizionare il riquadrato di pagina sul foglio

Quando il riquadrato di pagina è più piccolo delle dimensioni della destinazione, il programma utente è libero di posizionare il riquadrato di pagina ovunque sul foglio. Tuttavia, si raccomanda che il riquadrato di pagina sia centrato sul foglio, poichè questo allineerà pagine da stampare due lati e eviterà accidentali perdite di informazioni se queste sono stampate vicino al limite del foglio.

13.2.3 Indicatori di taglio: la proprietà 'marks'

'marks'
Valore:  [ crop || cross ] | none | inherit
Iniziale:  none
Si applica a:  contesto di pagina
Ereditata:  N/A
Percentuali:  N/A
Media:  visuale, a pagine

Nella stampa ad alta qualità, gli indicatori sono spesso aggiunti fuori del riquadrato di pagina. Questa proprietà specifica se gli indicatori a croce, di taglio o entrambi debbano essere resi appena fuori del limite del riquadrato di pagina.

Gli indicatori di taglio indicano dove la pagina dovrebbe essere tagliata. Gli indicatori a croce (conosciuti anche come indicatori di registro o di registrazione) sono usati per allineare i fogli.

Gli indicatori sono visibili solo su riquadrati di pagina assoluti (si veda la proprietà 'size'). Nei riquadrati di pagina relativi, il riquadrato di pagina sarà allineato con la destinazione e gli indicatori si troveranno fuori dall'area stampabile.

Le dimensioni, lo stile e la posizione degli indicatori a croce dipendono dal programma utente.

13.2.4 Pagina sinistra, pagina destra e prima pagina

Quando si stampano documenti su due lati, i riquadrati di pagina sulle pagine destra e sinistra dovrebbero essere differenti. Ciò può essere espresso attraverso due pseudo-classi CSS che possono essere definite nel contesto di pagina.

Tutte le pagine sono automaticamente classificate dai programmi utente nelle pseudo-classi :left o :right

Esempi(o):

@page :left {
  margin-left: 4cm;
  margin-right: 3cm;
}

@page :right {
  margin-left: 3cm;
  margin-right: 4cm;
}

Se si sono date differenti dichiarazioni per le pagine di destra e di sinistra, il programma utente deve rispettare queste dichiarazioni anche se non trasferisce i riquadrati di pagina sui fogli destro e sinistro (per esempio, una stampante che stampa solo da un lato).

Gli autori possono anche specificare uno stile per la prima pagina di un documento con la pseudo-classe :first:

Esempi(o):

@page { margin: 2cm } /* All margins set to 2cm */

@page :first {
  margin-top: 10cm    /* Top margin on first page 10cm */
}

Se la prima pagina di un documento sia :left o :right dipende dalla direzione principale di scrittura del documento ed è fuori dell'ambito di questo documento. Tuttavia, per forzare una prima pagina su :left o :right, gli autori possono inserire un'interruzione di pagina prima del primo riquadrato generato (per esempio, in HTML, si specifichi questo per l'elemento BODY).

Le proprietà specificate in una regola @page :left (o :right) sovrascrivono quelle specificate in una regola @page che non ha nessuna delle pseudo-classi specificate. Le proprietà specificate in una regola @page :first sovrascrivono quelle specificate nelle regole @page :left (o :right).

Nota. Aggiungere dichiarazioni alle pseudo-classi :left o :right non influenza il fatto che il documento esca da una stampante che stampa su un solo lato o su entrambi (questo è al di fuori dell'ambito di queste specifiche).

Nota. Future versioni dei CSS potrano includere altre pseudo-classi di pagina.

13.2.5 Contenuto esterno al riquadrato di pagina

Quando si formatta il contenuto nel modello di pagina, una parte di esso può finire fuori dal riquadrato di pagina. Per esempio, un elemento la cui proprietà 'white-space' ha il valore 'pre' può generare un riquadrato che è più ampio del riquadrato di pagina. Allo stesso modo, quando i riquadrati sono posizionati in modo assoluto, possono finire in posizioni "sconvenienti". Per esempio, le immagini possono essere posizionate sul limite del riquadrato di pagina o 100,000 pollici [inches] sotto il riquadrato di pagina.

Specificare l'esatta formattazione di tali elementi è al di là dell'ambito di questo documento. Tuttavia, raccomandiamo che gli autori e i programmi utente osservino i seguenti princìpi generali che riguardano il contenuto esterno al riquadrato di pagina:

13.3 Interruzioni di pagina

Le sezioni che seguono espongono la formattazione della pagina nei CSS2. Cinque proprietà indicano dove il programma utente può o dovrebbe interrompere le pagine, e su quale pagina (sinistra o destra) il successivo contenuto dovrebbe riprendere. Ogni interruzione di pagina termina l'impaginazione nel riquadrato di pagina corrente e fa in modo che le rimanenti parti dell'albero del documento vengano rappresentate in un nuovo riquadrato di pagina.

13.3.1 Interruzioni prima/dopo di elementi: 'page-break-before', 'page-break-after', 'page-break-inside'

'page-break-before'
Valore:  auto | always | avoid | left | right | inherit
Iniziale:  auto
Si applica a:  elementi a livello di blocco
Ereditata:  no
Percentuali:  N/A
Media:  visuale, a pagine
'page-break-after'
Valore:  auto | always | avoid | left | right | inherit
Iniziale:  auto
Si applica a:  elementi a livello di blocco
Ereditata:  no
Percentuali:  N/A
Media:  visuale, a pagine
'page-break-inside'
Valore:  avoid | auto | inherit
Iniziale:  auto
Si applica a:  elementi a livello di blocco
Ereditata:  si
Percentuali:  N/A
Media:  visuale, a pagine

I valori per queste proprietà hanno i seguenti significati:

auto
Non forza nè impedisce un'interruzione di pagina prima (dopo, dentro) del riquadrato generato.
always
Forza sempre un'interruzione di pagina prima (dopo) del riquadrato generato.
avoid
Evita un'interruzione di pagina prima (dopo, dentro) del riquadrato generato.
left
Forza una o due interruzioni di pagina prima (dopo) del riquadrato generato, in modo che la pagina successiva venga formattata come una pagina sinistra.
right
Forza una o due interruzioni di pagina prima (dopo) del riquadrato generato in modo che la pagina successiva venga formattata come una pagina destra.

Una potenziale collocazione per un'interruzione di pagina si ha di solito sotto l'influenza della proprietà 'page-break-inside' dell'elemento genitore, della proprietà 'page-break-after' dell'elemento precedente, e della proprietà 'page-break-before' dell'elemento che segue. Quando queste proprietà hanno un valore diverso da 'auto', i valori 'always', 'left', e 'right' hanno al precedenza su 'avoid'. Si veda la sezione sulle interruzioni di pagina consentite per le regole esatte con cui queste proprietà possono forzare o sopprimere un'interruzione di pagina.

13.3.2 Utilizzare pagine denominate: 'page'

'page'
Valore:  <identifier> | auto
Iniziale:  auto
Si applica a:  elementi a livello di blocco
Ereditata:  si
Percentuali:  N/A
Media:  visuale, a pagine

La proprietà 'page' può essere usata per specificare un particolare tipo di pagina dove un elemento dovrebbe essere visualizzato.

Esempi(o):

Questo esempio collocherà tutte le tabelle sul lato destro di una pagina di dimensione panoramica (denominata "rotated"):

@page rotated {size: landscape}
TABLE {page: rotated; page-break-before: right}

La proprietà 'page' funziona nel modo seguente: se un riquadrato a blocco con contenuto in riga ha una proprietà 'page' differente dal precedente riquadrato a blocco con contenuto in riga, allora una o due interruzioni di pagina sono inserite fra di loro, e i riquadrati dopo l'interruzione sono resi su un riquadrato di pagina del tipo nominato. Si veda "Interruzioni di pagina forzate" sotto.

Esempi(o):

In questo esempio, le due tabelle sono rese su pagine a dimensione panoramica (oppure sulla stessa pagina, se vi entrano), e la pagina di tipo "narrow" non è affatto usata, nonostante fosse stata impostata sul DIV:

@page narrow {size: 9cm 18cm}
@page rotated {size: landscape}
DIV {page: narrow}
TABLE {page: rotated}
con questo documento:
<DIV>
<TABLE>...</TABLE>
<TABLE>...</TABLE>
</DIV>

13.3.3 Interruzioni all'interno di elementi: 'orphans', 'widows'

'orphans'
Valore:  <integer> | inherit
Iniziale:  2
Si applica a:  elementi a livello di blocco
Ereditata:  si
Percentuali:  N/A
Media:  visuale, a pagine
'widows'
Valore:  <integer> | inherit
Iniziale:  2
Si applica a:  elementi a livello di blocco
Ereditata:  si
Percentuali:  N/A
Media:  visuale, a pagine

La proprietà 'orphans' specifica il numero minimo di righe di un paragrafo che deve essere lasciato sul fondo della pagina. La proprietà 'widows' specifica il numero minimo di righe di un paragrafo che deve essere lasciato nella parte superiore della pagina. Esempi di come vengano usate per controllare le interruzioni di pagina sono dati di seguito.

Per informazioni sulla formattazione dei paragrafi, si prega di consultare la sezione sui riquadrati di riga.

13.3.4 Interruzioni di pagina consentite

Nel flusso normale, le interruzioni di pagina possono ricorrere nelle seguenti posizioni:

  1. Nel margine verticale fra riquadrati a blocco. Quando un'interruzione di pagina vi ricorre, i valori calcolati delle proprietà rilevanti 'margin-top' e 'margin-bottom' sono impostati a '0'.
  2. Fra riquadrati di riga all'interno di un riquadrato a blocco.

Queste interruzioni sono soggette alle seguenti regole:

Se le regole di cui sopra non forniscono sufficienti punti di interruzione per impedire al contenuto di eccedere dai riquadrati di pagina, allora le regole B e D vengono abbandonate per trovare punti di interruzione aggiuntivi.

Se non si è ancora giunti a punti di interruzione sufficienti, anche le regole A e C vengono abbandonate per trovare ulteriori punti di interruzione.

Le interruzioni di pagina non possono ricorrere all'interno di riquadrati che sono posizionati in modo assoluto.

13.3.5 Interruzioni di pagina forzate

Un'interruzione di pagina deve ricorrere (1) se, fra le proprietà 'page-break-after' e 'page-break-before' di tutti gli elementi generanti riquadrati che si incontrano su questo margine, ce n'è almeno una con valore 'always', 'left', o 'right'.

Un'interruzione di pagina deve ricorrere (1) anche se l'ultimo riquadrato di riga sopra questo margine e il primo sotto ad esso non hanno lo stesso valore per 'page'.

13.3.6 Le "migliori" interruzioni di pagina

I CSS2 non definiscono quale insieme di interruzioni di pagina consentite deve essere usato; i CSS2 non rpoibiscono ad un programma utente di interrompere ad ogni possibile punto di interruzione, o di non interrompere affatto. Ma i CSS2 raccomandano che i programmi utente osservino la seguente euristica (riconoscendo che a volte è contraddittoria):

Esempi(o):

Si supponga, ad esempio, che il foglio di stile contenga 'orphans : 4', 'widows : 2', e che ci siano 20 righe (riquadrati di riga) disponibili nella parte inferiore della pagina corrente:

Ora si supponga che 'orphans' sia '10', 'widows' sia '20', e che vi siano 8 righe disponibili nella parte inferiore della pagina corrente:

13.4 L'ordine di cascata nel contesto di pagina

Le dichiarazioni nel contesto di pagina obbediscono alla cascata proprio come le normali dichiarazioni CSS2.

Esempi(o):

Si consideri il seguente esempio:

@page {
  margin-left: 3cm;
}

@page :left {
  margin-left: 4cm;
}

Grazie alla più alta specificità del selettore pseudo-classe, il margine sinistro sulle pagine sinistre sarà '4cm' e su tutte le altre (ossia le pagine destre) avrà un margine sinistro di '3cm'.