CSS e stampa di immagini

[battax]

Ho un problema alquanto bizzarro: ho creato tramite PHP un'immagine che raffigura un codice a barre, la cui lettura con una normale app da uno smartphone avviene senza problemi; a questo punto mi chiederete cosa centrano i CSS con ciò, il problema nasce al momento dell'anteprima di stampa (e della stampa) in quanto tale codice a barre non mi viene più riconosciuto dal lettore (anche dall'anteprima e dunque sempre attraverso il monitor).

Visto che la qualità dell'immagine, già dall'anteprima, si riduce notevolmente come posso far stampare l'immagine in modo che non venga modificata dal processo di stampa del browser (qualsiasi browser)?

Nel foglio di stile per la stampa al momento ho impostato per l'immagine "width:auto !important;" e delle dimensioni fisse per il resto della pagina, ma anche senza nessun tipo di regola in questo foglio di stile l'immagine viene compromessa. Come si può evitare questa cosa?

Grazie

[Mich_]

Non so se questa risposta ti sara` utile. Intanto ci provo.

Quando visualizzi a monitor, usi i px come unita` di misura (esistono anche em e %, ma non credo sia il tuo caso).
In stampa i px non hanno significato, e devi invece usare i centimentri (cm), i millimetri (mm) o i pica (pc).

Prova a vedere se usando queste unita` di misura (io per prima cosa punterei sui pc), la tua immagine ha significato per i lettori di codice a barre.

[battax]

Ok grazie!!
In realtà ci avevo già pensato poiché inizialmente davo dei valori di altezza e larghezza anche all'immagine (ora solamente al box contenitore), ma tali valori li avevo dimensionati in mm così da avere un controllo preciso di tutto.
Quella di impostare comunque le dimensioni all'immagine potrebbe essere un'idea, anche se bisognerebbe andare un po' per tentativi per capire quali siano le sue reali dimensioni (e quindi senza distorsioni). Mi pare comunque strano che non ci sia un modo per stampare un'immagine nelle sue dimensioni "reali" senza che sia per forza distorta.

Non esiste un modo che permetta ciò?

[Mich_]

"Dimensioni reali"
non sono facili da definire.

Se hai una foto di una persona, quali sono le dimensioni reali? Il metro e ottanta della sua altezza? O i 15 cm della foto? E se fai un ingrandimento?
Una immagine digitale ha delle dimensioni in px (li puoi vederee se la apri con un programma di grafica, basta anche il solo paint), ma non puoi attribuirle dimensioni reali.

Un codice a barre deve rispettare delle proporzioni, ma in giro ci sono codici stampati ad occupare 10 cm (ad es. sugli imballaggi) e ci sono codici di poco piu` di 1 cm. E tutti sono leggibili dalle normali pistole (o altro tipo di lettori).

D'altronde dare misure in mm per un'immagine a schermo non ha senso (il computer non conosce la dimensione del px dello schermo collegato: conosce solo le sue dimensioni in px); per lo stesso motivo dare dimensioni in px ad una stampa non ha senso.

[battax]

Esatto!!! Il tuo discorso non fa una piega.
Per dover di cronaca il dimensionamento in mm non ha senso a video, è vero, ma lo ha sul cartaceo ed anche una volta stampato il codice a barre non viene riconosciuto (seppur validissimo) in quanto, probabilmente, distorto.

In definitiva cosa mi consigli di fare? La regola width:100% non si riferisce all'immagine ma ovviamente la ingrandisce al massimo dello spazio disponibile (come per altro deve essere), mentre la regola width:auto non ha nessun effetto e l'immagine continua ad essere distorta. Non c'è una regola "esotica" o non che possa impedire al browser di andare ad agire sull'integrità dell'immagine?

[Mich_]

width:100% ha senso solo se il contenitore ha larghezza definita; e se questo ha dim in % la cosa e` ricorsiva.

L'immagine viene distorta se definisci le dimensioni di height e width e se il loro rapporto non corrisponde al rapporto originale.
Se invece ne definisci una sola l'immagine mantiene le proporzioni.
Poi per quanto riguarda la stampa, occorre vedere che stampante usi.
Se vuoi una controprova, prova a fare una stampa su file pdf (a volte e` un driver che si sostituisce ad un driver di stampa, altre volte e` incluso nelle possibilita` dell'applicativo) e vedi se cosi` la cosa funziona meglio. E comunque ogni computer e` diverso, per cui prova anche su altri browser e computer

width:auto lascia fare al browser secondo come questo ritiene meglio, per cui non e` da usare se vuoi una cosa precisa.
Puo` essere utile per automatizzare alcuni spazi (ad esempio e` molto comodo il margin:0 auto), mentre applicato ad una immagine che deve avere delle proporzioni non e` sano

[battax]

Il problema purtroppo persiste sia su Win che su Mac, sia da Chrome che da Safari e Firefox! Inoltre il fatto strano è che l'immagine non è realmente "distorta", cioè le proporzioni width/height sono invariate, è solo che il barcode non viene riconosciuto né da anteprima di stampa, né dal PDF e nemmeno dal cartaceo, ma solo dal programma.

br1.jpgbr2.jpg

La prima immagine viene interpretata correttamente dal lettore, la seconda (apparentemente identica) no! E' questo il problema che dovrei provare a risolvere: come evitare che venga compromessa al momento della stampa??

[Mich_]

A me non sembrano uguali quelle due immagini: la prima e` nitida, la seconda e` come sfumata, come se fosse attivo il sistema di smoothing dei colori, che per la maggior parte delle immagini e` positivo, ma nel caso del codice a barre forse impedisce l'interpretazione.

Forse nel forum di grafica ti sanno dare qualche consiglio (su come evitare lo smoothing, o su come stampare un codice a barre, o ...)

[battax]

Smoothing è la parola chiave!! Ho trovato questo codice online (con tanto di primo commento ironico) che si promette di fare quello che servirebbe a me:

image-rendering: optimizeSpeed;             /* FUCK SMOOTHING, GIVE ME SPEED  */
image-rendering: -moz-crisp-edges;          /* Firefox                        */
image-rendering: -o-crisp-edges;            /* Opera                          */
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
-ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

la nuova immagine di anteprima sembrerebbe effettivamente più "nitida", ma potrebbe benissimo essere un effetto placebo anche perché (almeno a video) non me la riconosce lo stesso!!!