Css e stampa

Quando faccio un sito vorrei anche che – allo stesso modo in cui si vede a schermo come voglio io – venga stampato in maniera decente.

Spesso capita che la stampa non corrisponda, allora credo sia meglio usare un foglio di stile per la visualizzazione a monitor…

<link rel='stylesheet' href='css-per-il-monitor.css' type='text/css' media='screen' />

… ed uno per la stampa …

<link rel='stylesheet' href='css-per-la-stampante.css' type='text/css' media='print' />

Gli accorgimenti che uso io di solito sono:

nascondere gli elementi che non mi interessa vedere in una stampa – come i menu, i widget, il footer, i banner, ecc. – e fare in modo che le immagini non vengano tagliate in due, venendo stampate a cavallo di 2 pagine/fogli diversi.

Per la prima cosa basta usare un display:none affibbiato agli ID e Classi che vogliamo.
Per la seconda invece basta usare il page-break:

img {
page-break-before: auto;
page-break-after: auto;
page-break-inside: avoid;
}

Il page-break è una “interruzione di pagina”, quindi le prime 2 righe delle 3 precedenti ordinano di interrompere la pagina primo o dopo un’immagine; la terza ordina di non farlo in mezzo all’immagine.

fonti: http://web.archive.org/web/20150822085608/http://www.w3schools.com/css/css_mediatypes.asp , http://www.w3schools.com/cssref/pr_print_pagebb.asp , http://stackoverflow.com/questions/2649169/print-styles-how-to-ensure-image-doesnt-span-a-page-break
approfondimento: http://teamtreehouse.com/library/websites/css-foundations/printing

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

You can add images to your comment by clicking here.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.