Sommario
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:
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.
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.
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 }
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:
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.
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:
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'.
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).
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.
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.
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.
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
@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:
@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.
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:
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.
| 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 |
| 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 |
| 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:
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.
| 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.
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.
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>
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.
Nel flusso normale, le interruzioni di pagina possono ricorrere nelle seguenti posizioni:
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.
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'.
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):
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:
Le dichiarazioni nel contesto di pagina obbediscono alla cascata proprio come le normali dichiarazioni CSS2.
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'.