Mondi su mondi, sistemi di sistemi.

Utility del giorno: Fake

Monday, July 12th, 2010

Una delle cose più noiose è il dover ripetere manualmente una serie di operazioni con il browser: per verificare che tutto sia a posto; come test per la gui; nell’accesso a servizi che richiedono la ripetizione di una serie sempre uguali di passi.

Ci sono già strumenti di automazione e replay come Selenium, ma sono pensati esclusivamente per il testing.

Fake è un’applicazione basata su Safari che copre sia gli scenari più standard di Selenium sia i casi in cui vogliamo automatizzare l’accesso notoriamente impervio a siti come quelli di home banking e simili. In più, Fake permette alcune operazioni molto più potenti e che non hanno nulla a che vedere con il testing ma che pos­sono essere utilis­sime come l’esecuzione di script di shell o AppleScript.

L’interfaccia è un incrocio fra Automator e Safari ed è di una facilità estrema: basta trascinare le azioni nella timeline e impostare i para­metri. Una volta messa a punto la sequenza che vogliamo, pos­siamo salvarla per il futuro.

Coda & Subversion

Thursday, March 25th, 2010

Uso Coda ormai da qualche tempo. È un buon programma per lo sviluppo dei siti, piacevole da usare e affidabile, non ho avuto bisogno di molto altro per diverso tempo.

I limiti più evidenti di Coda

Dopo qualche tempo, però, ho cominciato a sentire la mancanza di Emacs e così ho configurato Coda in modo da usarlo come editor esterno. A quel punto ho scoperto con fastidio che la lista dei file da caricare sul sito non veniva sempre aggiornata con le modifiche da Emacs, nonostante fos­sero correttamente individuati come file modificati rispetto alla repository nel VCS (Version Control Software; attualmente è Subversion), costringendomi ogni volta a marcarli a mano. No fun.

Inoltre non sempre abbiamo a che fare con un deployment diretto. Spesso dobbiamo prima caricare il sito su un server di staging e poi, verificato che tutto vada bene, pas­sarlo in produzione. Teoricamente potremmo “ripuntare” Coda fra i due server ma, in pratica, sarebbe un delirio.

Sfruttiamo Subversion!

Il modo ovvio di risolvere questi problemi è usare i punti di aggancio che Subversion mette a disposizione, ovvero, la pos­sibilità di eseguire delle operazioni arbitrarie in concomitanza di alcuni eventi:

  • post-commit
  • post-lock
  • post-revprop-change
  • post-unlock
  • pre-commit
  • pre-lock
  • pre-revprop-change
  • pre-unlock
  • start-commit

In questo caso, lo script agganciato sarà agganciato in post-commit ed effettuerà il deployment.

I dettagli importanti

Una cosa piuttosto semplice, insomma, anche se ci sono diverse cosine di cui tener conto. In primo luogo, è sempre pre­feribile disimpegnare Subversion il prima pos­sibile1 e quindi dobbiamo posporre le varie operazioni; inoltre, dato che lo script è condiviso per tutta la repository, dobbiamo avere l’accortezza di fare le azioni giuste per il progetto giusto; infine, visto che ogni progetto fa storia a sé, dobbiamo trovare un buona fles­sibilità2 per poter specificare le azioni che vogliamo, nel modo che riteniamo più opportuno per quel progetto.

Disimpegnare velocemente la repository

Ad ogni commit viene creato uno script di shell (a partire da un template descritto più avanti) chiamato con il numero di release. La creazione è praticamente istantanea.

Questo script va a finire in una specie di coda sul filesystem. Il fatto di usare una directory invece di un file singolo evita problemi di accesso contemporaneo, lasciando completa libertà nel suo contenuto e mi consente di sfruttare launchd per fare in modo che il proces­samento degli script nella coda venga lanciato solo al momento opportuno. Questo è il file di configurazione:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Label</key>
<string>it.refactor.deployment-queue</string>
<key>OnDemand</key>
<true/>
<key>Program</key>
<string>/usr/local/bin/projects-auto-deployment</string>
<key>QueueDirectories</key>
<array>
<string>/var/tmp/deployment-queue</string>
</array>
</dict>
</plist>

Il dettaglio importante è la direttiva QueueDirectories che, a differenza di WatchPaths, lancia il processo alla modifica del contenuto della directory, ma solo quando in pre­cedenza era vuota.

