CSS: Come progettare un foglio di stile per la stampa di pagine web

In questa mini guida andremo a vedere come sia facile realizzare un foglio di stile che entri in azione solamente quando un utente decide di stampare una pagina web, modificandola e rendendola pronta per la stampa.

Download

L’obiettivo principale da porsi quando si vuole progettare un foglio di stile per la stampa è la semplificazione del layout del sito, tramite una scrematura di elementi superflui, dando completamente spazio al contenuto,come testi, evantuali immagini riferite utili al lettore e magari un logo o un riferimento per ricordare al lettore da dove ha stampato la pagina.

Gli elementi superflui sono tutti quegli elementi nella pagina web che diventano inutili nell passaggio dal web alla stampa, come menu, banner pubblicitari, barre di navigazione, form, footer etc, a meno che non abbiano un preciso scopo informativo e di utilità anche sul cartaceo.

Inizia la guida:

Step 1: incorporazione del foglio di stile

Quando vogliamo creare un foglio di stile per la stampa è d’obbligo creare un nuovo file, per esempio print.css, e inserirlo nella directory del sito.

Per richiamare questo nuovo foglio di stile sarà sufficiente aprire la pagina web e inserire tra i tag head il link con collegamento al file print.css, è importante inserire nel tag link l’attributo media=”print”, questo permetterà di riconoscere e attivare print.css solo quando il lettore decide di stampare la paigna web.

<head>
...
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> /* Foglio di stile principale */
<link rel="stylesheet" href="print.css" type="text/css" media="print" /> /* Foglio per la stampa */
...
</head>

Step 2: Determinare ed eliminare i contenuti inutili

Un passaggio fondamentale da fare quando vogliamo realizzare un foglio di stile per la stampa di una pagina web è pianificare e identificare quali sono gli elementi del documento che non sono utili alla lettura su carta e di conseguenza eliminarli.

Esempio

in un post di un blog, per esempio, gli elementi che non servono, a meno di casi particolari, potrebbero essere Header, Sidebar e Footer con i loro relativi menu, form e campi di ricerca, blocchi ADS, iconeetc, mentre gli elementi importanti sono sicuramente il titolo del post, il contenuto, le immagini e in alcuni casi anche i commenti.

Terminata la pianificazione possiamo ora aprire il file print.css e cominciare a scrivere il codice CSS per togliere gli elementi sopra citati dalla pagina di stampa tramite la proprietà display:none, quindi:

#header, #sidebar, #footer,#comment-form  {display:none;}

Step 3: Riformattare gli elementi

A questo punto abbiamo cancellato quello che non serviva, ora dobbiamo ridimensionare e riposizionare gli elementi rimasti:

Ridimensionare i contenuti

Per prima cosa ridimensioniamo il contenuto del post rendendolo a piena pagina e assegnando un piccolo margine dai quattro bordi esterni:

#contenuto { width:100%; margin10px; padding:0; float:none; }

Immagini

Come e dove posizionare le immaigni rimane un aspetto molto soggettivo ma comunque da affrontare anche per la versione della stampa, non esistono particolare regole o istruzioni a cui attenersi, dipende tutto dalle vostre esigenze.

Specificare il font

A meno che non vogliate usare il font standard assegnato dal browser alla pagina web può essere utile ridefinire il font con il quale volete vengano stampati i testi.

body {font-size: 1em; line-hieght:1.2em; font-family: Georgia, serif;  color:#000;}

Evidenziare i link

Segnalare nel testo quali sono i link, anche quelli visitati e indicarne affianco l’url può essere una buona informazione per il lettore

 
a:link, a:visited {color: #781351}
 
#content a[href^="/"]:after {
  content: " (http://www.fmdesignblog.com" attr(href) ") ";
   }

Resettare i colori di sfondo:

Per evitare che colori o immagini che non si desiderano vengano stampati interferendo con la lettura del post può essere utile riformattare il colore di sfondo del body e quello del div #contenuto.

body {background-color:#fff;} #contenuto { background-color: transparent; }

Step 4: Aggiungere prorpietà utli alla lettura

Adesso possiamo aggiungere alcuni Pseudo elementi o Pseudo classi per abbellire i testi e dargli un valore aggiunto, in particolare potremo usare:

#content:nth-of-type(1) { font-size:2em; font-weight:bold;}

Demo

Info sull' autore:
Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di

5 Risposte per CSS: Come progettare un foglio di stile per la stampa di pagine web

  1. Rocco Passaro 11 aprile 2011 at 09:26 | Permalink | Reply

    Bell’articolo :D bravo.

  2. Nicola 15 giugno 2011 at 16:54 | Permalink | Reply

    Ciao, come si può risolvere il problema delle immagini che vengono tagliate tra una pagina e l’altra???
    Grazie in anticipo.

    • Francesco 15 giugno 2011 at 20:11 | Permalink | Reply

      Ciao Nicola grazie per aver segnalato il tuo problema, questo è un aspetto importante che mi sono dimenticato di inserire nell’articolo.

      Per risolvere questo problema prova ad aggiunegere al foglio di stile print.css queste proprietà al selettore img

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

      Questo dovrebbe evitare qualsiasi taglio delle immagini, fammi sapere se funziona.
      Ciao

  3. Nicola 17 giugno 2011 at 12:17 | Permalink | Reply

    Ciao Francesco, grazie per la risposta!
    Avevo provato solo con il page-break-inside:avoid ora va bene per la stampa!
    Inoltre ho scoperto che per la generazione di un .pdf non funziona lato css…si risolve modificando le opzioni della dll che genera il pdf.
    Ciao

    • Francesco 17 giugno 2011 at 14:36 | Permalink | Reply

      Bene, mi fa piacere che funzioni, ciao Nicola.
      Alla prossima

Lascia un commento

Trackbacks