CSS Paged Media - Regola @page
Il supporto impaginato differisce dal supporto continuo in quanto il contenuto del documento è suddiviso in una o più pagine separate. I supporti impaginati includono carta, lucidi, pagine visualizzate sugli schermi del computer, ecc.
Lo standard CSS2 introduce alcune funzionalità di controllo dell'impaginazione di base che consentono agli autori di aiutare il browser a capire come stampare al meglio i propri documenti.
Il modello di pagina CSS2 specifica come viene formattato un documento all'interno di un'area rettangolare - il riquadro della pagina - che ha una larghezza e un'altezza finite. Queste caratteristiche si dividono in due gruppi:
- Funzionalità CSS2 che definiscono un particolare layout di pagina.
- Funzionalità CSS2 che controllano l'impaginazione di un documento.
Definizione di pagine: la regola @page
Il CSS2 definisce un "riquadro di pagina", un riquadro di dimensioni finite in cui viene visualizzato il contenuto. Il riquadro di pagina è un'area rettangolare che contiene due aree:
The page area- L'area della pagina include le caselle disposte su quella pagina. I bordi dell'area della pagina fungono da blocco contenitore iniziale per il layout che si verifica tra le interruzioni di pagina.
The margin area - Circonda l'area della pagina.
È possibile specificare le dimensioni, l'orientamento, i margini, ecc. Di un box di pagina all'interno di una regola @page. Le dimensioni del riquadro di pagina vengono impostate con la proprietà 'size'. Le dimensioni dell'area della pagina sono le dimensioni del riquadro della pagina meno l'area del margine.
Ad esempio, la seguente regola @page imposta la dimensione del riquadro della pagina su 8,5 × 11 pollici e crea un margine di '2 cm' su tutti i lati tra il bordo del riquadro della pagina e l'area della pagina -
<style type = "text/css">
<!--
@page { size:8.5in 11in; margin: 2cm }
-->
</style>Puoi utilizzare le proprietà margin, margin-top, margin-bottom, margin-left e margin-right all'interno della regola @page per impostare i margini per la tua pagina.
Infine, il marchi proprietà viene utilizzata all'interno della regola @page per creare indicatori di ritaglio e di registrazione fuori dagli schemi pagina sul foglio di destinazione. Per impostazione predefinita, non vengono stampati segni. È possibile utilizzare una o entrambe le parole chiave ritaglio e croce per creare rispettivamente segni di ritaglio e segni di registrazione sulla pagina di stampa di destinazione.
Impostazione delle dimensioni della pagina
La proprietà size specifica la dimensione e l'orientamento di un riquadro di pagina. Sono disponibili quattro valori che possono essere utilizzati per le dimensioni della pagina:
auto - La casella della pagina verrà impostata sulla dimensione e l'orientamento del foglio di destinazione.
landscape- Ignora l'orientamento del bersaglio. Il riquadro della pagina ha le stesse dimensioni del target ei lati più lunghi sono orizzontali.
portrait- Ignora l'orientamento del bersaglio. Il riquadro della pagina ha le stesse dimensioni del target ei lati più corti sono orizzontali.
length- I valori di lunghezza per la proprietà 'size' creano un riquadro di pagina assoluto. Se viene specificato un solo valore di lunghezza, imposta sia la larghezza che l'altezza del riquadro di pagina. I valori percentuali non sono consentiti per la proprietà 'size'.
Nell'esempio seguente, i bordi esterni del riquadro della pagina si allineeranno con la destinazione. Il valore percentuale sulla proprietà "margine" è relativo alla dimensione di destinazione, quindi se le dimensioni del foglio di destinazione sono 21,0 cm × 29,7 cm (ovvero A4), i margini sono 2,10 cm e 2,97 cm.
<style type = "text/css">
<!--
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
-->
</style>L'esempio seguente imposta la larghezza della casella di pagina su 8,5 pollici e l'altezza su 11 pollici. La casella di pagina in questo esempio richiede una dimensione del foglio di destinazione di 8,5 "× 11" o superiore.
<style type = "text/css">
<!--
@page {
size: 8.5in 11in; /* width height */
}
-->
</style>Dopo aver creato un layout di pagina con nome, è possibile utilizzarlo nel documento aggiungendo la proprietà della pagina a uno stile che viene successivamente applicato a un elemento nel documento. Ad esempio, questo stile esegue il rendering di tutte le tabelle nel documento su pagine orizzontali:
<style type = "text/css">
<!--
@page { size : portrait }
@page rotated { size : landscape }
table { page : rotated }
-->
</style>A causa della regola di cui sopra, durante la stampa, se il browser incontra un elemento <table> nel documento e il layout di pagina corrente è il layout verticale predefinito, inizia una nuova pagina e stampa la tabella su una pagina orizzontale.
Sinistra, Destra e Prime pagine
Quando si stampano documenti fronte-retro, le caselle di pagina sulle pagine sinistra e destra dovrebbero essere diverse. Può essere espresso attraverso due pseudo-classi CSS come segue:
<style type = "text/css">
<!--
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
-->
</style>È possibile specificare lo stile per la prima pagina di un documento con: first pseudo-class -
<style type = "text/css">
<!--
@page { margin: 2cm } /* All margins set to 2cm */
@page :first {
margin-top: 10cm /* Top margin on first page 10cm */
}
-->
</style>Controllo dell'impaginazione
Se non diversamente specificato, le interruzioni di pagina si verificano solo quando il formato della pagina cambia o quando il contenuto supera la casella della pagina corrente. Per forzare o sopprimere le interruzioni di pagina in altro modo, utilizzare le proprietà interruzione di pagina prima, interruzione di pagina dopo e interruzione di pagina all'interno .
Sia le interruzioni di pagina prima che le interruzioni di pagina dopo accettano le parole chiave auto, sempre, evitare, sinistra e destra .
La parola chiave auto è l'impostazione predefinita, consente al browser di generare interruzioni di pagina secondo necessità. La parola chiave forza sempre un'interruzione di pagina prima o dopo l'elemento, mentre evita sopprime un'interruzione di pagina immediatamente prima o dopo l'elemento. Le parole chiave sinistra e destra forzano una o due interruzioni di pagina, in modo che l'elemento venga visualizzato su una pagina sinistra o destra.
L'utilizzo delle proprietà di impaginazione è abbastanza semplice. Supponiamo che il tuo documento abbia intestazioni di livello 1, inizia nuovi capitoli con intestazioni di livello 2 per indicare le sezioni. Vorresti che ogni capitolo inizi su una nuova pagina di destra, ma non vuoi che le intestazioni di sezione vengano suddivise in un'interruzione di pagina dal contenuto successivo. Puoi ottenere ciò utilizzando la seguente regola:
<style type = "text/css">
<!--
h1 { page-break-before : right }
h2 { page-break-after : avoid }
-->
</style>Usa solo i valori auto ed evita con la proprietà di interruzione di pagina . Se preferisci che le tue tabelle non vengano suddivise tra le pagine, se possibile, scrivi la regola:
<style type = "text/css">
<!--
table { page-break-inside : avoid }
-->
</style>Controllo di vedove e orfani
Nel gergo tipografico, gli orfani sono quelle righe di un paragrafo bloccate nella parte inferiore di una pagina a causa di un'interruzione di pagina, mentre le vedove sono quelle righe che rimangono nella parte superiore di una pagina dopo un'interruzione di pagina. In genere, le pagine stampate non sembrano attraenti con singole righe di testo a righe in alto o in basso. La maggior parte delle stampanti tenta di lasciare almeno due o più righe di testo nella parte superiore o inferiore di ogni pagina.
Il orphans specifica il numero minimo di righe di un paragrafo che deve essere lasciato in fondo a una pagina.
Il widows specifica il numero minimo di righe di un paragrafo che deve essere lasciato all'inizio di una pagina.
Ecco l'esempio per creare 4 righe nella parte inferiore e 3 righe nella parte superiore di ogni pagina:
<style type = "text/css">
<!--
@page{orphans:4; widows:2;}
-->
</style>