CSS  »  Articoli  »  CSS fonts stampa e tipografia 

Questa è la traduzione dell'articolo Back To The Future of Print di Natalie Downe pubblicato originariamente su 24 Ways il 9 dicembre 2007.

Da un pezzo abbiamo superato la vechia fase del web development, quella in cui usavamo tabelle, CSS inline e pagine separate per le versioni printer-friendly di un articolo. Su quelle pratiche possiamo oggi riflettere come su una cosa lontana. Non abbiamo più bisogno di lottare per convincere che i fogli di stile per la stampa sono la via da seguire, sebbene taluni aspetti di questa tecnica non siano del tutto chiari e forse un po' datati.

In questo articolo illustrerò 8 trucchetti e 4 consigli per prevenire problemi da usare quando si crea un CSS per la stampa.

Le basi

Come avviene per i normali fogli di stile, i CSS per la stampa possono essere inclusi in diversi modi. Nel nostro caso useremo l'elemento link:

Si tratta del mio metodo preferito per inserire file CSS in una pagina perché è facile vedere quali file vengono inclusi e a quale tipo di media sono applicati. Se specificate l'attributo media l'elemento link usa di default il media type all: significa che gli stili definiti al suo interno saranno applicati a schermo e in fase di stampa. Il media type screen sarà invece usato nella visualizzazione su schermo e non sarà utilizzato quando si stampa. È questo il miglior metodo per nascondere stili dalla stampa.

Assicuratevi di includere il vostro foglio di stile per la stampa dopo tutti gli altri CSS, perché avrete bisogno di sovrascrivere certe regole.

Un'altra cosa a cui pensare in anticipo è questa: "è necessario stampare questa cosa?". Considerate insomma il contesto, se non è una pagina che potrebbe essere utile stampare, come una landing page o l'indice di una sezione, allora il CSS per la stampa dovrebbe essere molto simile al modo in cui la pgina appare a schermo.

Il contesto è davvero importante nella progettazione di un foglio di stile per la stampa. Tutte le tecniche di cui parleremo dovrebbero essere considerate nel contesto della pagina. Se per esempio state progettando un CSS per la stampa relativo ad un item presente in un carrello sella spesa, è irrilevante per l'utente sapere l'URL esatto del link che porta al processo di checkout.

Trucchetti

Nel corso dell'esposizione andremo a realizzare un foglio di stile per la stampa per questo semplice esempio.

1. Rimuovere ciò che non è necessario

Prima le cose più importanti (passo 1). La navigazione, gli header e tutte le parti accessorie della pagina sono pressoché inutili su un foglio di carta. Saranno così da rimuovere usando la proprietà display:none;.

2. Linearizzare il contenuto

Il contenuto suddiviso su colonne non funziona così bene quando passa sulla carta, specialmente se le colonne che ospitano il contenuto sono lunghe. Dobbiamo così prendere in considerazione l'idea di linearizzare il contenuto (passo 2) perché scorra bene nel contesto della pagina. Se avrete la cura di definire con la giusta priorità l'ordine delle sezioni nel codice sarà molto più facile.

Altri articoli

Altre guide

Altre newsletter