In alternativa avremmo potuto usare un qualche daemon. Non un gran problema ma mi sembrava un po’ meno robusto.

Progetti diversi, copioni diversi

Come dicevo prima, lo scopo di usare degli script di shell è quello di lasciare la mas­sima libertà.

Ogni voce della configurazione letta dallo script è simile a questa:

    <regexp> {
        env {
            REL=$rev
        }
        preflight {...}
        deploy {...}
        postflight {...}
    }

Le quattro voci: env, preflight, deploy e postflight raggruppano e ordinano i diversi frammenti che vanno a comporre lo script di deployment, che viene attivato in base all’eventuale match dell’espressione regolare.

L’unica variabile conosciuta è il numero della release, che è pas­sato da Subversion, il resto è tutto libero. Più generico di così!

Di solito, dopo aver definito le variabili ambientali in env, il preflight si occupa di fare il checkout dal VCS; il deploy fa quello che si può immaginare; il postflight si occupa di fare un po’ di pulizia ecc. Ribadisco però il fatto che quelle descritte prima sono solo sezioni: se per assurdo voglio mettere tutto nella sezione env lo posso fare.

Ma non è finita qui…

Tutto bene? Quasi. Così com’è pensato, il sistema non permette di fare alcune cose molto importanti.

Percorsi variabili

Se vogliamo usarlo anche per il deployment delle release “taggate”3, dobbiamo agganciare lo script al percorso dei tag. Tuttavia, dato che l’url completa cambia ad ogni nuovo tag — ad esempio avremo …/tags/REL1, …/tags/REL2 — come facciamo a sapere in post-commit quale prendere?

Per ora non ho trovato una soluzione generica. Mi sono affidato al fatto che il nome della versione in tags è uguale al numero pre­cedente della release di post-commit4. Ad esempio, se l’operazione è stata eseguita alla release 3753, cercheremo la directory r3752. Una volta ottenuta l’URL rientriamo nel caso standard.

Azioni specifiche per le singole release

Un’altra cosa abbastanza frequente è l’esecuzione di operazioni specifiche per una data versione. Esempio tipico: delle modifiche allo schema del database, che vanno fatte una volta sola e non devono essere riapplicate.

Per risolvere questo problema, all’interno del progetto, in una directory nota, creiamo uno script che verrà cercato dal sistema di deployment per essere eseguito5.

roll-up delle modifiche

Infine, nello scenario staging & deployment è desiderabile che una serie di operazioni fatte in staging pos­sano venire applicate in una volta sola in deployment.

Dato che lo script specifico per una data release è anch’esso sotto controllo di versione, abbiamo accesso a tutta la sua storia. Bisognerà andare a prendere quella porzione di modifiche intercorse fra l’ultimo deployment e quello attuale e appenderle ad un unico file, con un comando del genere, ad esempio:
svn log -r3778:3783 -q URL | egrep ^r | awk '{ print $1 }' | sort | while read r; do svn cat -$r URL; done

Come ottengo il range da pas­sare al comando appena visto? Partiamo da un scenario semplificato all’osso, supponendo di partire da una repository nuova di zecca.

Dalla r1 alla r10, lavoro solo nel trunk; quando creo un nuovo tag, in base alle convenzioni adottate prima, il suo nome sarà r10 e il suo numero di release sarà r11. Proseguendo, dalla r12 alla r20, lavoro sempre nel trunk; come prima, creando un nuovo tag, il nome sarà r20 e il suo numero di release sarà r21.

A questo punto, se cerco tutte le modifiche in tags, escludendo quella relativa alla creazione della directory tags, avrò r11 ed r21. Come prima, in base al numero di release pas­sato in post-commit, che al secondo tag sarà 20, posso ricavare il range da considerare, calcolabile come (release immediatamente precedente):(numero di release - 1), ovvero, r11:r19.

There’s more than one way to do it

Per chi non avesse voglia di reinventare la ruota, ci sono delle alternative. In particolare, una delle pos­sibilità che ho preso in considerazione è quella di installare il software di VCS direttamente sul server.

In effetti è una soluzione piuttosto comoda, dato che basta fare un svn up per aggiornare l’installazione e con VCS distribuiti le pos­sibilità sono ancora più ampie.

Ci sono però diversi punti dolenti. Come visto prima è raro che basti un semplice aggiornamento del codice; in secondo luogo non mi piace moltis­simo l’idea che si crei un’ulteriore dipendenza fra il sistema che pubblica gli aggiornamenti e quello che li riceve.

