Quale tecnica cross-browser per usare i font installati sul client?
17 febbraio 2009, scritto da Matteo
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>
- Scarica l’esempio e il font Truetype EAN13 (.zip 3.5KiB)
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… 
Ti è piaciuto l'articolo, eh? OFFRIMI UNA BIRRA! (è sufficiente essere iscritti a Paypal o avere una carta di credito, anche Postepay)
Newsletter
RSS articoli
RSS commenti
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)
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.
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.
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
@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.
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)
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?
@Cristiano:
Purtroppo lo sospettavo, ma non ne avevo una conferma
@Francesco:
Grazie per il consiglio, non conoscevo sIFR. Lo provo e poi faccio rapporto
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.
@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…
@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
Sifr è roba vecchia. Vai di flir
http://net.tutsplus.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/
Niente flash e vivi felice!
Certo che queste cose puoi chiedermele via IM senza dover farci un post
@Napolux:
Denghiu, provo appena finisce il weekend! Se ti chiedessi queste cose via IM, dove andrebbero poi a finire i miei strabilianti guadagni Adsense?
ROTFL. E’ vero. Quand’è che mi regali quella Ferrari che mi avevi promesso?
@Napolux:
Il mese prossimo, le entrate di questo mese le ho già impegnate per una villa alle Maldive
Ottimo! Avvisami quando devo passare a ritirarla!
@Napolux:
Per non disturbarti troppo pensavo di fartela recapitare direttamente sotto casa, TRANQUILLO!
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
@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.
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.