Nell'articolo Preparare
un CSS per la stampa abbiamo visto alcuni semplici
consigli di sviluppo per realizzare un CSS specifico per la stampante. Un aspetto
importantissimo per questo media, che merita un approfondimento, è il logo,
dato che è uno tra gli elementi più distintivi di un sito.
In questo articolo vedremo due semplici tecniche per avere un header con un logo
grafico a schermo che viene stampato in versione printer-friendly, ovvero
semplificato e/o monocromatico, grazie ai CSS. Cominciamo subito.
Esempio 1
Eccoci al nostro primo esempio, in cui a schermo viene mostrato
un logo full-color, mentre per la stampa viene servita la sua versione monocromatica: vi basterà
fare un'anteprima di stampa per constatarlo. Per quanto riguarda la grafica, l'esempio usa due
immagini distinte, che riporto di seguito:
Vediamo anzitutto il markup; si tratta semplicemente di includere nell'header l'immagine
monocromatica attraverso il tag <img> oltre a quello necessario per
avere l'header grafico:
<div id="header">
<h1><a href="#">My Logo</a></h1>
<img id="logoprint" src="logoprint.png" alt="logo">
</div>
Da notare che per la parte a schermo il markup include il testo del logo così da consentire
una buona personalizzazione mediante una delle tante
tecniche di image replacement.
In particolare, l'esempio usa My latest
take che non richiede markup aggiuntivo ed è una tecnica semplice e robusta.
A schermo quindi il testo verrà rimpiazzato e l'immagine per la stampa nascosta, mentre per il media="print" sarà il contrario.
Vediamo il CSS per lo schermo dell'esempio per intero:
div#header{background: #FF91FF;padding: 20px 0 30px 20px;
border-bottom: 2px solid #CC56D8}
div#header h1{margin:0}
div#header a{display: block;width: 330px;height: 85px;
background: #FFF url(logo.png);
text-align: right;font-size: 10px;color: #FF91FF}
div#header img#logoprint{display:none}
L'ultima regola è in effetti quella in grado di nascondere
l'immagine monocromatica. Nel CSS per la stampa viene semplicemente
attuato il processo inverso, nascondendo il logo testuale:
div#header h1{display: none}
Il nostro esempio è così ultimato. La tecnica ha una buona compatibilità,
è semplice e logica; ha però un piccolo difetto: la ridondanza dell'informazione.
Con i CSS disabilitati infatti verrebbero mostrati sia l'informazione testuale
del titolo che l'immagine per la stampa. Si può ovviare a questo problema
consentendo comunque una buona flessibilità? Lo vedremo con il secondo esempio.
Esempio 2
Nel secondo esempio la tecnica è quella adottata
da Dan Cederholm in SimpleBits e illustrata
di recente in questo articolo.
Cominciamo dal markup dell'esempio. Da notare come, a differenza di SimpleBits,
il logo dell'esempio è cliccabile, dato che l'immagine è immersa in un link:
<div id="header">
<h1>
<a href="#"><img src="logoprint.png" alt=" logo"></a>
</h1>
</div>
In sostanza si tratta di incorporare nel titolo h1 l'immagine per
la stampa, che verrà mostrata con i CSS a schermo disabilitati e quindi anche
in fase di stampa. Attraverso i CSS si attuerà quindi una sorta di image replacement
sull'immagine stessa, nascondendo a schermo l'immagine per la stampa e attribuendo
al link dell'header l'immagine full-color del logo come sfondo. Ecco quindi
il CSS dell'esempio per il media="screen":
div#header h1 img{width: 0;border-width: 0}
div#header h1 a{display: block;width: 330px;
height: 85px;background: url(logo.png)}
Per il CSS specifico per la stampa è consigliabile infine eliminare il
bordo blu dell'immagine attribuito di default dai browser:
<style type="text/css" media="print">
img{border-width:0}
</style>
L'esempio è così ultimato, ha richiesto markup semplice e minimale
e poche regole CSS.
Conclusioni
Abbiamo visto in questo articolo come ottenere un logo cliccabile e full-color
a schermo che si trasforma nel suo equivalente printer-friendly in fase di
stampa. La prima tecnica si presenta forse un po' più ridondante a livello di markup,
ma forse è preferibile da un punto di vista SEO. A tal proposito, ricordo che nel
caso si adottasse la seconda tecnica vista (che non usa un titolo
testuale) è bene usare un adeguato alt text ed eventualmente
anche il title per il link o l'immagine del logo.
La compatibilità dei due esempi è buona, e dovrebbe essere estesa a tutti
i browser con un supporto minimo dei CSS. Come sempre, negli esempi
è stato usato un CSS incorporato per facilitarne la consultazione; ma
in casi reali è bene spostare tutte le dichiarazioni in CSS esterni.
Esempi e immagini sono disponibili per il download. Alla prossima.