Tolta questa pos­sibilità, ci sono i software di SCM veri e propri, da Puppet a Capistrano, pas­sando per Fabric. Il primo propone un modello in pull, dove i cliente contattano il server per stabilire cosa c’è da fare; il secondo e il terzo sono più vicini ai sistemi in push, dove l’azione è iniziata dal server.

Infine, non dimentichiamoci di Hudson che, pur essendo un server di integrazione, può automatizzare praticamente qualsiasi cosa e quindi anche processi come questi.

Hudson è quello più adatto, essendo un vero e proprio server di continous integration. Anzi, non escludo di cominciare ad usarlo a breve, ma per ora mi bastano le due righe che ho scritto in Tcl.

Per quanto riguarda gli SCM, più vicini al mondo dei sysadmin, Puppet mi piace di più, anche perché ci ho giocato un paio di volte, mentre ho visto usare Capistrano in situazioni simili a quelle descritte.

Come si può notare, alcune delle parti più contorte sono dovute a Subversion. Dato che ho in progetto di pas­sare a Git, sono curioso di sapere se e come il procedimento si semplificherà.

  1. In post-commit Subversion ignora l’esito delle operazioni, dato che il commit è già stato fatto; tuttavia non mi è chiaro se lo esegua in asincrono
  2. avete mai sentito di un progetto che non deve essere fles­sibile?
  3. Per chi non lo sapesse, un tag è un’istantanea del codice sorgente ad un dato momento. In Subversion, è di prassi che le versioni ufficiali stiano in tags e le versioni di sviluppo che deviano da quella principale stiano in branches.
  4. l’uso dei numeri di release come nome del tag non mi risulta sia la cosa più consigliabile, lo so, tuttavia nelle applicazioni con rilasci continui la cosa non mi sembra così grave
  5. Qualcuno storcerà il naso nel vedere una commistione fra deployment e sviluppo, all’interno del sorgente. Non è sicuramente la soluzione più pulita anche se ha l’indubbio vantaggio di tenere sotto controllo di versione anche cose che spesso vengono lasciate un po’ a se stesse. Ad oggi credo che il bilancio costi/benefici sia positivo.

Dettagli sul font hinting

Friday, January 22nd, 2010

Nel mio post chilometrico su @font-face ho accennato alla questione del font hinting e alle differenze nel rendering delle font, in particolare, quello delle font OpenType CFF sotto Windows è nettamente peggiore di quelle TrueType 1.

PostScript vs TrueType

Il motivo di questa differenza è dovuto al fatto che il formato CFF eredita una serie di scelte fatte in pas­sato con il PostScript, in particolare la descrizione dell’outline e, appunto, il modello di hinting.

Questi modelli, però, erano creati per le stampanti a bassa risoluzione e non per il monitor; viceversa, il TrueType è stato pensato fin dall’inizio per il rendering a video.

Perché il CFF usa il modello del PostScript?

La scelta usata per il CFF è motivata dal fatto che il formato outline con le curve di Bézier cubiche del PostScript è quello usato quasi tutti i progettisti di font e soprattutto il modello di hinting è molto più semplice e può essere in larga parte automatizzato 2.

In questo momento, quindi, la scelta del TrueType per @font-face sembra praticamente obbligata, almeno fino al momento in cui il rendering tramite DirectWrite sarà sufficientemente diffuso su Windows 3.

  1. Fonts e il web: a che punto siamo
  2. Font Hinting Explained By A Font Design Master
  3. A typographic workbook. Le informazioni sui diversi formati si trovano alle pagg. 135–137.

Fonts e il web: a che punto siamo?

Saturday, January 2nd, 2010

Introduzione

Una dei temi ricorrenti dell’anno appena trascorso nell’ambito dello sviluppo web è stato sicuramente quello delle font. Ho pensato perciò di raccogliere alcuni articoli comparsi recentemente per dare una panoramica della questione.

In particolare, vedremo in cosa consiste a grandi linee l’uso di @font-face, i punti a cui fare attenzione, le implicazioni positive e negative. Ho cercato di estrarre gli aspetti più pratici, rimandando agli articoli originali (linkati nei titoli delle sezioni) per i dettagli teorici e le motivazioni che stanno dietro le varie soluzioni.

