CSS media print per la stampa

Qualche considerazione sulla carta Già ti sento esclamare… ma nel 2012 ancora parli di stampa e @media print? Posso in […]
CSS media print per la stampa

Qualche considerazione sulla carta

Già ti sento esclamare… ma nel 2012 ancora parli di stampa e @media print? Posso in parte darti ragione, Il web e il digitale dominano ormai incontrastati nello scenario moderno, ma c’è chi ancora, come me, che crede che un buon CSS dedicato alla stampa possa rendere migliore la navigazione di un utente, che per svariati e differenti motivi deve assolutamente stampare un articolo trovato su un sito web. Io stesso maledico quando devo stamparmi un testo da web, e nell’anteprima di stampa mi viene mostrato, il menu, la sidebar, le pubblicità, i colori, le icone, il footer con elementi flottanti annessi e connessi e quant’altro possa dar fastidio e rendere difficoltosa una successiva lettura su carta.

Basta veramente poco per realizzarlo; vediamo insieme tutti gli aspetti da considerare per ottenere un buon risultato.

3 metodi per associare un foglio di stile specifico

Ci sono sostanzialmente 3 metodi per associare un foglio di stile per un media specifico.

Primo Metodo

Il primo tramite la regola @import ma internet Explorer 6 non la interpreta correttamente, ignorandola del tutto:

@import "print.css" print;

Secondo Metodo

Il secondo metodo, tramite la sintassi @media, consente all’interno di un unico CSS di raggruppare le regole in base al tipo di media, e non sono altro che la versione “primordiale” dei MediaQueries CSS3. Segue un piccolo esempio:

body{  /*Per tutti i tipi di media*/
    margin:0;
    padding:0
}

@media screen{  /*Regola dedicata alla visualizzazione su monitor*/
    body{
        margin:10px;
        padding:10px;
    }
}

@media print{  /*Regola dedicata alla visualizzazione su carta*/
    body{
        margin:10px;
        padding:10px;
    }
}

Terzo Metodo

Il terzo e ultimo metodo, quello che risulta essere il più efficace è quello di linkare differenti CSS nell’head della pagina, differenziandoli tramite l’attributo media del tag link o style, ed ecco un esempio:

<link rel="stylesheets" type="text/css" href="print.css" media="print" />
<!-- OPPURE -->
<style type="text/css" media="print">
    /* Regole CSS dedicate alla stampa */
</style>

Come strutturare un foglio di stile per la stampa

Le regole da tenere da conto non sono tantissime e ne difficili da ricordare. Vediamo nel concreto cosa ho realizzato per il blog; resta sottointeso che i nomi degli elementi sui quali andrò ad agire saranno sicuramente differenti ma questo dipenderà unicamente dal vostro markup.

La base del nostro Foglio

Per prima cosa assicurati di impostare testo nero su sfondo bianco. Non badare a fronzoli inutili come la grafica o i colori. La maggior parte degli utenti stamperà in bianco e nero ma soprattutto vorrà consumare la minor quantità di inchiostro possibile. Per sicurezza utilizza !important per overraidare successive regole. Inoltre abbandonate l’utilizzo dei pixel (unità di misura d’eccellenza per il @media screen ma non per la stampa, dove regnano incontrastati i punti e il valore 12 risulterà ottimale per la lettura dei testi, cosi come l’utilizzo di font serif agevolerà la lettura su carta; affidiamoci quindi al buon vecchio Times New Roman per ottenere un risultato coi fiocchi.

body {
    background: white!important;
    font-size: 12pt!important;
    color: black!important;
    font-family: “Times New Roman”, Times, serif!important;
}

I link

Ora che la base è ok, passiamo ai link; anche in questo caso rigorosamente di colore nero, se volete in grassetto e sottolineati per differenziarli dal normale testo. Per dare un senso alla presenza di link (che su carta per ovvi motivi non sono cliccabili :)), possiamo affiacare loro, tra parentesi, il percorso di destinazione attraverso la pseudo-classe :after illustrata in questo articolo.

#content_box a:link, #content_box a:visited {
    background: none repeat scroll 0 0 transparent;
    color: black;
    font-weight: bold;
    text-decoration: underline;
}
#content_box a[href^="/"]:after {
    content: " (http://www.laboratoriocss.it" attr(href) ") ";
    font-size: 70%;
}

Nascondiamo tutto! …o quasi.

Cerca di individuare la parte che reputi sia la più importante. Nel caso di LaboratorioCSS, la parte piu importante (di una pagina di dettaglio) è proprio l’articolo stesso. Senza altri indugi, tramite la regola “display:none;” rendi invisibili tutti quegli elementi di contorno al contenuto che credi sia quello principale della pagina in oggetto. Tra i piu importanti, la navigazione, l’header, la sidebar, il footer, i commenti; per le immagini invece è doveroso fare una considerazione sulla loro natura. Credo sia giusto farle stampare solo se apportano un reale beneficio alla lettura; in questo, l’unica immagine che ho deciso di eliminare è quella di testata in quanto serv solo a decorare e nulla di più!

#nav, #header, #sidebar-border, #footer, .read-more, .post-edit-link, .gotocomments, .wp-pagenavi, #demo_download, #sdac_related_posts, .wp-about-author-containter-around, #comments-div, #respond, #sharebar, #sharebarx, #addcomment, .post-info-category, .alignnone.size-full {
	display:none!important;
}

Cosa resta?

Per tutti gli elementi rimanenti ricorda di azzerare i margini e padding, di togliere evenutuali posizionamenti assoluti, immagini di sfondo e float e infine di impostare la larghezza degli elementi su auto cosi che occupino tutta la larghezza a loro disposizione.

#content, .post, #content div, .syntaxhighlighter .no-wrap .line .content {
    background: none repeat scroll 0 0 transparent;
    float: none !important;
    padding: 0;
    margin:0;
    width: auto;
    position:static!important;
    white-space: normal !important;
}
/*Con queste regole rendo di colore nero
le linee di codice stampate tramite il plugin Syntaxhighlighter*/
.post .syntaxhighlighter .keyword, .post .syntaxhighlighter .value, .post .entry code{color:black!important;}

Il Page-break

Il page-break, ovvero l’interruzione di pagina, è una regola CSS che ti consente di inserire un interruzione di pagina prima o dopo del selettore specificato. E’ uno strumento molto preciso ma anche molto pericoloso se usato male, potresti trovarti con intere pagine vuote. A questo link è presente la documentazione ufficiale. Come possiamo leggere, le proprietà conivolte sono 3 (page-break-after / page-break-before / page-break-inside) ma solo le prime due sono supportate, mentre la terza è supportata solo dal browser Opera.

Conclusioni

Come già ti ho detto all’inizio ogni sito o blog ha i suoi riferimenti ed elementi da dover nascondere od eliminare. Questo che ti ho illustrato riguarda il mio blog, ma i ragionamenti che stanno alla base sono applicabili a qualsiasi sito web. Rendere più accessibile un sito web significa anche renderlo fruibile sui diversi media, compreso il @media print.

Se invece vuoi renderti la vita più facile puoi anche affidarti a qualche tool online che faccia il lavoro sporco. Ho trovato questo servizio che credo possa fare al caso tuo, provalo, ha delle interessanti funzionalità! Puoi utilizzarlo direttamente online oppure inserire il pulsante sulla pagina web che intendi rendere accessibile per la stampa.

Ti ricordo che puoi trovarci e discutere di tutto ciò che vuoi anche sulla nostra fan page ufficiale!

Un saluto e alla prossima.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github