Una scritta decorativa con i CSS

Questa è la traduzione dell'articolo A Festive Type Folly di Jon Tan pubblicato originariamente su 24 Ways il 17 Dicembre 2008.

In questo articolo affronteremo la creazione con i CSS di una divertente scritta decorativa. Guardate questo esempio (potete confrontare quanto vedete sul vostro browser/sistema operativo con lo screenshot riportato qui sotto che mostra le resa su Safari). Non è un'immagine, è solo testo:

Figura 1 - Screenshot dell'esempio su Safari

Si tratta di puro abbellimento, un divertente esperimento di tipografia per il web. È simile al testo presente nell'header sul mio sito, ma è in più un link. Diversamente dai follies, le architetture del passato a cui si ispira, per realizzarlo non c'è stato bisogno del lavoro di bambini, ma solo di HTML e CSS, più una dose abbondante di Times New Roman. "Perché Times New Roman?" potreste chiedervi. Beh, dopo un po' di ore spese sperimentando cone decine di font alla ricerca di una solida consistenza di posizionamento e resa sulle varie piattaforme, Times New Roman si è rivelata l'alternativa più consistente. Per rendere le cose più interessanti ho anche voluto usare una scala tradizionale e rendere il tutto elastico usando unità di misure relative che reagiscono al ridimensionamento del testo da parte dell'utente.

Ecco le tre cose che useremo per ottenere il risultato finale:

1. Selettori discendenti
2. Posizionamento assoluto
3. Ereditarietà

HTML e selettori discendenti

Il markup potrebbe sembrare complesso a prima vista. Per i fanatici della semantica e i puristi potrebbe sembrare addirittura oltraggioso. Se siete tra questi, leggete il tutto a vostro rischio e pericolo! Ecco il codice con tanto whitespace:

<div id="type">
<h1>
  <a href="/">
    <em>2
      <span>4
        <span>w
          <span>a
            <span>y
              <span>s</span>
            </span>
          </span>
        </span>
      </span>
    </em>
    <strong>to
      <span>i
        <span>m
          <span>pre
            <span>s
              <span>s
                <span>your
                  <span>friends</span>
                </span>
              </span>
            </span>
          </span>
        </span>
      </span>
    </strong>
  </a>
</h1>
</div>

Per mantenere comunque un pizzico di semantica, il testo è racchiuso in elementi <h1> e <a>. Le due frasi, "24 ways" e "to impress your friends" sono racchiuse rispettivamente in tag <em> e <strong>. Abbracciati da queste braccia affettuose, gli elementi <span> discendenti si dispongono invisibilmente a cascata formando una certa confusione nel codice, ma offrendo dei validi agganci per le nostre regole CSS.

Così, per selezionare il "2" del nostro esempio, possiamo semplicemente scrivere #type h1 em{}. Certamente, ciò seleziona tutto quanto è all'interno di elementi <em>, ma man mano che scendiamo giù nell'albero del documento e selezioniamo altre lettere, ogni proprietà e valore di stile può essere resettata o cambiata come si desidera.

Pixel vs. Em

Prima di andare a cedere il codice CSS, dovrei dire che l'obiettivo dell'esperimento è quello di esprimere tutto in em, ovvero con un'unità di misura relativa. Tuttavia, all'inizio, uso pixel per tutti i valori, convertendo tutto in em dopo che ho finito. Ciò consente di non dover ricalcolare il valore degli em per ogni cambiamento apportato man mano che il lavoro va avanti, ma rende comunque il risultato finale elastico, senza appoggiarsi allo zoom del browser.

Per andare subito al punto potete vedere il CSS completo.

Lettere posizionate assolutamente

Se un elemento parente ha position:relative oppure position:absolute applicate ad esso, tutti gli elementi figli di quell'elemento parente possono essere posizionati assolutamente rispetto ad esso (si veda l'eccellente introduzione a questo argomento di Dave Shea). Questo è esattamente il modo in cui otteniamo la nostra scritta decorativa. Come elemento parente, anche l'elemento #type ha una font-size di 16px, una larghezza e un'altezza, alcuni stili di base con uno sfondo e bordi:

#type{
font-size: 16px;
text-align: left;
background: #e8e9de;
border: 0.375em solid #fff;
width: 22.5em;
height: 13.125em;
position: relative;
}

All'h1 viene anche assegnato uno stile di default con una font-size di 132px espressa in em (8.25) relativa ai 16px dell'elemento parente:

#type h1{
font-family: "Times New Roman", serif;
font-size: 8.25em; /* 132px */
line-height: 1em;
font-weight: 400;
margin: 0;
padding: 0;
}

Per ottenere il valore in em dividiamo la misura richiesta in pixel per la dimensione definita nella proprietà font-size dell'elemento parente. Nel nostro caso avremo:

132/16 = 8.25

Diamo anche agli elementi discendenti dell'h1 alcune proprietà di default. L'altezza di linea (line-height), lo stile e il peso sono normalizzati, sono posizionati assolutamente rispetto a #type, vengono applicati un bordo e del padding:

#type h1 em,
#type h1 strong,
#type h1 span{
line-height: 1em;
font-style: normal;
font-weight: 400;
position: absolute;
padding: 0.1em;
border: 1px solid transparent;
}

