Il Fontsampler di Tipotype
Su Tipotype c’è la possibilità di provare i font all’interno della pagina da cui si acquistano. Non si tratta certo di una particolarità: quasi tutti i siti commerciali danno la possibilità di avere uno specimen personalizzato per i loro font. Solo che lo presentano sotto forma di immagine. L’utente digita le lettere che vuole vedere, il server compone l’immagine e la invia al browser.
L’alternativa sarebbe quella di inserire il font nella pagina usando le Css. Che sono dei documenti nei quali è specificato il nome del font con cui impaginare il testo. Se questo si trova installato sul computer dell’utente, il browser lo pesca da lì, altrimenti può essere specificato l’indirizzo di un server da cui caricare il file in questione. In alternativa, nei file allegati alla pagina, può essere contenuto l’intero font, trasformato in una stringa di testo col metodo Base64.
Il browser Firefox ha un’apposita casella nella quale si può vedere il nome del font utilizzato, e si può anche ottenerne uno specimen personalizzato. Se il font si trova installato sul computer dell’utente, sotto la dimostrazione compare la scritta “Sistema”. In caso contrario può comparire l’indirizzo del server da cui il font è stato pescato, oppure l’intera stringa in Base64.
Su Tipotype però succede una cosa strana: andando ad analizzare un sample, il browser riconosce il font usato, sa che non si tratta di un’immagine, ma sotto ci scrive “Sistema”. Anche quando il font in questione non è sicuramente installato sul sistema. Come fa?
Il codice della pagina è abbastanza complicato: 1450 righe solo per il file html, a cui si aggiungono quasi trenta fogli di stile allegati. Ma il meccanismo è relativamente semplice: c’è un file Woff sul server di Tipotype, che viene specificato nel codice della stessa pagina web, non nei fogli di stile. Sta alla riga 800-e-qualcosa, là dove inizia la Div del Fontsampler, ovvero il riquadro in cui si può vedere il sample del font. La classe è “fontsampler-wrapper on-loading”. Segue l’elenco dei file coi font. Evidentemente c’è qualche funzione che viene attivata al momento in cui viene caricata la pagina.
In effetti c’è un’intero file javascript che si chiama Fontsampler e che usa alcuni dei parametri che vengono passati al fontwrapper, per esempio il nome iniziale del font. A che serve?
Da non addetto ai lavori, provo ad indovinare: è un’insieme di istruzioni per gestire al meglio la visualizzazione delle lettere, anche tenendo conto delle lingue più disparate.
Il fatto è che per una persona normale l’effetto ottenuto è pressoché lo stesso che si ottiene con il Css. Se fosse stato un metodo complicato di cifratura, uno avrebbe potuto dire che serviva per nascondere le informazioni sul font alle persone non autorizzate. Ma visto che il font completo si trova in un file in chiaro specificato nel codice stesso della pagina, il motivo vero deve essere un altro.
Solo un esperto informatico può risolvere l’arcano. E solo con tecniche avanzate uno potrebbe ottenere la stessa cosa sulle pagine del proprio sito (sempre che avesse un motivo per farlo).
Tutte queste complicazioni a me fanno soltanto venire in mente il sito Tencedil. Il quale ha lo scopo di trascrivere con i caratteri inventati da Tolkien per le popolazioni elfiche fittizie del “Signore degli anelli” una qualsiasi parola digitata dall’utente. Lì c’è un problema: le vocali non sono lettere a parte, ma accenti che si mettono sulla consonante che precede (o segue). La quale non corrisponde ad una lettera romana, ma a un suono ben preciso. Le parole inglesi “she” e “saw” ad esempio iniziano entrambe per s, ma il suono iniziale non è lo stesso. Quando si scrive la s su Tencedil, compare una s standard, che può essere sostituita a seconda delle lettere successive a seconda del suono finale che si vuole ottenere. Anche le doppie talvolta non vengono realizzate con la ripetizione della stessa lettera, ma con una modifica aggiunta alla prima lettera digitata.
C’è un sacco di codice nella pagina, anche per tenere conto di lingue umane diverse, e di trascrizioni diverse da parte delle varie popolazioni elfiche fittizie. Si capisce perché deve esserci così tanto codice. Magari il motivo di Tipotype è lo stesso. Ma Tencedil i font li carica con un normale Css.
L’alternativa sarebbe quella di inserire il font nella pagina usando le Css. Che sono dei documenti nei quali è specificato il nome del font con cui impaginare il testo. Se questo si trova installato sul computer dell’utente, il browser lo pesca da lì, altrimenti può essere specificato l’indirizzo di un server da cui caricare il file in questione. In alternativa, nei file allegati alla pagina, può essere contenuto l’intero font, trasformato in una stringa di testo col metodo Base64.
Il browser Firefox ha un’apposita casella nella quale si può vedere il nome del font utilizzato, e si può anche ottenerne uno specimen personalizzato. Se il font si trova installato sul computer dell’utente, sotto la dimostrazione compare la scritta “Sistema”. In caso contrario può comparire l’indirizzo del server da cui il font è stato pescato, oppure l’intera stringa in Base64.
Su Tipotype però succede una cosa strana: andando ad analizzare un sample, il browser riconosce il font usato, sa che non si tratta di un’immagine, ma sotto ci scrive “Sistema”. Anche quando il font in questione non è sicuramente installato sul sistema. Come fa?
Il codice della pagina è abbastanza complicato: 1450 righe solo per il file html, a cui si aggiungono quasi trenta fogli di stile allegati. Ma il meccanismo è relativamente semplice: c’è un file Woff sul server di Tipotype, che viene specificato nel codice della stessa pagina web, non nei fogli di stile. Sta alla riga 800-e-qualcosa, là dove inizia la Div del Fontsampler, ovvero il riquadro in cui si può vedere il sample del font. La classe è “fontsampler-wrapper on-loading”. Segue l’elenco dei file coi font. Evidentemente c’è qualche funzione che viene attivata al momento in cui viene caricata la pagina.
In effetti c’è un’intero file javascript che si chiama Fontsampler e che usa alcuni dei parametri che vengono passati al fontwrapper, per esempio il nome iniziale del font. A che serve?
Da non addetto ai lavori, provo ad indovinare: è un’insieme di istruzioni per gestire al meglio la visualizzazione delle lettere, anche tenendo conto delle lingue più disparate.
Il fatto è che per una persona normale l’effetto ottenuto è pressoché lo stesso che si ottiene con il Css. Se fosse stato un metodo complicato di cifratura, uno avrebbe potuto dire che serviva per nascondere le informazioni sul font alle persone non autorizzate. Ma visto che il font completo si trova in un file in chiaro specificato nel codice stesso della pagina, il motivo vero deve essere un altro.
Solo un esperto informatico può risolvere l’arcano. E solo con tecniche avanzate uno potrebbe ottenere la stessa cosa sulle pagine del proprio sito (sempre che avesse un motivo per farlo).
Tutte queste complicazioni a me fanno soltanto venire in mente il sito Tencedil. Il quale ha lo scopo di trascrivere con i caratteri inventati da Tolkien per le popolazioni elfiche fittizie del “Signore degli anelli” una qualsiasi parola digitata dall’utente. Lì c’è un problema: le vocali non sono lettere a parte, ma accenti che si mettono sulla consonante che precede (o segue). La quale non corrisponde ad una lettera romana, ma a un suono ben preciso. Le parole inglesi “she” e “saw” ad esempio iniziano entrambe per s, ma il suono iniziale non è lo stesso. Quando si scrive la s su Tencedil, compare una s standard, che può essere sostituita a seconda delle lettere successive a seconda del suono finale che si vuole ottenere. Anche le doppie talvolta non vengono realizzate con la ripetizione della stessa lettera, ma con una modifica aggiunta alla prima lettera digitata.
C’è un sacco di codice nella pagina, anche per tenere conto di lingue umane diverse, e di trascrizioni diverse da parte delle varie popolazioni elfiche fittizie. Si capisce perché deve esserci così tanto codice. Magari il motivo di Tipotype è lo stesso. Ma Tencedil i font li carica con un normale Css.
Commenti
Posta un commento