CSS  »  Articoli  »  CSS fonts stampa e tipografia 

La stampa delle pagine web è da sempre un problema, per utenti e sviluppatori. Osservate la pagina che state leggendo. Ciò a cui siete interessati è innanzitutto il contenuto dell'articolo. Decidete allora di stampare la pagina per leggere tutto con calma. HTML.IT ha pensato a voi, per fortuna, e se data un'occhiata in alto vedrete l'icona di una stampante: un click e si apre una nuova finestra con il testo dell'articolo. Tutto ciò che nella pagina sta intorno al testo è scomparso: ecco a cosa serve fornire la versione stampabile di una pagina. Senza questo strumento sareste costretti a stampare tutto quanto compare sullo schermo (tabelle, banner, menu) con inutile spreco di inchiostro e ulteriori complicazioni se il layout non sta dentro i limiti di un foglio A4.

La funzionalità della versione stampabile di questo sito si basa sull'uso di ASP e di un database che contiene gli articoli. Non è difficile da realizzare e potremmo affrontare l'argomento in un prossimo tutorial. Ciò che vogliamo dimostrare è che si possono realizzare pagine "printer friendly" anche grazie al semplice ausilio dei CSS. Ecco come si fa.

Uso degli id

Show, don't tell: l'evidenza dell'esempio è meglio di qualunque parola. E allora osservate l'esempio allegato all'articolo. È la riproduzione di un classico layout tabellare. Una tabella in alto per barre di navigazione e banner, una tabella su tre colonne nella parte centrale.

Avviate la stampa della pagina. Se avete un browser recente (e decente) dovreste vedere sulla vostra pagina solo il contenuto della colonna centrale. Piccola nota: a differenza della pagina alternativa di HTML.IT, se l'articolo o il testo si estendono su più pagine, dovrete stampare le pagine singolarmente (ma non è un gran lavoro!).

Torniamo al documento. Ho assegnato alla prima tabella (<table>) e alle tre colonne della seconda (<td>) un identificativo (id="nome_id"): ogni elemento di un documento html può infatti essere identificato in maniera univoca con l'aggiunta di questo fondamentale attributo (per aiutarvi ho inserito delle note di commento nella tabella, ma potete sempre dare uno sguardo al sorgente html).

Bene. A questo punto entrano in gioco i CSS. È lì che stabilisco tutti gli attributi di visualizzazione della pagina, dunque anche dei quattro id usati con le tabelle. Ecco il codice del foglio di stile "schermo.css":

#tabsup {
 background : #F0E68C;
 font : 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
 padding : 5px;
 border : 1px solid black;
}

#colsin {
 background : #2F4F4F;
 font : bold 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
 color : Silver;
 border : 1px solid black;
}

#coldest {
 background : #2F4F4F;
 font : bold 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
 color : Silver;
 border : 1px solid black;
}

#colprinc {
 background : White;
 color : Black;
 font : 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
 line-height : 2.5em;
 border : 1px solid black;
}

Commentiamo:

1. In un CSS il nome di un id viene sempre preceduto dal simbolo del cancelletto
2. Per ciascun id si può definire un insieme di regole: colore di sfondo, attributi del testo, bordi, margini, etc.
3. Un id è simile in questo senso ad una classe, ma con una fondamentale differenza: una classe può essere applicata a più elementi nella stessa pagina, un id si riferisce a un solo elemento. In pratica, posso avere nello stesso documento: <p class="testo"> e <table class="testo">, ma se uso <table id="sfondo"> non posso più usare l'id "sfondo".
4. Per le dimensioni del testo ho scelto di usare i pixel (cfr. aticolo «Stabilire le dimensioni dei font in un CSS»): ciò mi garantisce un maggiore controllo, anche se forse a scapito dell'accessibilità.

Altri articoli

Altre guide

Altre newsletter