Come dare uno stile al tuo sito web per la stampa con CSS
Pubblicato: 2015-08-28Cosa c'entra la stampa con il web?
La maggior parte di noi vive online, ricevendo tutte le informazioni dal web. Siamo connessi tutto il giorno, tutti i giorni, da molti dispositivi. Potresti aver sentito che la stampa è morta quando, in realtà, non è certamente vero! Potremmo non stampare con la stessa frequenza di una volta, ma ci sono situazioni in cui la visualizzazione di contenuti su un dispositivo non sostituisce semplicemente una copia cartacea da guardare. Disponi di preziosi contenuti pratici, coupon riscattabili, indicazioni stradali, esempi di portfolio o qualsiasi altra cosa che gli utenti preferirebbero vedere stampata? In tal caso, l'impostazione di regole di stampa personalizzate sul tuo sito Web aiuterà sicuramente a plasmare l'esperienza per i tuoi utenti.
Come progettare per la stampa
Tutta la magia è contenuta all'interno dei CSS definendo stili specifici per la stampa. Potresti trovare utile creare un foglio di stile print.css separato in modo che sia separato da tutti gli altri stili. Tieni presente che non tutti i siti hanno un foglio di stile di stampa; questa è una funzionalità aggiuntiva e un passaggio nel processo di sviluppo. Se non vengono specificati stili di stampa, per la stampa vengono utilizzati gli stili predefiniti. Definiremo gli stili per rendere le cose più efficienti per la stampa, che annulleranno tutte le impostazioni predefinite.
La convenzione di denominazione e gli stili specifici saranno unici per il foglio di stile del tuo progetto, ma si applicheranno questi concetti. Dopo aver aggiunto le basi, esamina il foglio di stile predefinito del tuo sito Web e cerca tutte le situazioni uniche che richiedono stili di stampa per garantire la migliore esperienza di stampa.
Considerazioni su colore e layout
La maggior parte delle persone preferisce stampare in bianco e nero a causa del costo dell'inchiostro colorato. Inoltre, c'è un contrasto maggiore quando il testo è nero e stampato su carta bianca. Probabilmente hai familiarità con le query multimediali, poiché sono fondamentali nel web design moderno e reattivo. Le media query sono necessarie anche per creare stili di stampa.
Questo è ciò che renderà nero il testo nel corpo ed eliminerà qualsiasi colore di sfondo per una stampa ottimale:
@media print { body { color: #000; background: #fff; } }È probabile che il testo venga stampato su Times New Roman. Non c'è niente di sbagliato in questo, ma cosa succede se si desidera specificare un carattere diverso? Proprio come hai fatto con i tuoi stili predefiniti, questo può essere fatto anche in stampa. Già che ci siamo, non dimentichiamo l'altezza della linea.
body { font: 13pt Tahoma, Geneva, sans-serif; line-height: 1.5; }Nascondere gli elementi non necessari
Probabilmente sei stato condizionato a mantenere il
display: noneal minimo, ma questo è del tutto ok per i tuoi stili di stampa. Nascondendo alcuni elementi, stai offrendo ai tuoi utenti un modo migliore per stampare e mantenere tutto ciò che non è necessario dalla copia cartacea. L'obiettivo è consentire loro di stampare in modo efficace il contenuto più importante, non la pagina Web esatta.Ci sono elementi della pagina che non sono necessari, come navigazione, piè di pagina, barra laterale e immagini di sfondo, quindi è qui che il nostro
display: nonetornerà utile.@media print { nav, aside, footer { display: none; } section { background: none } /* section had a patterned background in the default styling which is best removed in the print style */ }Gli articoli vengono spesso stampati, quindi è fantastico che ogni articolo inizi su una pagina separata. È molto più facile per l'utente organizzare le proprie stampe se le informazioni chiave sono raggruppate e non distribuite su più pagine.
Aggiungendo questo al tuo foglio di stile di stampa, gli articoli inizieranno sempre su una nuova pagina:
article { page-break-before: always; }Anche tenere insieme gli elenchi non ordinati sulla stessa pagina è un'ottima idea:
ul { page-break-inside: avoid; }Facciamo un ulteriore passo avanti e facciamo lo stesso per intestazioni, immagini, virgolette, tabelle e altri elementi dell'elenco:
h1, h2, h3, h4, h5, h6 { page-break-after:avoid; page-break-inside:avoid } img { page-break-inside:avoid; page-break-after:avoid; } blockquote, table, pre { page-break-inside:avoid } ul, ol, dl { page-break-before:avoid } [/code] </pre> <img class="aligncenter wp-image-12547 size-full" src="https://getflywheel.com/wp-content/uploads/2015/08/print-styling-03.jpg" alt="print-styling-03" width="1022" height="480" /> <pre> <h3>Page margin measurements</h3> We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing. body, article { width: 100%; margin: 0; padding: 0; }Qui è dove la spaziatura può davvero essere ottimizzata per le stampe. Non capita spesso di vedere centimetri nel web design, ma funziona benissimo allo scopo di determinare i bordi della pagina. La regola
@pageè il modo in cui indirizzeremo la spaziatura. Questo esempio consentirà 2 cm attorno a tutti i bordi. Questa misura può essere personalizzata per consentire più o meno spazio. Ad esempio, i tuoi utenti potrebbero voler prendere appunti e consentire un margine più ampio sarebbe utile.
@page { margin: 2cm; }Se le pagine devono essere stampate e inserite in un raccoglitore, tieni presente che esiste la possibilità di regolare i margini per ogni altra pagina. La pagina a sinistra è per le pagine 1, 3, 5... e la pagina a destra è per le pagine 2, 4, 6...
@page :left { margin: 1cm 3cm 1cm 2cm; } @page :right { margin: 1cm 2cm 2cm 3cm; }La personalizzazione della prima pagina è utile in alcuni casi. Utilizzando la pseudo-classe
:firstpage, è possibile determinare lo stile della prima pagina stampata:@page :first { margin: 1cm 2cm; }
La stampa ti stressa? Ecco alcuni suggerimenti per stampare il tuo progetto come un professionista. Idee per immagini e testo introduttivo
Questi possono essere applicati o meno al tuo sito, ma è comunque bene tenerne conto.
Per evitare che le immagini vengano tagliate e sanguinanti oltre il bordo della pagina stampata, l'aggiunta di una dichiarazione di larghezza massima impedirà ciò.
img { max-width: 100% !important; }Un bel messaggio di benvenuto è un'ottima aggiunta. Il contenuto della stampa sarà disponibile per un po', quindi è sempre bello includere un messaggio o un promemoria amichevole.
header:before { display: block; content: "Thank you for visiting my website at www.mysite.com. Please check back for upcoming specials and new products."; margin-bottom: 15px; padding: 5px 8px; font-style: italic; }Ora che abbiamo trattato alcune delle nozioni di base sulla considerazione della stampa, è facile incorporare queste idee nel foglio di stile di stampa. Sebbene la stampa non sia ciò a cui in definitiva pensiamo quando utilizziamo il Web, è un ottimo modo per offrire ai tuoi utenti la stessa fantastica esperienza, indipendentemente da come accedono ai contenuti.
