Dopo gli esperimenti di ieri con i font Truetype per rappresentare barcode in formato EAN-13, è arrivato il momento di visualizzare il risultato in una pagina web. Banalmente, supponendo che il font sia installato sul sistema client, ho scritto qualche (pessima) riga di HTML/CSS per iniziare a fare delle prove, ma ho avuto dei problemi: non tutti i browser che ho provato usano il font corretto.

Il risultato dovrebbe essere la rappresentazione grafica del codice “1234567890123″, ma non è stato così con tutti i browser. Il codice (sempliciotto) che ho usato è questo:

<html>
<head>
<style type=”text/css”>
.barcode { font-family: “Code EAN13″; font-size: 3em; }
</style>
</head>
<body>
<span class=”barcode”>1CDOFQR*ijabcd+</span>
</body>
</html>

Risultati della prova

  • OK: Firefox/Linux, Opera/Linux, Epiphany/Linux, IE6/Win, IE7/Win, Chrome/Win, Safari/Win
  • NO: Firefox/Win, Opera/Win

Non ho avuto occasione di fare prove su un Mac, ma il fatto che la versione Windows di Firefox non si comporti come mi sarei aspettato mi inquieta.

Datemi qualche consiglio!

Chiedo dunque consiglio ai webdesigner in ascolto su una tecnica cross-browser per usare senza grossi scazzi un font presente sul client, ammesso e non concesso che esista. In alternativa, andrebbe bene anche qualcosa che permetta di integrare un font Truetype nella pagina web o nel foglio di stile (a patto che sia cross-browser).

Male che vada potrei usare una classe PHP che generi l’immagine del barcode che mi serve, ma mi sembra una soluzione veramente poco elegante:-P


Ti è piaciuto l'articolo, eh? OFFRIMI UNA BIRRA! (è sufficiente essere iscritti a Paypal o avere una carta di credito, anche Postepay)

Condividi :
  • Facebook
  • Twitter
  • FriendFeed
  • OKNotizie
  • Fai.Info
  • Diggita
  • ZicZac
  • Upnews
  • NotizieFlash
  • Wikio IT
  • del.icio.us
  • StumbleUpon
  • Technorati
  • Netvibes
Ti è piaciuto l'articolo? Vota Ok oppure No. Grazie Mille!

Puoi votare l'articolo anche qui, gli articoli precedenti qui.

Articoli consigliati...

