Stampare un logo impostato come sfondo nei CSS
Martedì 6 Ottobre 2009 - 08:17
di Cesare Lamanna
Lo scenario è il seguente: nell’header di una pagina abbiamo inserito il logo del sito/azienda/etc, ma lo abbiamo fatto impostandolo come immagine di sfondo di un elemento h1 (è più o meno quanto accade su questo blog) e non utilizzando il tag img nel codice HTML.
Quando si stampa la pagina, dal momento che di default i browser non stampano (giustamente, aggiungo) gli sfondi, il logo non compare. Come conciliare? Come continuare ad usare la nostra amata tecnica di image replacement ottenendo su carta l’immagine del logo?
A beneficio di quanti non la conoscessero, segnalo una tecnica che che mi è tornata in mente ieri trovandola sul blog di Jesper Rønn-Jensen.
Si basa sulla trasformazione dell’elemento che contiene il logo come sfondo in list-item attraverso la proprietà display. L’immagine viene poi applicata attraverso l’uso di list-style-image. Nel CSS per la stampa, posto che l’immagine del logo sia associata ad un elemento con id #header, useremo questo codice:
#header {
display: list-item;
list-style-image: url(logo.png);
list-style-position: inside;
margin: 0 !important;
padding: 0 !important;
height: 50pt;
}
Per ulteriori approfondimenti e piccole varianti nel codice, disseppellisco dai miei bookmark il link al vecchio post di WebGraphics in cui trovai per la prima volta menzione della tecnica, aggiungendo il riferimento all’esempio.
È anche probabile che nel frattempo, su Firefox 3.0 e successivi per Windows, sia stato risolto il bug citato in questo post sempre di WG e per cui ad un’anteprima corretta faceva seguito su carta un risultato tutt’altro che apprezzabile nella stampa dell’immagine.
Per chiudere, tra i commenti al post originale di WG, ce n’è uno che accenna alla possibilità di usare i contenuti generati nel CSS per la stampa per ottenere lo stesso risultato. Certo, a quel punto perdiamo le vecchie versioni di Explorer e a quel punto le cose si complicano… :) Comunque, per un approfondimento sull’uso del generated content per l’image replacement rimando all’articolo Image Replacement alternativo di Alessandro Fulciniti.
Commenti
1
forte questa del list-style-image… perché non ci ho pensato da solo?!? :) :D :p
PERO’
io sostengo che per gestire titoli grafici le varie tecniche di image replacement abbiano senso…
per il logo no…
il logo andrebbe inserito con img…secca anche a me… perché tocca rinunciare ad effetti hover… però il logo ha più senso come img
2
Non capisco perchè non accoppiare all’image replacement un logo in positivo che disabilitiamo con il CSS.
Mi spiego. Io stmapo l’h1 ci sbatto dentro il link e dentro il link l’immagine. L’h1 non ha testo e quindi chi naviga in condizioni particolari leggerà il testo dell’alt dell’img come h1. L’img è nascorsa da un display none e l’a che ha display block e stesse dimensioni dell’img avrà stampato come sfondo il logo con correzione grafica magari per essere poggiato sulla nostra testata.
Saluti# - postato da Alessandro - 06 Ottobre 2009 - 13:11
3
@Alessandro, ma anche chi altri voglia intervenire…
una parola: perché?
ti prego convincimi del perché seguire tutta questa procedura invece di inserire img (stiamo parlando del logo)
4
anche io penso che l’img per il logo sia più indicato; infondo il logo è un contenuto, non un elemento grafico, no?
# - postato da Daniele - 08 Ottobre 2009 - 17:57