Per gli impazienti, comunque, ecco il rias­sunto. Anche se i passi in avanti sono stati significativi, credo sia prudente limitare @font-face a titoli e cose del genere, continuando ad usare le font clas­siche per tutto il resto, magari rivedendo con più attenzione gli stack delle font dichiarate nei fogli di stile.

How to use CSS @font-face #

Cominciamo con la domanda pratica: cosa bisogna fare per usare @font-face? Questo:

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/ »
  kimberle.ttf) format("truetype");
}

In altre parole, dobbiamo definire origine e formato per la font Kymberley in modo da poterla poi usare nelle stesse modalità delle font già installate.

Fin qui la teoria, in pratica dobbiamo risolvere la questione dei diversi formati delle font 1. La cosa più veloce per risolverle è generare tutti quelli che servono con Font Squirrel.

Una volta generati i formati bisogna irrobustire la dichiarazione che abbiamo visto prima per farla funzionare con i vari browser:

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("Alternate name"), local("Alternatename"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }

La combinazione dei due src si prende cura di Explorer 2; i due local consentono al browser di cercare prima la font in locale, e sono due perché alcuni browser usano il nome Postscript e altri il nome del file; il resto sono elencati i formati in ordine di desiderabilità.

Anche se qui mostriamo una sola dichiarazione, bisogna tenere pre­sente che bisogna crearne: una per il roman e una per l’italico 3.

Real Web Type in Real Web Context #

Una volta che abbiamo impostato i nostri fogli di stile, per testare una font serve un qualche tipo di testo standard che ne metta in luce pregi e difetti.

Web Font Specimen fa esattamente questo. Possiamo scaricare la pagina campione in locale, impostarla con le nostre font e vedere come si comporta dal vivo, con i vari browser 4.

Designing For The Switch #

Rendering a parte, uno dei problemi principali nell’uso di @font-face è il peso, dovuto principalmente alle tabelle di hinting molto estese.

Il Georgia, ad esempio, è quasi 300 KB, sufficienti rovinare il primo impatto perché alcuni browser, come Opera e FireFox, pre­senteranno per un attimo la pagina senza la font corretta, il famigerato Flash of Unstyled Text (FOUT), mentre altri, come il WebKit, aspetteranno di aver scaricato tutta la font, non mostrando nes­sun testo durante l’operazione.

Da un punto di vista strettamente procedurale, non c’è nes­suna alternativa: la font dev’essere scaricata e fino a quando l’operazione non è terminata le scelte pos­sibili sono quelle viste prima 5.

Fighting the @font-face FOUT — Quicken the load time #

Tuttavia ci sono alcuni trucchi utilizzabili. Il primo consiste nel ridurre all’osso il file della font, eliminando tutto quello che non è strettamente indispensabile 6; il secondo consiste nel calibrare attentamente l’elenco delle font nel foglio di stile per minimizzare il FOUT; poi lo pos­siamo zippare, guadagnando fino al 40%; infine dovremo fare in modo che la font scaricata rimanga in cache.

L’arma nucleare tattica 7è però quella di forzare il caricamento della font prima che la pagina venga mostrata, in modo da averla pronta quando serve.

Better font stacks #

Come accennavo all’inizio, l’estensione dello stack delle font dichiarate può essere usato per questo scopo (combattere il FOUT) ma anche semplicemente per usare combinazione meno scontate.

La pre­messa fondamentale è che, in realtà, il browser ha a disposizione molte più font di quelle di solito considerate. Inoltre, è pos­sibile individuare delle combinazioni accettabili per coprire i casi in cui la font ideale non è presente.

Questo lavoraccio è già stato fatto e il campionario in pdf allegato all’articolo citato è utilis­simo per prendere una decisione 8.

Real Fonts and Rendering: The New Elephant in the Room #

E ora veniamo al vero problema emerso nei primi usi sul campo: il rendering delle font, dovuto ai comportamenti molto eterogenei dei motori di rendering in combinazione con i diversi sistemi operativi. 9.

Browser Choice vs Font Rendering #

L’analisi di Zeldman difetta forse di pre­cisione, visto che si limita a constatare il problema, anche se posso capirlo: i dettagli sono un po’ da mal di testa. Comunque, guardando le cose con più attenzione il panorama sembra meno preoccupante.

L’attuale sistema di rendering sotto Windows, il GDI, che fornisce la base per l’anti-aliasing in ClearType, funziona in modo adeguato solo le font TrueType.

