Questo post di Massimiliano Sforza su Edit, ci ricorda che, per quanto i contenuti testuali che produciamo per il nostro sito o blog, siano pensati progettati e creati per una vita sullo schermo, è sempre probabile che finiscano per essere stampati.
Per questo motivo è necessario predisporre il nostro sito in modo che sia leggibile anche su carta.
Ecco allora come specificare un foglio di stile per la stampa all’interno del tag <HEAD>:
<link rel="stylesheet" type="text/css"media="print" href="print.css" />
All’interno di del file PRINT.CSS basterà specificare alcune semplici regole.
Innanzitutto rendiamo invisibili quegli elementi che fuori dallo schermo non hanno una funzione, come per esempio un menu o addirittura l’intera sidebar o l’header:
#header, #menu, #sidebar { display: none;}
Poi impostiamo il tag <BODY>, specificando sfondo della pagina, colore del testo, dimensione e tipo di font da utilizzare:
body{
background: white;
font-family: Georgia, serif;
font-size: 12pt;
color: black;}
Quindi passiamo a dimensioni e margini degli elementi che contengono il testo: ammesso che quest’ultimo si trovi all’interno del div “content”, a sua volta inserito dentro ad un div “container”, una soluzione può essere quella di impostare il padding per il primo e la larghezza per il secondo:
#container {#width: 100%;}
#content {#padding: 10px;}
Infine, qualcosa che tornerà decisamente utile agli utenti che stanno leggendo il nostro sito su carta, sperando che abbiano stampato usando un browser degno di questo nome. Impostiamo il foglio di stile in modo che gli indirizzi a cui puntano i link (i quali evidentemente non potranno essere cliccati…) compaiano per esteso tra parentesi quadre dopo che è stato riportato il link stesso:
a:link:after, a:visited:after {content:" [" attr(href) "] "; }
Ed ecco questo elementare foglio di stile per intero:
body{
background: white;
font-family: Georgia, serif;
font-size: 12pt;
color: black;}
#container {#width: 100%;}
#content {#padding: 10px;}
a:link:after, a:visited:after {content:" [" attr(href) "] "; }
Evidentemente, queste poche regole potranno essere completate con altre legate ad aspetti specifici del nostro html, e saranno inoltre integrate in maniera decisiva dal markup utilizzato per i contenuti. In particolare non dovremo (ancora una volta) trascurare i tag H1, H2 o H3, ecc., che anche se non specificati nel CSS, avranno l’aspetto che il browser assegna loro di default, e contribuiranno a rendere leggibile e piacevole la nostra pagina.
Come al solito, se non siete d’accordo su qualcosa, o avete suggerimenti, vi aspetto nei commenti…
Qualche link utile:
http://davidwalsh.name/optimize-your-links-for-print-using-css-show-url
http://www.alistapart.com/stories/goingtoprint/
http://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/
photo credit: