Salta il menu

[css] Il foglio di stile per la stampa

Notizia del 18/12/2006

In fase di stampa, è escluso lo sfondo e comunque costringere il navigatore a stamparlo non è mai una buona idea; dobbiamo però assicurarci che le pagine rimangano gradevoli da leggere e che l'origine del loro contenuto sia evidente.

A questo fine, la prima cosa da prevedere è un logo della ditta o dell'associazione inserito direttamente nel codice xhtml che, nel caso cozzi con il resto del layout provvederemo a nascondere nel CSS per il video, esattamente come succede in questo esempio.

Il foglio di stile per la stampa va collegato al template esattamente come ho fatto per il foglio di stile per la visualizzazione a video e per entrambi va precisato il fine, quindi inserirò "screen" per quello già presente e "print" per quello che vado a creare:

<head> <title>ACME Ferramenta</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="utensili, attrezzature officina, macchinari tornitore" /> <meta name="description" content="Vasto assortimento di attrezzatura per officina, utensili delle migliori marche e macchinari da tornitore - Aperti anche la domenica" /> <meta name="author" content="rebelia.it" /> <link href="stile.css" rel="stylesheet" type="text/css" media="screen" /> <link href="stile_stampa.css" rel="stylesheet" type="text/css" media="print" /> </head>

Viste le dimensioni del logo usato per il sito, ho deciso di ridurre quello per la stampa e di invertirne i colori per un miglior risultato:

ACME - Ferramenta

Il logo va messo direttamente nell'intestazione del template in questo modo:

<div id="intestazione"> <img src="logo_stampa.gif" alt="ACME - Ferramenta" /> <h1>ACME Ferramenta, attrezzi per lavoro e per hobby</h1> <p>Via dei Gigli, 41 - 00100 Roma</p> </div>

Va poi nascosto nel CSS per il video, nella sezione dedicata all'intestazione, in questo modo (ultima parte del codice riportato):

/***** intestazione *****/ #intestazione { background: url(logo_acme.gif) no-repeat top left; padding-top: 100px; margin-bottom: 20px; text-align: left; } #intestazione h1, #intestazione img { display: none; }

Nota: Il logo inserito in questo modo serve non solo per la stampa della pagina, ma anche per l'identificazione dell'azienda o dell'associazione nel caso il navigatore disabiliti per qualche ragione il CSS.

Il CSS per la stampa viene creato partendo dal CSS per il video: in questo modo è più facile capire quali e quanti sono gli elementi e regolarsi su quali nascondere e quali invece riformattare adeguatamente.

Nella prima parte, modifico solo il colore di sfondo del body e il colore del testo: bianco il primo, nero il secondo. Rimuovo l'allineamento centrato e mantengo inalterati gli altri valori, compatibili con la stampa:

/***** generale *****/ * { border: 0px; margin: 0px; padding: 0px; } body { background: #fff; color: #000; font-family: verdana, arial, helvetica, sans-serif; font-size: 70%; } hr { display: none; }

Mimetizzo i link che su carta sono inutili: imposto lo stesso colore usato per il testo (in questo caso il nero) e tolgo la sottolineatura:

a { background: transparent; color: #000; text-decoration: none; } a:hover { }

Tolgo qualsiasi impostazione di larghezza: la stampante si regolerà automaticamente; rimuovo anche lo sfondo all'intestazione, imposto l'allineamento centrato e rendo visibili tutti gli altri elementi prima nascosti (il titolo e l'immagine), avendo cura di rimpicciolire - in questo caso - il titolo, perché non sia troppo grande rispetto al resto:

/***** esterno *****/ #esterno { } /***** intestazione *****/ #intestazione { text-align: center; } #intestazione h1 { font-size: 100%; }

Nessuna impostazione per il div #corpo e la completa rimozione del menu di navigazione: su carta non servirebbe a nulla!

/***** corpo *****/ #corpo { } /***** menu *****/ #menu { display: none; }

Mantengo e anzi aumento il margin per staccare il contenuto dall'intestazione e aggiungo del padding per staccarlo dal bordo che creo per sopperire alla rimozione di quello precedentemente impostato per il menu; l'allineamento lo mantengo uguale, così come i valori impostati per gli elementi sottostanti e aggiungo solo un po' di margin extra al titolo:

/***** contenuto *****/ #contenuto { margin-top: 20px; padding-top: 10px; text-align: justify; border-top: 3px solid #4c984c; } #contenuto h2 { font-size: 200%; margin-top: 25px; margin-bottom: 25px; } #contenuto p, #contenuto ul, #contenuto ol { margin-bottom: 15px; } #contenuto p { text-indent: 40px; }

Non modifico nulla nella chiusura, tranne il margin che aggiungo per staccarlo dal contenuto; volendo posso rimuovere le classi che non mi servono, ma se non interferiscono col risultato che desidero ottenere, nulla vieta di lasciarle dove stanno:

/***** chiusura *****/ #chiusura { border-top: 3px solid #4c984c; padding-top: 5px; text-align: right; margin-top: 20px; } /***** classi *****/ .chiudifloat { clear: both; }

Per avere un'idea di come sta procedendo la formattazione, è utile visualizzare l'anteprima di stampa sul browser; generalmente il percorso è del tipo File -> Anteprima di stampa o qualcosa di simile a seconda del browser usato:

File - Anteprima di stampa per vedere il risultato di come sarà la pagina stampata

E qui di seguito la pagina che uscirà dalla stampante del nostro visitatore:

La pagina formattata per la stampa

Nota: può darsi che in fase di visualizzazione vi compaiano altri elementi come l'indirizzo della pagina o altro, ma non sono controllabili in alcun modo, perché dipendono dalle impostazioni del browser di chi naviga.

***

Scarica il CSS per la stampa (zip - 1kb)

Scarica il layout completo (zip - 13kb)

Torna a inizio pagina

Commenti

Non ci sono ancora commenti a questa news!

Aggiungi il tuo commento

I campi con * sono obbligatori.

Torna a inizio pagina

Torna a inizio pagina