Le nuove versioni dei browser useranno però un’altro motore, il DirectWrite, più sofisticato, in grado di fornire un rendering adeguato anche per i PostScript e gli OpenType. Ci saranno ancora delle differenze rispetto a Mac OS X ma saranno “solo” diversi.

In conclusione

Dopo tante attese e false partenze l’uso di @font-face non è più solo una pos­sibilità teorica. Tuttavia, anche se la voglia di usarlo sembra contagiare tutti, allo stato attuale va usato con attenzione: mi limiterei alle titolazioni; per i testi estesi ci vuole più prudenza.

Questi sono problemi che verranno comunque risolti. Più importanti, invece, i mes­saggi per chi si occupa di design web.

In primo luogo bisogna superare la fissa di fare in modo che una pagina si veda esattamente allo stesso modo ovunque 10. Il fatto di avere più font a disposizione ha fatto emergere differenze enormi fra le varie piattaforme e, a complicare ulteriormente le cose, le piattaforme stesse sono in continua diversificazione11. Inseguire l’assoluta omogeneità è futile, però bisognerà essere più rigorosi nei test: le sorprese del rendering sono saltate fuori in modo clamoroso anche perché, a dispetto delle dichiarazioni ufficiali, alcuni siti sono “usciti” con versioni testate solo su Mac.

Inoltre e cosa più importante, l’espansione dell’offerta di font utilizzabili significa che è neces­saria una maggiore competenza (tipo)grafica. Ci vorranno più gusto e più competenza per la scelta e la combinazione giuste.

Può darsi che quella dell’anno scorso sia stata solo una fiammata destinata a spegnersi e rimanere dormiente per altri anni ma non ci scommetterei: meglio prepararsi.

  1. Sono stati proprio i formati a fermare l’uso di @font-face fino ad oggi, alimentando fra l’altro l’errata convinzione che fosse una pos­sibilità introdotta con CSS3.
  2. che userà comunque il primo
  3. altri dettagli sul percorso che ha portato a questa soluzione li trovate in Bulletproof @font-face syntax
  4. questione spinosa su cui torneremo più avanti
  5. Per quanto riguarda i motori di rendering, non escludo che gli sviluppatori si inventino qualche stratagemma per mitigare almeno il problema.
  6. Font Squirrel, di cui abbiamo parlato prima, rende questa parte molto semplice
  7. anche a costo di rendere l’HTML non valido? Beh, a voi la scelta dell’escalation
  8. queste informazioni le ho ricavate da font-face e Webfonts: come usarli, un post completis­simo, in particolare sulla succes­sione degli eventi che ha portato alla situazione attuale
  9. Fra l’altro la questione non è limitata al rendering del singolo carattere ma si estende anche alla spaziatura fra i caratteri. In particolare, le tabelle di kerning non vengono rispettate
  10. Ignorance is bliss
  11. quante versioni di WebKit ci sono in giro? Io ho perso il conto…

Sorprese di fine anno

Saturday, December 5th, 2009

“Non si potrebbe fare…?”

Come se non bastasse il lavoro di rifacimento, è arrivata sulla scrivania la richiesta di una versione che:

  1. possa essere usata in assenza di connettività;
  2. non richieda alcuna procedura d’installazione;
  3. sia multipiattaforma;
  4. sia eseguibile direttamente da una chiave USB.

Insomma, non proprio un qualcosa da fare nei ritagli di tempo!

Cosa usare?

All’inizio avevo pensato ad una qualche applicazione in Java, usando Swing o SWT ma non ho praticamente nes­suna familiarità con applicazioni desktop di quel tipo; inoltre non è affatto scontato che Java sia sempre installata.

Sul lato .Net, conosco qualcosa di più ma non ho idea se sia fattibile uno sviluppo multipiattaforma.

“The simplest thing…”

Poi mi è venuto in mente che avrei potuto risparmiare un bel po’ di lavoro usando una versione rivisitata di quella su web, con la parte server che gira direttamente sul computer dell’utente. Fattibilissimo, certo, ma non proprio una cosa che non richiede alcuna installazione

Infine, credo di aver trovato una soluzione in Tcl, tramite i cosiddetti StarKit e StarPack: un colos­sale (ma leggeris­simo, in MB) uovo di colombo.

In poche parole, uno StartKit consente di impacchettare un’intera applicazione in una specie di disco immagine. Questo disco immagine contiene anche tutti i file ausiliari, binari o meno, anche per diverse piattaforme.

