Salta al contenuto principale
Working from scratch, following simplicity

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 Bartikprint.css modificato per adattarlo al sito
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:

Si seleziona l'elemento da indagare con il tasto destro del mouse e si clicca su Controlla elemento con FirebugSi apre una finestra con il codice HTML per l'oggetto scelto che viene evidenziato nella pagina di provenienza.
Si seleziona l'elemento da indagare con il tasto destro del mouse e si clicca su Controlla elemento con Firebug.
Si apre una finestra con il codice HTML per l'oggetto scelto che viene evidenziato nella pagina di provenienza.

(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

Il contenuto di questo campo è privato e non verrà mostrato pubblicamente.

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web ed indirizzi e-mail diventano automaticamente dei link.
  • Linee e paragrafi vanno a capo automaticamente.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Aggiungi un commento

Il contenuto di questo campo è privato e non verrà mostrato pubblicamente.

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web ed indirizzi e-mail diventano automaticamente dei link.
  • Linee e paragrafi vanno a capo automaticamente.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Sponsored Links
Pubblicità

Nicola Rainiero

Ingegnere civile specializzato in geotecnica con l'ambizione di facilitare la propria attività lavorativa usando e creando software libero per un sapere condiviso e collettivo. Mi occupo anche di energie rinnovabili ed in particolare di geotermia a bassa entalpia. Sono da sempre appassionato di web design e modellazione 3D.