Utilizzo di CSS per formattare i documenti per la stampa

Se hai mai stampato le prenotazioni di biglietti o le indicazioni stradali per un hotel dal web, probabilmente sei rimasto meno che impressionato dai risultati. Pertanto, potresti non essere a conoscenza del fatto che i documenti stampati possono essere stilizzati più o meno nello stesso modo in cui possono essere visualizzati sullo schermo, utilizzando Cascading Style Sheets (CSS).

Separazione degli interessi

Un vantaggio chiave dei CSS è la separazione del contenuto dalla presentazione. In termini più semplici, questo significa invece di un markup stilistico molto vecchio stile come:

<font size="7"><b>Heading</b></font>

Usiamo markup semantico:

<h1>Heading</h1>

Non solo è molto più pulito, ma significa anche che la nostra presentazione è separata dal nostro contenuto. I browser visualizzano gli elementi h1 come testo grande e in grassetto per impostazione predefinita, ma possiamo cambiare lo stile in qualsiasi momento con un foglio di stile:

h1 { font-weight: normal; }

Raccogliendo queste dichiarazioni di stile in un file separato e facendo riferimento a quel file dal nostro documento HTML, possiamo fare un uso ancora migliore della separazione. Il foglio di stile può essere riutilizzato e possiamo modificare quel singolo file in qualsiasi momento per aggiornare la formattazione in ogni documento che lo utilizza.

Compreso un foglio di stile di stampa

In modo simile all’inclusione di un foglio di stile dello schermo, possiamo specificare un foglio di stile per la stampa. Un foglio di stile dello schermo è tipicamente incluso in questo modo:

<link href="base.css" rel="stylesheet" />

Tuttavia, un attributo aggiuntivo, media , consente il targeting in base al contesto in cui viene visualizzato il documento. Per impostazione predefinita, l’elemento precedente è equivalente a:

<link href="base.css" rel="stylesheet" media="all" />

Ciò significa che il foglio di stile verrà applicato per qualsiasi supporto in cui viene visualizzato il documento. Tuttavia, l’attributo media può anche assumere valori di stampa e schermo:

<link href="print.css" rel="stylesheet" media="print" />

In questo esempio, il foglio di stile print.css verrà utilizzato solo quando il documento viene stampato. Questo è un meccanismo molto utile. Possiamo raccogliere tutti gli stili comuni (forse la famiglia di caratteri o l’interlinea) in un foglio di stile che si applica a tutti i media e la formattazione specifica del supporto in singoli fogli di stile. Ancora una volta, questo è un altro uso della separazione delle preoccupazioni.

Alcune dichiarazioni di stile di esempio

Uno sfondo pulito

Quasi certamente non vuoi sprecare inchiostro stampando uno sfondo colorato o un’immagine di sfondo. Inizia ripristinando le impostazioni predefinite per questi valori che potrebbero essere stati impostati nel tuo documento:

body {
 background: white;
 color: black;
 }

Potresti anche voler impedire la stampa di immagini di sfondo, che dovrebbero essere decorative e, quindi, non una parte obbligatoria del tuo contenuto:

* {
 background-image: none !important;
 }

Correlato: Come impostare un’immagine di sfondo in CSS

Margini di controllo

Un altro punto ovvio da considerare per quanto riguarda la stampa è il margine della pagina. Sebbene i CSS forniscano un mezzo per impostare la dimensione dei margini, è necessario tenere presente che il browser e la stampante possono anche influenzare le impostazioni dei margini stessi.

Ad esempio, nella finestra di dialogo di stampa di Chrome, è presente un’impostazione del margine che ha valori che includono nessuno e personalizzato che sovrascriverà qualsiasi cosa specificata tramite CSS:

Per questo motivo, si consiglia di lasciare le decisioni sui margini al lettore sulle pagine web pubbliche. Tuttavia, per uso personale o per creare un layout predefinito, potrebbe essere appropriato impostare i margini di stampa tramite CSS. La regola @page consente di impostare i margini e deve essere utilizzata come segue:

@page {
 margin: 2cm;
 }

CSS ha anche la capacità di layout di stampa più sofisticati, come variare il margine a seconda che la pagina sia dispari (a destra), pari (a sinistra) o la copertina.

Sfortunatamente, questa opzione è scarsamente supportata, specialmente l’opzione della copertina, ma può essere utilizzata in misura minima. I seguenti stili producono pagine con margini inferiori leggermente più grandi rispetto a quelli superiori e margini leggermente più grandi sul bordo esterno della pagina rispetto al dorso:

