Media=”print”, non dimenticare i fogli di stile per la stampa

daniele — Thu, 05 Jun 2008 18:01:26 +0000

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 :

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 , 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/

Fogli di stile per la stampa

daniele — Thu, 13 Mar 2008 09:17:43 +0000

photo credit: Hanataro

CSS per la stampa: un aspetto troppo spesso trascurato dai webdesigner, ma di fondamentale importanza.
Su Csstricks troviamo un semplice Css che imposta gli aspetti fondamentali per il layout del nostro sito una volta stampato.
La priorità fondamentale per l’autore è rendere il documento leggibile, il più possibile. Per questo cerca di utilizzare tutto lo spazio a disposizione sulla pagina impostando un font serif e la largezza del contenitore principale a 100% ed escludendo dalla stampa gli elementi secondari rispetto al contenuto della pagina, come sidebar header e footer.

Poche regole precise, quelle elencate: il css in questione infatti si affida agli stili di default del browser. Nel caso della stampa questa fiducia è ben riposta, spiega csstricks, ma a patto che il markup dell’html sia corretto.

Link: CSS-Tricks Finally Gets A Print Stylesheet

daniele rollo » print

Media=”print”, non dimenticare i fogli di stile per la stampa

Fogli di stile per la stampa