20 commenti per questo articolo

  1. Io sto già cominciando a implementare @font-face, ma non ho ancora ottenuto ciò che vorrei: http://tinyurl.com/c8mzpn (dovrebbe funzionare al 100% soltanto con il pieno supporto ai CSS3, quindi Opera 10/Firefox 3.1/Internet Explorer 8… come minimo)

  2. 17/02/2009, 07:52Matteo (permalink)

    Già, @font-face sarebbe una gran figata, ma ci vogliono browser veramente recenti. Quello che cerco è qualcosa che funzioni oggi (e magari anche ieri) senza troppi scazzi, anche a costo di dover installare il font sui client.

  3. 17/02/2009, 09:21Daniel Londero (permalink)

    Avendo a che fare con case editrici e avendo realizzato loro dei gestionali via web che si occupano di tutta la vita del libro ho giocato parecchio con i codici a barre, prima gli EAN-10 poi EAN-13. Sviluppando in PHP ho sempre utilizzato classi apposite per la generazione delle immagini corrispondenti visto che poi oltre alla prova browser ci si deve sottoporre anche alla prova “pistola” spara codici e quindi la stampa deve essere perfetta. Seguirò con interesse gli sviluppi di questo post.

  4. 17/02/2009, 13:34Cristiano (permalink)

    Secondo me l’approccio che stai adottando è sbagliato. La tecnica che vuoi utilizzare non sarà mai completamente cross-browser e, comunque, ti obbligherebbe ad installare su ciascun client i font necessari.
    Inoltre dimentichi il problema della retrocompatibilità: il parco installato di browser “obsoleti” è sempre consistente, soprattutto in ambito aziendale.
    La soluzione migliore e oserei dire definitiva in tal senso è il ricorso a del codice inline javascript: questo ti consentirebbe l’installazione del font solo sulla macchina server e ti garantirebbe il corretto funzionamento a 360° su praticamente tutti i browser conosciuti (in pratica si tratterebbe di generare l’immagine in real time a seconda del codice numerico passato come parametro).
    Una analoga soluzione si potrebbe implementare in PHP o in .NET (sicuramente più semplice), ma la soluzione Javascript è senz’altro più elegante e portabile.
    Resta da capire se la tua necessità di pubblicare su web sia collegata alla “portabilità” di documenti OpenOffice (come da precdente articolo): in tal caso il discorso diventa un pò più complesso, ma dato che non lo hai specificato ho dato per sconatato che tu volessi pubblicare semplicemente codici a barre tramite HTML ;-)

  5. 17/02/2009, 13:37Matteo (permalink)

    @Cristiano:
    In realtà non devo pubblicare niente, era più che altro una curiosità che mi è venuta fuori dopo aver fatto qualche prova. L’alternativa dell’immagina generata al volo è ovviamente la più semplice e la si può realizzare comodamente lato-server, ma mi chiedevo se ci fosse qualche alternativa al nuovo @font-face.

  6. 17/02/2009, 22:55Cristiano (permalink)

    ma mi chiedevo se ci fosse qualche alternativa al nuovo @font-face.

    Al momento direi di no: in attesa di HTML 5 (ancora ben lungi dall’essere standardizzato a pieni voti) non vedo soluzioni interesanti.
    Considera che con i nuovi standard CSS (anch’essi ancora ben lungi, ecc. ecc.) ci sarebbe la possibilità di scaricare in real time sul client (ovviamente solo la prima volta) anche il font (o i font) utilizzato dal foglio di stile.
    Questo aprirebbe ovviamente tutta una serie di scenari veramente interessanti (anche se bisognerebbe tenere conto anche dell’eventuale discorso sicurezza associato) :-)

  7. 17/02/2009, 23:08Francesco Gavello (permalink)

    Non ho ancora avuto a che fare con i codici a barre, ma dite che soluzioni come sIFR (http://novemberborn.net/sifr3) non siano applicabili?

  8. 17/02/2009, 23:16Matteo (permalink)

    @Cristiano:
    Purtroppo lo sospettavo, ma non ne avevo una conferma

    @Francesco:
    Grazie per il consiglio, non conoscevo sIFR. Lo provo e poi faccio rapporto :)

  9. 18/02/2009, 16:22Michele (permalink)

    Guardando la tua schermata, vedo che non funziona su un Firefox. Questo mi stupisce abbastanza.
    Hai provato ad installare Firebug per vedere cosa vede il browser?
    Che versione di Firefox hai testato?
    Su Opera non mi preoccuperei più che tanto, visto l’infimo numero di utenti che lo usa.

  10. 18/02/2009, 18:51Matteo (permalink)

    @Michele:
    La versione di Forefox che ho provato è la 3.0.6 sia con Linux (funziona) che con Windows (non funziona) e Firebug non segnala niente di anomalo: l’elemento <span> sembra usare la classe corretta, ma non visualizza la stringa con il font indicato. Boh…

  11. 18/02/2009, 19:16Matteo (permalink)

    @Francesco:
    Ho dato un’occhiata a sIFR e ho visto che usa Flash. A parte la mia storica non-simpatia nei suoi confronti, ho letto che avrei bisogno della suite di Adobe (anche in versione trial, eventualmente), che però non è disponibile per Linux. Direi che la soluzione è troppo complessa per i miei scopi, grazie lo stesso :)

  12. 22/02/2009, 12:20Napolux (permalink)

    Sifr è roba vecchia. Vai di flir :P

    http://net.tutsplus.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/

    Niente flash e vivi felice! :P

    Certo che queste cose puoi chiedermele via IM senza dover farci un post :P

  13. 22/02/2009, 12:26Matteo (permalink)

    @Napolux:
    Denghiu, provo appena finisce il weekend! Se ti chiedessi queste cose via IM, dove andrebbero poi a finire i miei strabilianti guadagni Adsense? ;)

  14. 22/02/2009, 12:32Napolux (permalink)

    ROTFL. E’ vero. Quand’è che mi regali quella Ferrari che mi avevi promesso?

  15. 22/02/2009, 12:51Matteo (permalink)

    @Napolux:
    Il mese prossimo, le entrate di questo mese le ho già impegnate per una villa alle Maldive :)

  16. 22/02/2009, 13:03Napolux (permalink)

    Ottimo! Avvisami quando devo passare a ritirarla!

  17. 22/02/2009, 13:04Matteo (permalink)

    @Napolux:
    Per non disturbarti troppo pensavo di fartela recapitare direttamente sotto casa, TRANQUILLO! :)

  18. 22/02/2009, 13:10Napolux (permalink)

    A parte tutto credo comunque che sia meglio usare una classe PHP “già fatta” come ti hanno consigliato per queste cose.

    C’è qualcosa che mi fa storcere il naso nel tuo codice e si tratta di questo: che correlazione c’è tra la tua stringa 1CDOFQR*ijabcd+ e il codice a barre 1234567890123? Con classi PHP ad hoc puoi avere funzioni del tipo EAN13(“1234567890123″) che IMHO sono molto più facili da gestire.

    Poi ognuno ovviamente fa come meglio crede :)

  19. 22/02/2009, 14:09Matteo (permalink)

    @Napolux:
    Ho già scritto una funzione barcode($codice) che trasforma il codice da rappresentare nella stringa da scrivere con il font “ean13″, la correlazione è quella di cui parlavo nel post precedente sui barcode: http://tinyurl.com/cyxafm

    La soluzione PHP che genera un’immagine del barcode (dato il codice e il font) è certamente la più sicura, da un punto di vista dell’interoperabilità, ma implica una pagina molto più pesante da scaricare per il client. D’altro canto, quello che ho provato richiede l’installazione di un font su ogni client: finché ci si trova in una intranet non ci sono problemi, nel mondo esterno probabilmente si.

  20. 23/02/2009, 08:56Napolux (permalink)

    Beh, flir genera le immagini al volo (e prevede anche il caching) quindi il problema del font installato sul client non si pone.

    Probabilmente la paginetta sarà pesante, certo. Ma si tratta di immagini in bianco e nero, credo non ci sia questo grande overhead. ;)

Indirizzo per il trackback | Segui i commenti a questo articolo

Partecipa alla discussione:

Feed RSS Commenti Segui la discussione via RSS! Non sai cos'è un feed RSS? GUARDA QUA!

C'è qualcuno che parla di questo articolo?

  1. 17/02/2009, 10:28upnews.it (permalink)

Indirizzo per il trackback | Segui i commenti a questo articolo



Additional comments powered by BackType