Consigli per il CSS di stampa in Drupal
I fogli di stile presenti nei temi standard sono un ottimo punto di partenza perché compatibili con gran parte dei browser e ben collaudati, infatti nel mio sito ho modificato e adattato il tema Bartik. A volte però le modifiche portano sgradite sorprese in fase di stampa e quindi bisogna nascondere alcuni elementi. Nell'articolo mostrerò come individuare a video questi tag sgraditi e come istruire il foglio di stile per la stampa, segnalerò anche due utili funzioni come l'indirizzo nei link e la firma sotto l'intestazione.
Cosa sono i fogli di stile? In poche parole la definizione e la descrizione di tutti gli elementi che caratterizzano il vostro sito web e soprattutto il suo contenuto. Per farvi capire le enormi possibilità di questo linguaggio suggerisco di visitare questa pagina, dove alcuni web designer si sono sbizzarriti a creare diversi stili per uno stesso contenuto. Come sempre per maggiori informazioni e per tutta una serie di ottimi collegamenti rimando a Wikipedia.
Quando ho adattato e creato il sotto-tema di Bartik per il sito, mi sono focalizzato principalmente su style.css e molto limitatamente su layout.css. Il primo si occupa dello stile di tutti gli elementi che compongono la pagina: titolo, immagini, liste, paragrafi, etc. mentre il secondo si concentra sull'impaginazione, di quest'ultimo ho modificato solo qualche margine e la dimensione di uno o due contenitori. Di print.css, il foglio di stile per la stampa, quasi nulla perché tutto sommato era quasi perfetto e non era una priorità.
Una volta sistemato lo stile di base, mi sono concentrato finalmente su quello per la stampa (poi toccherà a quello per i dispositivi mobili e lì saranno dolori!) e le modifiche sono ben documentate in queste due immagini:
print.css originale di Bartik | print.css modificato per adattarlo al sito |
Prima di cominciare
Innanzitutto dovete verificare ed eventualmente aggiungere il foglio di stile per la stampa al vostro tema attivo di Drupal. La cosa è molto semplice basta editare mio_tema.info nella cartella presente in "sites/all/themes/mio_tema/" e vedere se tra le tante chiamate c'è la seguente:
stylesheets[print][] = css/print.css
Nella prima parte e tra parentesi quadre print descrive il media type per il quale saranno valide le regole del foglio di stile dichiarato a destra e che in questo caso si trova nella sotto-cartella "css/". Questa è anche la descrizione originale di Bartik.
E' bene anche dotarsi di un valido strumento o programma per evidenziare il codice HTML del vostro sito senza perdere tempo leggendo e rileggendo il sorgente, non se ne esce vivi! Nel mio caso uso molto spesso Firebug un'estensione per Firefox che si trova a questo indirizzo. Il funzionamento è molto semplice, basta spostarsi negli elementi che compongono la pagina web, cliccare con il tasto destro del mouse sopra l'oggetto e dopo sulla voce Controlla elemento con Firebug: si aprirà una finestra con tutte le informazioni HTML. In soldoni:
(27/07/12) Ho da poco scoperto che Chrome il browser di Google e anche Opera, possiedono nativamente uno strumento molto simile a Firebug. Anche in questo caso basta cliccare sopra l'elemento da investigare e nel menu a tendina che si apre selezionare Ispeziona elemento.
N.B. Non voglio dilungarmi su tutte le regole che caratterizzano il CSS, ma c'è ne è una in particolare che trovo molto utile rimarcare: quando nel codice HTML l'elemento è preceduto dalla dicitura id="SELETTORE" nel foglio di stile si dovrà utilizzare #SELETTORE, quando invece ci sarà class="SELETTORE" allora di dovrà usare .SELETTORE.
Ora ci sono tutti gli strumenti per procedere!
Non mostrare gli elementi inutili
Il titoletto non è molto felice, ma l'ho usato per rimarcare il concetto base: che è quello di evitare che vengano visualizzati tutti i descrittori che sono inseriti nel foglio style.css e che non hanno alcuna utilità nel documento stampato: come i menu, il blocco per la ricerca e gli sfondi colorati. Bartik toglie quasi tutto già da solo, ma non prevede che il blocco delle lingue e della ricerca si trovi nell'intestazione, come invece ho fatto io. Perciò bisogna prima cercare il nome di questi due selettori e poi informare il foglio di stile print.css di non mostrarli. Nel mio caso usando Firebug ho trovato:
<form id="search-block-form" accept-charset="UTF-8" [...]
<div id="block-locale-language" [...]
Che quindi ho aggiunto a tutti gli elementi già presenti e descritti con un inequivocabile proprietà:
[...], #search-block-form, #block-locale-language { display: none; }
Ho anche aggiunto i seguenti selettori, perché in una pagina stampata o trasformata in PDF hanno utilità pari a zero:
.sponsor, #block-locale-language, #search-block-form, .container-inline, #contenitore_spritely, #breadcrumb, .field-type-taxonomy-term-reference, .views-content-field-banner-image,
Aggiunte al foglio di stile per la stampa
Ho modificato la grandezza del carattere e l'interlinea del body in questo modo:
body { width: 600px; /* codice aggiunto */ font-size: 12pt; line-height: 1.9; }
I link stampati in azzurro non servono a niente su un foglio di carta, meglio averli neri e in grassetto e con evidenziato l'indirizzo Internet completo. Ho preferito limitare quest'ultimo stile solo ai link presenti nei paragrafi e nelle liste, così:
#content a {color: #000; font-weight:900;} p a:after, li a:after { content: " [" attr(href) "]"; }
[11/12/2012] Per escludere alcuni link ho ricavato la loro classe e ho aggiunto questo codice CSS:
a[class="see-footnote"]:after,
a[class="footnote-label"]:after {
content: "";
}
La firma mi ha fatto penare parecchio! Ho provato diverse soluzioni per avere anche la localizzazione in italiano e in inglese, ma con scarsi risultati. In particolare volevo modificare il template node.tpl.php come per le date di pubblicazione e aggiornamento degli articoli, ma me la visualizzava sia sul monitor sia in stampa. Così ho risolto con queste poche righe di codice CSS che ho imposto apparisse dopo l'intestazione:
#header:after { position: relative; left: 115px; text-align: center; content: "by Nicola Rainiero - rainnic.altervista.org"; margin-bottom: 10px; border: 1px solid #bbb; padding: 3px 5px; font-size: 12pt; font-style: italic; }
Si capisce sia in italiano che in inglese! L'alternativa era implementare due diversi fogli di stile come suggerito dalla communità di Drupal in questo topic: Language based CSS on Multilingual Site, ma visto che era solo una frase da inserire mi è sembrato un lavoro poco conveniente e troppo oneroso.
L'ultima modifica riguarda i commenti, non ne ho molti (7 in questo momento) ma trovo che debbano essere spostati in una nuova pagina, per due opposti motivi: possono essere in alcuni casi inutili ed in altri invece più interessanti dell'articolo stesso. Così si può scegliere se stamparli o meno! Ecco il codice:
#comments { page-break-before: always; }
Sitografia
Magari fosse tutta farina del mio sacco! Per la stesura di questo articolo e l’ottimizzazione di alcune funzioni ho consultato questi siti e forum:
Aggiungi un commento