Fin qui niente di particolare. In fondo, con l’avvento delle macchine virtuali è diventata prassi comune distribuire direttamente dei dischi immagine. C’è però da superare l’ostacolo dell’installazione, visto che per eseguire uno StarKit serve comunque un interprete Tcl più una serie di librerie.

E qui entrano in scena gli StarPack, che accorpano uno StarKit e l’interprete in unico file, configurato per partire con un doppio click. Il peso? Pochi MB!

Nei pros­simi giorni vedremo un po’ più in dettaglio come funziona questa tecnologia.

Life goes on

Nel frattempo, sul fronte del refactoring, ho terminato l’accorpamento di tutto l’SQL. Adesso dovremo cominciare a tagliare i ponti con le sezioni che si appoggiano a Joomla.

PS · Va pre­cisato che con l’arrivo ormai pros­simo dell’HTML 5, diventerà concepibile pensare a soluzioni che pos­sano girare in completa autonomia, senza alcuna connes­sione. Tuttavia, il supporto da parte di Explorer è ancora incompleto.

La mano di Google

Tuesday, October 13th, 2009

Design Observer, leggendo Conrad da Google Books, scopre con orrore una mano immortalata durante il processo di scansione del libro.

La foto getta una luce ridicola (quindi, umana) e un po’ inquietante questo enorme progetto. Sono abituato a pensare che il livello tecnologico di Google sia così superiore alla media che vedere una mano non proprio pulita con un ditale di gomma in mezzo alle pagine è quasi incredibile.

Comunque, diciamo che può succedere, anche se come giustamente da notare il post di Design Observer, questa storia fa nascere qualche dubbio sulla cura messa nel processo di scansione.

Più in generale, riguardo a Google Books continuo ad avere delle riserve: troppo, in poche mani.

WebKit: a ognuno il suo

Thursday, October 8th, 2009

Il grande ppk ha torchiato tutti i browser basati su WebKit che è riuscito a trovare, per verificare se sia poi vero che la diffusione di questo motore di rendering implichi neces­sariamente una maggiore uniformità.

I risultati sono scoraggianti: non ce n’è uno uguale all’altro.

Staging con wordpress

Sunday, August 30th, 2009

Durante la sviluppo, si lavora di un sito situato ad un altro indirizzo rispetto a quello ufficiale, per ovvi motivi che non sto qui neanche a spiegare.

Questo modo di lavorare è più difficile con WordPress perché le informazioni relative all’URL del sito sono conservate nel database e quindi fuori dal controllo degli strumenti di sviluppo.

Dopo molte ricerche infruttuose mi sono imbattuto in questo post, che spiega il trucco: bisogna definire le variabili WP_SITEURLWP_HOME in wp-config.php. Anche gli altri consigli — che già seguivo — sono degni di nota e sono di applicazione più generale.

Safari 4: e il tab non c’è più!

Tuesday, June 9th, 2009

Dopo aver tanto parlato dei tab, dei suoi pro e dei suoi contro, ecco che nella versione definitiva siamo tornati alle vecchie soluzioni.

La mossa ha un sapore ambiguo: da una parte sembra che siano state ascoltate le critiche, e questo è positivo; dall’altra, però, questa raccolta del feedback non si è tradotta in una nuova sintesi ma in ripiegamento.

Chissà, forse è stato solo un test per il futuro…

Scala tipografica con YUI

Friday, June 5th, 2009

Questo vecchio articolo di Mark Boulton prende le mosse dalla tradizionale scala tipografica, ormai in uso da qualche centinaio di anni.

In quell’articolo ne viene proposta una versione per il web, tenendo conto delle peculiarità del medium. la scala è la seguente:

11px /16.5px — Body copy and leading.
24px — Main heading used as section headings on the Homepage, Portfolio homepage and entries.
18px — Headings for journal entries and portfolio subheadings.
16px — All navigational and content tertiary headings.
13px — All other headed elements.

Usando la scala di YUI ecco la mia versione, pensata per usare come dimensione del testo nei para­grafi un valore di 13px/1.231em:

/* 24px */
h1 { font-size: 182%; }
/* 21px */
h2 { font-size: 161.6%; }
/* 18px */
h3 { font-size: 138.5%; }
/* 16px */
h4 { font-size: 123.1%; }

Curiosità: in entrambe le scale viene usato l’equivalente di 13px, che è l’unica dimensione — in punti — assente nella scala originaria fra 6 e 14pt.

« Voci Precedenti