@page {
 margin-left: 20mm;
 margin-right: 20mm;
 margin-top: 40mm;
 margin-bottom: 50mm;
 }
 @page :left {
 margin-left: 30mm;
 }
 @page :right {
 margin-right: 30mm;
 }

Nascondere contenuti irrilevanti

Non tutto il contenuto sarà adatto per una versione stampata del documento. Se la tua pagina include banner di navigazione, pubblicità o una barra laterale, potresti voler impedire che tali dettagli vengano visualizzati nella versione stampata, ad esempio:

#contents, div.ad { display: none; }

I collegamenti ipertestuali non sono ovviamente rilevanti nel materiale stampato, quindi probabilmente vorrai rimuovere tutti gli stili che li differenziano dal testo circostante:

a { text-decoration: none; color: inherit; }

Tuttavia, potresti comunque desiderare che i lettori abbiano accesso agli URL originali e una soluzione semplice è inserirli automaticamente dopo il testo collegato:

a[href]:after {
 content: " (" attr(href) ")";
 font-size: 90%;
 color: #333;
 }

Questo CSS fornisce risultati come i seguenti:

a [href]: after mira specificatamente alla posizione dopo ( : after ) ogni elemento di collegamento ( a ) che ha effettivamente un URL ( [href] ). La dichiarazione del contenuto qui inserisce il valore dell’attributo href tra parentesi. Notare che è possibile applicare altre regole di stile per controllare la visualizzazione del contenuto generato.

Gestione delle interruzioni di pagina

Per evitare che le interruzioni di pagina lascino il contenuto isolato o lo spezzino goffamente nel mezzo, usa le proprietà di interruzione di pagina : page-break-before , page-break-after e page-break-inside . Per esempio:

table { page-break-inside: avoid; }

Ciò dovrebbe aiutare a evitare che le tabelle si estendano su più pagine, a condizione che nessuna sia più alta di una singola pagina. Allo stesso modo:

h1, h2 { page-break-before: always; }

Ciò significa che tali titoli iniziano sempre una nuova pagina. Tuttavia, potrebbe causare problemi se segui immediatamente h1 della tua pagina con un h2, poiché h1 finirà su una pagina da solo. Per evitare ciò, è sufficiente annullare l’interruzione di pagina utilizzando un selettore che ha come target quella specifica istanza, ad esempio:

h1 + h2 { page-break-before: avoid; }

Visualizzazione degli stili di stampa

In tutti i casi, il browser e il sistema operativo dovrebbero fornire una funzione di anteprima di stampa, spesso come parte della finestra di dialogo di stampa standard.

Il browser Chrome rende più comodo controllare e persino eseguire il debug degli stili di stampa tramite Strumenti per sviluppatori, come dimostrato da questo esempio che mostra un CV con un foglio di stile di stampa. Innanzitutto, apri il menu principale e seleziona Altri strumenti seguito dall’opzione Strumenti per sviluppatori :

Dal nuovo pannello che appare, seleziona Menu , poi Altri strumenti , seguito da Rendering :

Quindi scorri verso il basso fino all’impostazione Emula tipo di supporto CSS . Il menu a discesa ti consente di alternare tra la visualizzazione di stampa e quella dello schermo del tuo documento:

Quando si emula il foglio di stile di stampa, è disponibile il browser degli stili standard per ispezionare e modificare le regole dello stile live. Tieni presente che l’emulazione dell’output di stampa su uno schermo non è ancora accurata al 100%. Il browser non sa nulla del formato carta e la regola @page non può essere emulata.

Stampa su un PDF

Una caratteristica utile dei sistemi operativi moderni è la possibilità di stampare su un file PDF. In effetti, tutto ciò che puoi stampare può, invece, essere inviato a un file PDF – nessuna vera sorpresa dal momento che un file PDF dovrebbe rappresentare un documento stampato, dopotutto.

Ciò rende HTML, in combinazione con un foglio di stile di stampa, un mezzo eccellente per creare un documento di alta qualità che può essere inviato come allegato, oltre che stampato.

Puoi utilizzare un foglio di stile di stampa per creare documenti di qualità, compreso qualsiasi cosa, dal tuo CV alle ricette o agli annunci di eventi. Le pagine Web in genere hanno un aspetto brutto e contengono dettagli indesiderati quando vengono stampate, ma un numero limitato di modifiche allo stile può migliorare notevolmente i risultati di stampa. Salvare i risultati finali come PDF è un modo rapido per creare documenti attraenti e professionali.