La stampa su carta

Abbiamo visto come definire i vari styli e questi sono interpretati dal browser che li esegue a video, è anche possibile personalizzare un foglio di style specifico per la sola stampa in modo da avere margini, font, interruzioni pagina, nascondere parti che non devono essere stampate ed altro ancora.

Per farlo è sufficiente creare un secondo foglio di style al quale assegnare come attributo del parametro media print al posto di screen

Così facendo i due fogli di style (screen e print) saranno autonomi e ben distinti fra di loro, Se non vogliamo creare un foglio di style a parte per la sola stampa è possibile definire i parametri anche all’interno dello stesso foglio facendo uso della regola @media che permette di raggruppare e suddividere le varie definizioni a seconda del media al quale si riferiscono.

@media screen {
body {	margin-left: .5cm;
	margin-right: .5cm;
	color: #000099;
	font-family: Verdana, Arial, sans-serif;
	font-size: 10pt;
	}
}

@media print{
body {	margin-left: 2px;
	margin-right: 2px;
	color: #000000;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12pt;
	}
}

Così facendo avremo parametri differenti a seconda che lo stesso documento sia visto a schermo o stampato su carta, ne consegue che ognuno di potrà fare tutte le personalizzazioni che desidera, tenuto conto anche del fatto che potrà scegliere cosa vedere e cosa stampare semplicemente assegnando ai blocchi interessati una classe, un ID, o ridefinendo il blocco nel quale sarà stato impostato display: none; tanto per fare un esempio.

Anche in questo caso ci sono differenze fra browser e browser ed alcuni non gestiscono allo stesso modo la stampa di blocchi posizionati in modo assoluto, pazienza, con qualche prova riuscirete ad ottenere stampe più che accettabili.

Personalmente preferisco avere due fogli esterni ben distinti come riportato nell’esempio sotto

sui quali andare di volta in volta ad intervenire, questo però dipende solo dalla propria organizzazione mentale ed ognuno usi il metodo che ritiene più comodo.

Trattandosi di stampe si ha a che fare con il salto pagina o interruzione di stampa, per evitare di spezzare il documento a fine pagina in una parte di testo importante, è possibile decidere quando attivare una interruzione di stampa grazie alle proprietà: page-break-before e page-break-after(prima e dopo) che accettano valori quali: always, avoid, left, right e auto.

Alcuni non sono supportati da tutti i browser, altri sono di scarso utilizzo, alla fine quelli che vengono realmente adoperati sono soltanto i primi due: always e avoid rispettivamente per inviare una interruzione di pagina o per impedire una interruzione di pagina al blocco al quale vengono applicati.

div.inizio {page-break-before: always;}
div.fine {page-break-after: always;}

Con questo esempio il browser inserisce un’interruzione di pagina prima del blocco <div class=”inizio”> ed una dopo il blocco <div class=”fine”>

Continua: Conclusioni

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.