Nonostante l’era digitale, la stampa delle pagine web rimane un’esigenza concreta: fatture, report, articoli, ricevute, curriculum e molti altri contenuti vengono regolarmente stampati dagli utenti. Senza un foglio di stile dedicato alla stampa, il risultato è spesso deludente: navigazione e sidebar che sprecano carta, colori illeggibili, testo tagliato e link che perdono il loro contesto. HTML e CSS offrono strumenti specifici per creare esperienze di stampa ottimizzate e professionali.
Fogli di Stile per la Stampa: Le Basi
Esistono due modi principali per applicare CSS specifico per la stampa. Il primo è un foglio di stile dedicato, collegato con l’attributo media="print":
<link rel="stylesheet" href="/css/print.css" media="print">Il secondo metodo utilizza la regola @media print all’interno del foglio di stile principale:
@media print {
/* Regole CSS specifiche per la stampa */
.no-print { display: none; }
body { font-size: 12pt; }
}L’approccio con il file separato ha il vantaggio di non aumentare il peso del CSS principale e di mantenere il codice organizzato. Il browser scarica il file print.css con bassa priorità, senza impattare le performance di caricamento. Il metodo inline con @media print è più pratico per piccole modifiche e garantisce che le regole di stampa siano sempre sincronizzate con quelle dello schermo.
Quando il browser prepara una pagina per la stampa (sia tramite Ctrl+P che tramite la funzione “Stampa” del browser), applica prima tutti i CSS senza media query specifiche e quelli con media="all", poi sovrappone le regole media="print". Le regole media="screen" vengono ignorate durante la stampa.
Nascondere Elementi Non Necessari
La prima operazione in un foglio di stile per la stampa è nascondere tutto ciò che non serve su carta: navigazione, sidebar, pubblicità, pulsanti interattivi, video incorporati, form di ricerca, footer con link social e widget JavaScript. Questi elementi occupano spazio prezioso e non hanno senso in un documento stampato.
@media print {
/* Nascondere elementi non necessari */
nav, .sidebar, .ads, .social-share,
.comments, .related-posts, .search-form,
footer, .cookie-banner, .chat-widget,
video, iframe, .no-print {
display: none !important;
}
/* Mostrare contenuto principale a larghezza piena */
main, article, .content {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
}In alternativa all’approccio “nascondi ciò che non serve”, si può adottare la strategia inversa: nascondere tutto e mostrare solo il contenuto principale. Questo approccio è più robusto per siti complessi dove è facile dimenticare qualche elemento. Si aggiunge la classe printable solo agli elementi che devono apparire nella versione stampata.
Gestione dei Page Break
Il CSS offre proprietà specifiche per controllare dove il browser inserisce le interruzioni di pagina durante la stampa. Queste proprietà sono fondamentali per evitare che titoli finiscano in fondo a una pagina separati dal loro contenuto, che tabelle vengano tagliate in punti inopportuni o che immagini vengano divise tra due pagine.
@media print {
/* Evitare interruzioni dopo i titoli */
h1, h2, h3, h4, h5, h6 {
break-after: avoid;
page-break-after: avoid; /* fallback per browser datati */
}
/* Evitare interruzioni dentro immagini, tabelle e code block */
img, table, pre, blockquote, figure {
break-inside: avoid;
page-break-inside: avoid;
}
/* Forzare una nuova pagina prima delle sezioni principali */
.chapter, .new-section {
break-before: page;
page-break-before: always;
}
/* Almeno 3 righe dopo un titolo prima dell'interruzione */
h2, h3 {
orphans: 3;
widows: 3;
}
}Le proprietà orphans e widows controllano rispettivamente il numero minimo di righe di un paragrafo che devono rimanere in fondo a una pagina e in cima alla pagina successiva. Impostare entrambi a 3 evita che singole righe isolate appaiano da sole in fondo o in cima a una pagina, un difetto tipografico noto come “riga vedova” o “riga orfana”.
Rendere Visibili gli URL dei Link
Uno dei problemi principali della stampa di pagine web è che i link perdono il loro contesto: su carta non si può cliccare, quindi l’utente non sa dove puntano i link. La soluzione classica è mostrare l’URL dopo il testo del link utilizzando il pseudo-elemento ::after e la funzione CSS attr():
@media print {
a[href]::after {
content: " (" attr(href) ")";
font-size: 0.8em;
color: #666;
word-break: break-all;
}
/* Non mostrare URL per link interni e ancore */
a[href^="#"]::after,
a[href^="javascript"]::after,
a[href^="mailto"]::after {
content: "";
}
/* Non mostrare URL per link con URL molto lunghi */
a[href*="utm_"]::after {
content: "";
}
}Questa tecnica mostra l’URL completo tra parentesi dopo il testo di ogni link. I filtri escludono le ancore interne, i link JavaScript, i link mailto e gli URL con parametri di tracking che sarebbero inutilmente lunghi. Per siti con molti link, è possibile invece raccogliere tutti gli URL in una sezione “Note” alla fine della pagina stampata utilizzando i CSS Counter.
La Regola @page e Margini di Stampa
La regola CSS @page permette di controllare le proprietà della pagina fisica, inclusi margini, dimensioni e orientamento:
@media print {
@page {
margin: 2cm;
size: A4 portrait;
}
@page :first {
margin-top: 4cm; /* Margine superiore maggiore per la prima pagina */
}
/* Contenuto specifico per header e footer della pagina */
@page {
@top-center {
content: "Nome Documento";
}
@bottom-right {
content: counter(page) " / " counter(pages);
}
}
}La proprietà size accetta valori come A4, letter, A3, con l’orientamento portrait o landscape. I margini della pagina possono essere diversi per la prima pagina (:first), le pagine sinistre (:left) e le pagine destre (:right), utile per documenti destinati alla rilegatura. Il supporto dei browser per le regole @page avanzate (come @top-center e @bottom-right) è ancora limitato, ma la configurazione base con margini e dimensioni funziona in tutti i browser moderni.
Colori, Tipografia e Testing
Per la stampa, la tipografia e i colori richiedono considerazioni specifiche. I font dimensionati in pt (punti tipografici) sono più appropriati per la stampa rispetto a px o em, poiché il punto è un’unità di misura nata per la stampa. Una dimensione di 12pt per il corpo del testo e 10pt per le note è generalmente ottimale. I colori di sfondo non vengono stampati per impostazione predefinita dalla maggior parte dei browser per risparmiare inchiostro. Per forzare la stampa degli sfondi, si può usare la proprietà print-color-adjust: exact.
@media print {
body {
font-size: 12pt;
line-height: 1.4;
color: #000;
background: #fff;
}
/* Forzare stampa sfondi dove necessario */
.badge, .highlight {
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
}Per testare il layout di stampa senza sprecare carta, Chrome DevTools offre la possibilità di emulare la media query print: aprite DevTools, premete Ctrl+Shift+P, digitate “Rendering” e nel pannello Rendering impostate “Emulate CSS media type” su “print”. Questo mostra l’anteprima di stampa direttamente nel browser. Firefox offre una funzionalità simile nel suo Responsive Design Mode. Per approfondire le tecniche di ottimizzazione delle immagini anche in contesti di stampa, consultate il nostro articolo dedicato.
Hai bisogno di aiuto con l’ottimizzazione dei layout di stampa per il tuo sito? G Tech Group offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.