logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

I fogli di stile per la stampa

Le pagine web, sono spesso pensate e create solamente per essere visualizzate sugli schermi dei nostri computer, siano essi desktop, o portatili e di conseguenza molto spesso, possono risultare inadatte alla stampa. In questa lezione vedremo come, attraverso i CSS, sia possibile impostare l'aspetto di una pagina web, quando viene stampata.

Quando una pagina web viene stampata, quello che interessa al navigatore sono i contenuti, e quindi i vari menu di navigazione, i banner pubblicitari, le gif animate e gli effetti speciali hanno poca importanza. Quando stiamo navigando su un sito utilizzando lo schermo del PC, i menu di navigazione sono molto comodi, quando stampiamo una pagina, questi menu sono completamente inutili. La cosa sorprendente, è che la quasi totalità delle pagine web, così come appaiono su schermo, sono inadatte alla stampa. Perchè avviene questo?

A questo proposito è necessaria una breve introduzione sulle principali differenze fra lo schermo del computer e la stampante. Lo schermo del PC si basa sui pixel, le stampanti si basano sui punti e sui millimetri. Lo schermo è più largo dei fogli usati dalle stampanti. Per qualche strano motivo, però i webmaster trascurano questo piccolo dettaglio, e tutti, dilettanti e professionisti del web, indistintamente spesso dimenticano che le pagine dei propri siti potrebbero essere stampate da qualcuno che è interessato a leggerne i contenuti con maggiore calma e lontano dal video, magari seduto comodamente in poltrona. Spesso, stampando una pagina i contenuti sono tagliati sul lato destro. La causa di questo problema è da attribuirsi principalmente a 2 motivi:

A- La stampa di contenuti inutili

B- La larghezza fissa delle pagine.

Per superare questi limiti, o si realizza un CSS forgiato esclusivamente per la stampante, oppure un altro sistema è quello della creazione di pagine alternative, che sono pagine generalmente prive di banner, menu di navigazione e di tutti quei contenuti i quali non interessa che siano stampati. Se il sito è dinamico e i contenuti sono gestiti tramite database, è sufficiente creare una sola pagina che estragga i contenuti e li impagini in maniera opportuna, e utilizzando un comando Javascript per far partire la stampa. Però si deve ricordare che se il sito non si appoggia su un database, creare pagine alternative diventa troppo oneroso.

A questo tipo di soluzione è preferibile scegliere quindi la realizzazione di un CSS creato per la stampante. Precedentemente abbiamo già accennato alla possibilità di realizzare un CSS appositamente pensato per la stampante. Questo foglio di stile conterrà tutte le istruzioni che permettono di controllare il comportamento della stampante. Come abbiamo già visto nella lezione sui CSS, dedicata all'attributo media, per associare un foglio di stile specifico alla stampante basta utilizzare il seguente codice:

 <head>
   <link rel=" stylesheet"   type="text/css"
    media="screen"   href="mio_css.css" />

   <link rel=" stylesheet"   type="text/css"
    media="print"   href="stampante.css" />
 </head>

Come potete vedere, in questo esempio, nel codice della pagina Xhtml sono riportati due fogli di stile: il primo:

<link rel="s..." type="text/css"  media="screen"  href="mio_css.css" />

è associato allo schermo del computer, (screen)

il secondo invece:

<link rel="s.." type="text/css"  media="print"  href="stampante.css" />

è associato alla stampa (print) e indica al browser che al momento di stampare esso dovrà fare riferimento al foglio di stile specificato (stampante.css).

Vediamo ora come realizzare il codice CSS per ottenere una pagina comodamente stampabile. La larghezza della pagina non è più un problema, se non specifichiamo nulla il testo occuperà tutta l’area stampabile. In linea di massima è dunque preferibile impostare il margine nullo per il tag <body>, lasciando alle impostazioni del browser, definite dall’utente, il compito di stabilire i margini dell’area da stampare. Per quanto riguarda le stampanti, i modelli con inchiostro a colori sono ormai molto diffusi ma ancora molto numerose sono le stampanti in bianco e nero, soprattutto per quanto riguarda le stampanti laser.

Inoltre molti utenti preferiscono stampare in bianco e nero a causa degli elevati costi delle cartucce a colori. Lo schema cromatico della pagina dovrebbe dunque basarsi sui toni di grigio ben contrastanti, unica eccezione i link. La pagina stampata non può essere ulteriormente navigata, ma indicare al lettore che ci sono altre pagine per approfondire l’argomento è comunque utile. Per facilitare l’individuazione dei link è possibile usare un colore diverso, ad esempio il blu scuro:

   a { color: #000066; }

La scelta di adottare un colore scuro è giustificata dal fatto che, se la stampante è in bianco e nero, non si corre il rischio di rappresentare i link con toni di grigio troppo chiari, compromettendone la leggibilità. Al fine di favorire l’individuazione dei link, soprattutto nelle pagine in bianco e nero, si può utilizzare anche il grassetto:


    a: link {
         color: #000066;
         font-weight: bold;
        }

Per quanto riguarda i caratteri è possibile impostare il font per la stampante indipendentemente da quello per lo schermo. Il dimensionamento dei caratteri può avvantaggiarsi dell’uso dei fogli di stile poichè è possibile impostare la dimensione in punti (pt), più adatti alla stampa rispetto ai pixel o alle misure usate col tag <font>:

   body { font-family: 9pt Georgia, "Times New Roman", serif; }

Generalmente le stampanti utilizzano fogli di dimensione standard, il formato A4, e ciò garantisce al webmaster una certa sicurezza sullo spazio a disposizione per la stampa. Infine i CSS possono essere utilizzati per evitare la stampa d’elementi inutili. Ciò può essere ottenuto con estrema semplicità attraverso la regola display: none. Ad esempio possono essere eliminati dal processo di stampa menù laterali, aree dedicate agli sponsor, banner e altre cose che non interessa stampare:


      #menu-laterale { display: none; }
      img.banner { display: none; }
      .sponsor { display: none; }
      .no-print { display: none; }

Con la direttiva @page, ad esempio, possiamo impostare questa regola:

   @page { size: 210mm 297mm; margin: 30mm; }

Il layout della pagina in fase di stampa sarà quello di un normale foglio A4 con margini di 3cm su tutti i lati. Il successivo argomento è dedicato alla gestione delle interruzioni di pagina in fase di stampa. Quante volte provando a stampare una pagina web vi siete ritrovati una tabella divisa tra due pagine? Per risolvere questo problema sono state implementate proprietà ad hoc, create apposta per evitare comportamenti ritenuti dal W3C non corretti. Ad esempio, è possibile controllare le interruzioni di pagina appunto, attraverso le proprietà page-break-before, page-break-after e page-break-inside e i valori auto, always e avoid è possibile forzare o impedire le interruzioni di pagina prima, dopo o all’interno di un certo blocco.

Quindi le tre proprietà ad hoc sono:

E grazie ad esse è possibile sapere con esattezza e per ciascun elemento quando e dove inserire un'interruzione di pagina. Ad esempio, se vogliamo evitare che l'interruzione interessi il corpo della tabella, scriveremo:

   table { page-break-inside: inside; }

Se invece abbiano una serie di sezioni di sommario alla fine delle quali vogliamo sempre un'interruzione useremo questa regola:

   #sommario { page-break-after: always; }

page-break-after e page-break-before sono le uniche due proprietà supportate decentemente da tutti i browser, e tra questi quello più affidabile su questo aspetto è Opera.

Per vedere meglio queste proprietà e il supporto sui vari browser, consultiamo questa pagina

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice