Css per la stampa
La stampa di pagine web presenta spesso delle difficoltà. Sovente il web master si preoccupa dell’impaginazione a schermo, magari utilizzando layout liquidi dimenticando che la stampa ha caratteristiche diverse. Come ovviare al problema? Tempo fa era d’uso creare pagine apposite per la stampa, generandole lato server e togliendo gli elementi di navigazione (menu, header e footer, tipicamente).
Lo stesso, e molto di più può esser fatto via CSS: vediamo passo passo come fare:
Nascondere blocchi ed elementi alla stampa.
Studiamo la pagina e segnamoci quali sono i blocchi e gli elementi grafici da nascondere alla stampante. Creiamo un nuovo file css ed impostiamo ad essi la proprietà display:none;
Impostare le dimensioni in misure assolute
Diamo larghezza automatica al blocco da stampare, impostiamo la grandezza dei caratteri possibilmente in punti, 12 potrebbe essere una buona soluzione, ricordiamoci che molti stampano in bianco e nero, quindi se necessario cambiamo i colori ai blocchi.
Prestare attenzione agli elementi flottanti ed agli sfondi
Le stampe son spesso impostate automaticamente, e giustamente, sul non stampare le immagini di sfondo. Se usiamo elementi che vorremmo mostrare con immagini in sottofondo o se usiamo tecniche di image replacement, teniamolo presente e riscriviamo le regole nel css di stampa. Attenzione inoltre agli elementi flottanti o con posizione assoluta che potrebbero dar problemi di posizionamento. Sovrascriviamo tali regole con altre che permettano la loro collocazione nel normale flusso di informazioni
Aggiungere l’url dei link (opz.)
I collegamenti a stampa ovviamente non possono esser seguiti però potrebbe esser necessario indicare dove puntano tali collegamenti. I css permettono di mostrare il contenuto dell’attributo href usando tale codice:
a:link:after {
content: " [" attr(href) "]";
}
che ha però due controindicazioni: alcuni browser la ignorano, e se vi viene in mente IE6 non sbagliate di certo, e soprattutto se l’href è un collegamento relativo sarà stampato in questa forma e non in forma assoluta. Detto più semplicemente se linkate pagine con la forma "/index.html" troverete stampato tale valore. Come ovviare? Beh, non usare collegamenti relativi sarebbe la soluzione ideale oppure usando un trick
a[href=^="/"]:after {
content: " [http://www.sito.com" attr(href) "] ";
}
che sta per: se l’href inizia per / stampa il http://www.sito.com prima del valore dell’attributo.
Collegare il css per la stampa alle pagine
Una volta scritte tutte le regole è necessario associare il file css creato per la stampa alle pagine xHTML:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
attenzione alle altre regole scritte per gli altri media: potreste avere delle sorprese: se associamo un css senza specificare il media o impostandolo a tutti queste regole saranno applicate anche alla stampa. Per non incorrere in rappresentazioni non volute una buona soluzione è associare le regole per il video utilizzando l’@import. Cioè:
<style type="text/css" media="all">@import "generale.css";</style>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Bene. Ora dovreste avere delle pagine perfette per la stampa. Ma i css ci permettono di più: ci danno la possibilità di controllare il flusso di stampa e, volendo, forzare la stampa di un blocco all’inizio della pagina successiva. A tale scopo ci vengono incontro le regole:
page-break-after: auto | always | avoid | left | right | inherit;
page-break-before: auto | always | avoid | left | right | inherit;
page-break-inside: always | auto | inherit;
che forzano o impediscono l’interruzione della stampa nella pagin del blocco considerato, rispettivament dopo (after) prima (before) o dentro (inside).
I valori indicano:
- auto: non forza né impedisce l’interruzione
- always: forza sempre l’interruzione di pagina
- avoid: evita sempre l’interruzione
- left: forza una (o due) interruzione di pagina in modo che la pagina successiva sia stampata come una pagina sinistra
- right: forza una (o due) interruzione di pagina in modo che la pagina successiva sia stampata come una pagina destra
- inherit: eredita la stessa proprietà dal blocco genitore.