Il padding assicura che alcuni browser non dimentichino le parti delle lettere che sono tracciate al di fuori del loro container invisibile. Quando ciò avviene, IE taglierà la lettera, tagliando pure parti dei discendenti, per esempio. Il bordo è inserito per assicurare che le lettere abbiano un layout. Senza un layout il posizionamento può essere problematico. IE6 non rispetterà il colore transparent per il bordo (usa pertanto il colore del tasto), ma per tutti gli altri aspetti rende bene l'esempio. Potete giocare un po' per aggiustare le cose su quel browser, ma la cosa sembrava fuori dallo scopo di questo articolo.

Una volta che si siano stabiliti questi default, il resto è tutta questione di provare e riprovare fin quando tutto non si sistema come desideriamo. Come esempio veloce vi propongo il modo in cui il numero "2" viene posizionato:

#type h1 a em{
font-size: 0.727em; /* (2) 96px */
left: 0.667em;
to

p: 0;
}

Ogni elemento della scritta è posizionato esattamente nel modo che potete vedere nel CSS completo. Quando si convertono i pixel in em, si imposta prima la proprietà font-size. Poi, dal momento che sappiamo cos'è, calcoliamo la posizione sugli assi x e y.

Ereditarietà

L'ereditarietà nei CSS mi ha provocato qualche mal di testa, molto tempo fa, quando l'ho affrontata per la prima volta. Poi però mi ci sono quasi affezionato. Ciò che in fondo implica è che un elemento figlio eredita le caratteristiche dell'elemento parente. Per esempio:

1. Diamo all'elemento #type una font-size di 16px.
2. Per #type h1 abbiamo leggermente modificato le cose impostando la font-size a 8.25em. Siginfica che #type h1 ha ora una dimensione (font-size) computata di 8.25 x 16px = 132px.
3. Ora, tutti gli elementi figli di #type h1 nell'albero del documento erediteranno una font-size di 132px a meno che non specifichiamo un valore diverso, come abbiamo fatto per #type h1 em a.

Il numero "2" nell'esempio, selezionato con #type h1 em a, è impostato a 96px con il posizionamento per gli assi x e y calcolati relativamente a questa cifra. Così, la posizione left di 0.667em è 0.667 x 96 = 64px, all'incirca.

Un modo per guardare all'ereditarietà è quello di considerarla come una cascata di dipendenze. Nel nostro esempio, la dimensione del font computata di un certo elemento dipende da quella dell'elemento parente, e la posizione assoluta su x e y dipende dalla dimensione computata del font dell'elemento stesso.

Colori dei link

Gli stessi selettori discendenti che usiamo per per impostare e posizionare la scritta sono usati anche per applicare il colore combinadoli con pseudo-selettori come :focus e :hover. Poiché i selettori discendenti sono disponibili, possiamo lavorare su qualunque lettera. Per prima cosa disabilitiamo la sottolineaatura:

#type h1 a:link,
#type h1 a:visited{
text-decoration: none;
}

Nel nostro esempio il "24" ha uno unico e specifico stato di default (il colore):

#type h1 a:link em,
#type h1 a:visited em{
color: #624;
}

Il resto della parola "Ways" ha colori differenti, che condivide con la grande "s" nella parola "impress":

#type h1 a:link em span span,
#type h1 a:visited em span span,
#type h1 a:link strong span span span span,
#type h1 a:visited strong span span span span{
color: #b32720;
}

"24" cambia negli stati :focus, :hover e :active. Tuttavia, tutto il testo "24 Ways" e la grande "s" in "impress" hanno lo stesso stile in questa istanza:

#type h1 a:focus em,
#type h1 a:hover em,
#type h1 a:active em,
#type h1 a:focus em span span,
#type h1 a:hover em span span,
#type h1 a:active em span span,
#type h1 a:focus strong span span span span,
#type h1 a:hover strong span span span span,
#type h1 a:active strong span span span span{
color: #804;
}

Se un selettore discendente ha uno stato :link e :visited impostato come pseudo-elemento, ha bisogno anche di avere impostati i corrispondenti stati :focus, :hover e :active.

Una nota finale sulla tipografia

Dalle griglie al leading di base fino ai web fonts, e anche sul posizionamento assoluto, c'è un sacco di roba che possiamo fare per trattare la tipografia sul web con amore e rispetto. Tuttavia, esperimenti come questo possono evidenziare i problemi di rasterizzazione e resa che limitano la nostra capacità di ottenere risultati realmente raffinati e rifiniti. A livello di sistemi operativi, le differenze nella resa dei font sono estreme, e anche tra diverse situazioni su Windows - dalla resa standard a ClearType, per esempio - le differenze possono essere evidenti. Aggiungete il fatto che grosse variazioni nella qualità degli schermi e anche della carta su cui stampiamo possono essere fonte di differenze di resa. Confrontate come rende il nostro esempio su Safari 3.2.1 e Mac OS X 10.5.5 (figura in alto) con la resa su IE7/Windows XP (figura in basso). Entrambi sono visualizzati su un Apple Cinema Display HD (LCD) di 23":

Figura 2 - Screenshot su Safari/Mac

Figura 3 - Screenshot su IE7/Windows

Gli sviluppatori di browser continuano a fare grandi progressi. Tuttavia, quelli di noi lavorano con la tipografia sul web hanno bisogno di più consistenza e quantità per evitare tecnologie come Flash e far evolvere la tipografia sul web. Sebbene la tipografia sul web venga inevitabilmente paragonata a quella per la carta, ha il potenziale di arrivare alla stessa qualità in modo diversi. Forse un giorno, le lettere dei nostri font preferiti, così ben rifinite per lo schermo, saranno rese con la stessa precisione con cui sono state progettate dai loro creatori. È il mio augurio per il nuovo anno.