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 consapevole del fatto che i documenti stampati possono essere abbinati allo 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 antiquato come:

Intestazione

Usiamo markup semantico:

Intestazione

Non solo è molto più pulito, ma significa anche che la nostra presentazione è separata dal nostro contenuto. I browser eseguono il rendering h1 elementi 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: normale; }

Raccogliendo quelle 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:

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

Ciò significa che il foglio di stile verrà applicato a qualsiasi supporto in cui viene eseguito il rendering del documento. Tuttavia, l'attributo media può anche assumere valori di print e screen:

In questo esempio, il print.css il foglio di stile 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 supporti e la formattazione specifica del supporto in singoli fogli di stile. Ancora una volta, questo è un altro uso della separazione delle preoccupazioni.

Alcuni esempi di dichiarazioni di stile

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 {
sfondo: bianco;
colore nero;
}

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

* {
immagine di sfondo: nessuna! importante;
}

Relazionato: Come impostare un'immagine di sfondo in CSS

Come impostare un'immagine di sfondo in CSS

CSS è un potente strumento per lo styling delle pagine web. Imparare a posizionare un'immagine di sfondo ti insegna molte nozioni di base sui 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.

Ad esempio, nella finestra di dialogo di stampa di Chrome, è presente un'impostazione del margine che include valori che includono nessuna 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. Il @pagina regola consente di impostare i margini e deve essere utilizzata come segue:

@pagina {
margine: 2 cm;
}

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, questo è scarsamente supportato, specialmente l'opzione della copertina, ma può essere utilizzato 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:

@pagina {
margine sinistro: 20 mm;
margine destro: 20 mm;
margine superiore: 40 mm;
margine inferiore: 50 mm;
}
@page: left {
margine sinistro: 30 mm;
}
@page: right {
margine destro: 30 mm;
}

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; colore: eredita; }

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 {
contenuto: "(" attr (href) ")";
dimensione del carattere: 90%;
colore: # 333;
}

Questo CSS fornisce risultati come i seguenti:

a [href]: dopo prende di mira specificamente la posizione dopo (:dopo) ogni elemento di collegamento (un) che ha effettivamente un URL ([href]). Il soddisfare la dichiarazione qui inserisce il valore di href attributo 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, utilizza le proprietà di interruzione di pagina: interruzione di pagina prima, interruzione di pagina dopo e page-break-inside. Per esempio:

tabella {page-break-inside: evitare; }

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: sempre; }

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 mira a quella specifica istanza, ad esempio:

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

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 dal Strumenti di sviluppo opzione:

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

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

Quando si emula il foglio di stile di stampa, il file standard Browser degli stili è disponibile 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 della carta e il file @pagina la regola 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.

Stampa una varietà di documenti

Puoi utilizzare un foglio di stile di stampa per creare documenti di qualità, incluso 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.

Come stampare pagine Web in PDF con Microsoft Edge

Ti sei mai imbattuto in un articolo interessante che volevi salvare per dopo? Bene, puoi salvare come PDF con Edge in tre semplici passaggi.

Circa l'autore