Guida al CSS per EPUB - Formattare il paragrafo

Nella puntata precedente abbiamo visto una serie di regole per la modifica del testo: come impostare il font, scegliere la dimensione del testo, il suo colore e applicare alcuni tipi di decorazione a una o più parole. Proseguendo col discorso, vedremo oggi le regole per modificare interi blocchi di testo, ossia i singoli paragrafi o l’intera pagina del nostro EPUB: regole che normalmente applicheremo al tag <p>, oppure alla classe attribuita al tag <p>, ma anche regole che si possono applicare alla classe del tag <div>, che racchiude il contenuto dell’intero capitolo, se abbiamo seguito la struttura proposta in precedenza.

line-height

Come forse si potrà intuire già dal nome questa proprietà ci permette di impostare l’altezza delle linee nel nostro paragrafo o nella nostra pagina: maggiore è il valore che assegneremo a questa proprietà, maggiore sarà lo spazio tra una linea e l’altra (la famosa interlinea, insomma). Le unità di misura utilizzabili sono quelle che abbiamo già visto, ma in linea di massima è meglio usare solo le percentuali, oppure gli em, assieme a questa proprietà, così da rendere più dinamico lo spazio tra le linee: se è espresso in percentuale o in em, si adatterà di volta in volta alla dimensione del carattere, invece di rimanere fisso, come accadrebbe usando i pixel. Ad esempio,

line-height: 150%;

line-height: 2em;

Impostando una interlinea pari a due caratteri, questa dimensione si manterrà costante, qualunque sia la dimensione del carattere. Nei browser e in buona parte dei dispositivi, il valore base di questa proprietà è 120%.

text-align

Questa proprietà permette di formattare il testo di un paragrafo o di una pagina, allineandolo a destra, a sinistra, al centro, oppure giustificandolo: una proprietà che avremo utilizzato migliaia di volte, lavorando con Word o Writer. I valori che possiamo assegnare sono quattro e corrispondono ai quattro possibili stili di formattazione: right, left, center, justify. Questo è un tipico attributo, che vorremo assegnare all'intero testo e non a ogni singolo paragrafo, ed è di conseguenza un buon candidato per essere utilizzato con la classe di un eventuale <div>, che racchiude l’intero contenuto del capitolo. Esempi di utilizzo:

text-align: left;

text-align: justify;

il primo allineerà il testo a sinistra, il secondo lo giustificherà su entrambi i margini.

text-indent

Questa proprietà la utilizzeremo solitamente assieme al tag <p>, per assegnarla in modo uniforme a tutti i nostro paragrafi: è infatti una proprietà che ci permette di impostare il rientro della prima riga di testo in un paragrafo (e solo la prima riga). Tipicamente, attribuiremo a questa proprietà un valore espresso in pixel o in em, con una preferenza per la seconda soluzione: un rientro di 3em, pari a tre caratteri, resterà costante anche variando la dimensione del carattere, mentre un rientro di 10 pixel non si adatterà a un eventuale ingrandimento del testo (ricordiamo che praticamente tutti i dispositivi di lettura danno la possibilità di ingrandire o rimpicciolire il testo). Una regola

p{

    text-indent: 4em;

}

assegnerà un rientro pari a quattro caratteri alla prima riga di tutti i paragrafi (se ci siamo ricordati di racchiudere ciascuno di essi in un tag <p>).

:first-letter

Questa è una pseudoclasse CSS, che può essere abbinata a un tag e ci permette di assegnare uno stile speciale alla prima lettera di ogni paragrafo. Un suo uso tipico è

p:fist-letter{

    //regole da attribuire alla prima lettera

}

e all'interno delle parentesi graffe inseriremo poi le proprietà che la prima lettera del paragrafo dovrà possedere. Se vogliamo essere ancora più specifici, e sogniamo uno EPUB con la prima lettera di ogni capitolo miniata, come un manoscritto medievale, dovremo prima di tutto assegnare una classe particolare al primo paragrafo, ad esempio <p class=”primo”>, e poi useremo una struttura del tipo

.primo:first-letter{

    //regole da assegnare alla prima lettera

}

così da modificare soltanto la prima lettera dei paragrafi che possiedono la classe “primo”. Una cosa da ricordare è che non dovremo lasciare spazi vuoti tra il nome del tag (o della classe) e i due punti di :first-letter. Fra le parentesi graffe, poi, potremo utilizzare qualsiasi regola già vista per il testo: assegnare font particolari, ingrandire il testo, renderlo in grassetto, colorarlo, ma anche colorare il suo sfondo (lo vedremo a breve) e così via.

:first-line

Identico al precedente, ma si applica alla prima riga del testo nel tag con cui lo stimo utilizzando. Ad esempio,

p:first-line{

    //regole da assegnare alla prima riga

}

ci permetterà di assegnare uno stile particolare alla prima riga di ogni paragrafo. Vale quanto già detto in precedenza, con un avvertimento supplementare: se vogliamo attribuire più stili a uno stesso paragrafo (ad esempio uno stile generale per il paragrafo, uno per la prima riga e un terzo stile per la prima parola), è importante scrivere le varie regole in ordine, dalla più generale alla più particolare. Nel foglio di stile, per prima scriveremo la regola da applicate a tutti i paragrafi, poi scriveremo le regole da applicare solo ad alcuni paragrafi, poi quelle da applicare alla prima linea di alcuni paragrafi, infine quelle da applicare alla prima lettera. Questo vale per qualsiasi tag ed è un principio che è sempre bene ripetere.

background-color

Questa proprietà è utilizzata per assegnare un colore allo sfondo del tag, come è possibile intuire dal nome stesso della proprietà: se color serviva a colorare il testo, questa serve a colorare la superficie su cui il testo si trova. Possiamo assegnarla a una singola riga, per ricreare un effetto da evidenziatore, ma molto più spesso ci troveremo a utilizzarla per l’intera pagina, oppure per singoli paragrafi o blocchi della pagina: ad esempio, per assegnare un colore particolare allo sfondo del titolo del paragrafo, così da marcarne la differenza rispetto al contenuto, ma possiamo anche assegnare un colore particolare allo sfondo della prima lettera del paragrafo, oppure della prima riga.

Qualunque sia il modo in cui deciderete di utilizzarla, le regole sono le stesse che abbiamo già visto per color: il colore può essere espresso con un nome in inglese (se è uno dei colori principali), oppure con un numero esadecimale, o infine con un blocco rgb() o rgba(), al cui interno indicheremo le quote dei tre colori fondamentali (rosso, verde e blu) da miscelare, per ottenere il colore che ci serve. Niente di nuovo, insomma. Di conseguenza,

background-color: red;

background-color: #FF0000;

background-color: rgb(255, 0, 0);

sono tre modi per indicare il colore rosso, da attribuire allo sfondo di un elemento.

background-image

Per chi non si accontenta dei colori, è possibile anche inserire una immagine come sfondo per un elemento, oppure per tutta la pagina: la proprietà background-image ci permette di fare proprio questo. Ad esempio,

background-image: url(../Images/sfondo.jpg);

ci permetterà di inserire l’immagine “sfondo.jpg” come sfondo per il tag a cui avremo assegnato questa proprietà. Tra la parentesi di url(), ovviamente, dovremo indicare il punto in cui si trova la nostra immagine, che di solito dovrebbe essere la cartella Images del nostro EPUB: se si trova in un altro posto, modificheremo l’indirizzo di conseguenza.

Utilizzare una immagine come sfondo, però, presenta alcune complicazioni, che è bene tenere presente. Se l’immagine è più piccola della superficie da coprire, normalmente sarà riprodotta a scacchiera, da sinistra verso destra e dall’altro verso il basso, fino a riempire tutto lo spazio disponibile. Se state utilizzando una piccola immagine, che simula la superficie di una pergamena o di un foglio di carta, questo comportamento potrebbe andarvi bene; in altri casi, però, potrebbe risultare alquanto molesto. Per controllare (o impedire) la ripetizione della nostra immagine, dobbiamo utilizzare una seconda proprietà, subito dopo background-image, ossia

background-repeat

A questa proprietà possiamo assegnare quattro valori: no-repeat, repeat, repeat-x, repeat-y. Il valore repeat è quello che possiede in partenza e prevede che l’immagine sia ripetuta su tutto lo schermo; il valore no-repeat impedisce che l’immagine sia ripetuta; repeat-x ripete l’immagine soltanto da sinistra verso destra, cioè in orizzontale; repeat-y la ripete soltanto in verticale. Ad esempio,

background-image: url(../Images/sfondo.jpg);

background-repeat: repeat-x;

è una combinazione che ci permette di inserire come sfondo l’immagine “sfondo.jpg”, ripetendola a oltranza da sinistra verso destra.

background-position

Dopo aver caricato una immagine come sfondo e aver deciso se e come ripeterla, per coprire la superficie a disposizione, ci resta da vedere ancora una cosa, prima di chiudere il capitolo-immagini, e cioè come posizionarla all'interno di un elemento. La proprietà background-position si occupa proprio di questo.

Background-position richiede due valori: il primo è il punto di partenza orizzontale, il secondo è il punto di partenza verticale. Questi due valori possono essere espressi usando parole-chiave o unità di misura: in teoria si potrebbero usare anche le percentuali, ma è una soluzione che richiede calcoli troppo complicati e solitamente non ne vale la pena. Le parole-chiave, per il primo valore, sono left, center e right, mentre per il secondo valore sono top, center e bottom. Scrivendo ad esempio

background-position: left top;

il punto di partenza della nostra immagine sarà l’angolo in alto a sinistra dell’elemento. Scrivendo invece

background-position: center center;

il punto di partenza della nostra immagine sarà il centro esatto dell’elemento. E così via, per tutte e altre combinazioni. Se abbiamo scelto una immagine ripetuta, il punto indicato da background-position è il punto di partenza della ripetizione; se non dovrà essere ripetuta, invece, sarà il punto in cui si troverà l’immagine.

Utilizzando unità di misura, il principio è lo stesso, ma esprimeremo la posizione di una immagine indicando la sua distanza dall'angolo in alto a sinistra dell’elemento. Di conseguenza,

background-position: 5px 10px;

inserirà la nostra immagine a cinque pixel dal bordo sinistro e a dieci pixel dal bordo superiore del nostro elemento: in pratica, sarà spostata di cinque pixel verso destra e di dieci verso il basso, rispetto ai margini dell’elemento. Un numero negativo, invece, la sposterà nella direzione opposta:

background-position: -5px -10px;

collocherà il punto di partenza di una immagine cinque pixel sulla sinistra e dieci in alto, rispetto al suo elemento; in pratica, comincerà all'esterno dell’elemento.

Proseguiremo nella prossima puntata, parlando di margini e bordi della pagina.

Guida al CSS per EPUB – Formattare il testo

Nella puntata precedente abbiamo visto la struttura generale di una regola CSS: prima di tutto indichiamo il nome del tag e/o della classe a cui la regola si applicherà, poi apriamo una parentesi graffa, elenchiamo una serie di coppie formate da una proprietà e l’attributo da assegnare a quella proprietà, infine chiudiamo la parentesi graffa. Le proprietà che possiamo impostare sono parecchie, soprattutto quando stiamo lavorando sulla pagina di un normale sito web; nel caso di uno EPUB, però, diverse di queste proprietà avrebbero poco senso o poca utilità, per cui possiamo concentrarci su un numero ristretto di esse, cioè quelle che normalmente ci serviranno per formattare la nostra pagina e il nostro testo. Oggi partiremo dal testo.

Premessa generale. Il CSS utilizza più unità di misura, per definire la dimensione del testo, della pagina, i margini, eccetera, e non tutte queste unità di misura sono intuitive, come significato. Il pixel è probabilmente la più comune e la più semplice: se assegnate a qualcosa un valore di 20px (venti pixel), quell'elemento avrà sempre e comunque una dimensione di venti pixel, a prescindere da tutto il resto. A titolo di esempio, la dimensione base dei caratteri in un qualsiasi browser è di 16px, cioè sedici pixel (non lasciate spazi vuoti tra il numero e px, la sigla di pixel) e molti lettori di e-book seguono questa convenzione.

Lo em è una unità di misura più esotica ed equivale alla dimensione base dei caratteri che, come abbiamo appena visto, di solito è 16px, ossia sedici pixel. Questa unità è usata spesso per indicare la dimensione del rientro alla prima riga (se lo utilizziamo): un rientro di 3em, ad esempio, imposterà un rientro di tre caratteri, mentre 5em sarà cinque caratteri. Se a un titolo assegniamo una dimensione di 2em, lo renderemo grande il doppio rispetto ai caratteri normali, mentre un valore di 0.5em renderà il nostro testo grande la metà del normale.

La percentuale funziona come lo em, cioè determina la dimensione dell’elemento in rapporto a un altro valore, ma con una differenza: nel caso dello em, il valore di riferimento è sempre la grandezza del carattere, mentre nel caso della percentuale il riferimento varia, a seconda dei casi. Se stiamo impostando la dimensione di un carattere, e lo facciamo in percentuale, dicendo ad esempio che il testo deve essere il 150%, allora il risultato sarà equivalente a 1.5em; se però usiamo la percentuale per determinare la larghezza della pagina, il valore di riferimento non sarà il carattere, ma la grandezza dello schermo.

Abbandoniamo adesso il discorso in astratto sulle unità di misura e guardiamo come assegnare stili al testo, che è poi l'argomento principale di oggi: le unità di misura ritorneranno, ma inserite in un contesto più preciso. La prima cosa che probabilmente vorremo impostare, nel nostro EPUB, è il font, ossia il tipo di carattere da utilizzare (utilizzo la parola font al maschile, perché mi riferisco al file in cui sono contenuti i caratteri; il file, per l’appunto).

font-family

Normalmente, possiamo utilizzare nel nostro EPUB qualsiasi font preferiamo, più o meno come accade quando lavoriamo con un programma quale Word o Writer. Per assegnare il font nel foglio di stile, useremo la proprietà font-family, a cui assegneremo il nome del font come valore. Ad esempio,

p {

    font-family: “Times New Roman”;

}

assegnerà il font “Times New Roman” a tutto il testo racchiuso in un tag <p>. Il nome del font deve essere racchiuso tra virgolette, se è composto da più di una parola, ma non è obbligatorio se il suo nome è di una sola parola: Times New Roman dovrà quindi essere racchiuso tra virgolette, mentre Verdana può essere scritto senza virgolette.

Possiamo specificare un solo tipo di font, come abbiamo fatto in questo caso, ma è più prudente indicarne almeno due o tre, in ordine di preferenza: al primo posto metteremo il font che preferiamo e poi, in ordine, le opzioni di riserva, separate da una virgola. Questo è importante, perché non tutti i dispositivi di lettura possiedono tutti i tipi di font: il Times New Roman è dappertutto, ma font più insoliti potrebbero non essere disponibili su un determinato dispositivo. Per limitare i danni, è bene dunque offrire una serie di font di riserva, via via più generici, che saranno utilizzati se i font più specifici mancheranno. Ad esempio, la regola

p {

    font-family: Arial, Helvetica, sans-serif;

}

darà al lettore un ordine di questo tipo: “per visualizzare il testo contenuto nel tag <p>, usa il font Arial; se non è disponibile, usa il font Helvetica; se non hai neppure quello, usa un qualsiasi font di tipo sans-serif”. Serif, sans-serif e monospaced sono tre famiglie base di font e rappresentano la soluzione più generica possibile: è bene indicarle come ultima alternativa, in una lista di font. Serif è un font con piccole decorazioni alla fine della lettera ed è usato normalmente per il testo di una pagina: esempi di questa famiglia sono Times New Roman, Georgia, Garamond, Baskerville e così via. Sans-serif è un font più semplice, senza decorazioni, ed è solitamente usato per i titoli: esempi sono Arial, Helvetica, Verdana, Tahoma, eccetera. Monospaced è un font in cui tutti i caratteri occupano lo stesso spazio e conferisce al testo un aspetto da “vecchia macchina da scrivere”: esempi sono Courier, Lucida Console, Monaco, eccetera.

Se è fondamentale che il nostro testo sia riprodotto con un particolare tipo di font e vogliamo essere sicuri che sia disponibile su ogni dispositivo, dovremo incorporarlo nel nostro e-book. Ho già parlato altrove di come incorporare font in uno EPUB, per cui vi rimando a quell'articolo.

color

Una volta stabilito il font, potremmo aver voglia di colorare il nostro testo, invece di lasciarlo nel solito nero. La proprietà da modificare, in questo caso, è color, a cui dovremo assegnare un valore corrispondente al colore che ci interessa, il che potrebbe essere un poco complicato. Il colore, nel CSS, può essere indicato in almeno tre modi: per i colori base, è di solito disponibile un nome (in inglese); per colori più particolari, sfumature, o per essere sicuri che il colore sia compreso ovunque, possiamo utilizzare il suo valore esadecimale, oppure indicare la combinazione di rosso, verde  blu che lo producono. Vediamo come funziona.

Per alcuni colori, il nome è sufficiente: possiamo così scrivere

color: red;

color: blue;

color: green;

e all'elemento corrispondente sarà assegnato il colore che vogliamo. In altri casi, però, la vita non è così semplice e dovremo utilizzare sistemi più complicati, per indicare il colore.

Il numero esadecimale è la forma più vecchia, utilizzata fin dai primordi del web per indicare il colore di un elemento HTML: il colore è così rappresentato da sei numeri in base sedici, che corrispondono alla quantità di rosso, verde e blu da mischiare, per ottenere il colore corrispondente. Alcuni esempi sono:

color: #6600FF;

color: #3E8988;

In questi casi, il simbolo # indica che il valore seguente è un esadecimale, il numero seguente esprime la miscela di colori necessari. Potete utilizzare un qualsiasi programma di grafica, come Photoshop, GIMP o altri, per scoprire quale sia il numero esadecimale corrispondente al colore che vi interessa.

Altra possibilità è indicare in modo più normale i valori di rosso, verde e blu, utilizzando per ciascuno di essi una percentuale, oppure un numero compreso tra 0 e 255. Ad esempio:

color: rgb(255, 255, 255);

color: rgb(100%, 100%, 100%);

rappresentano lo stesso colore, ma con due formule diverse. In entrambi i casi, dovremo utilizzare la struttura rgb() come base e scrivere, al suo interno, i tre valori, divisi da una virgola. È la soluzione migliore, per inserire un colore, perché ci permette il massimo controllo sul risultato, ma soprattutto può essere facilmente estesa, per aggiungere un quarto valore, ossia la trasparenza. Dubito che vorrete mai scrivere un capitolo del vostro libro, utilizzando colori trasparenti, ma sappiate che è possibile: basta utilizzare rgba() e inserire, come quarto attributo, un numero decimale da 0 a 1, dove 0 indica trasparenza completa (invisibilità, insomma) e 1 indica opacità completa. Ad esempio,

color: rgba(255, 0, 0, .5);

produrrà un colore rosso che è per metà trasparente. Anche in questo caso, chiedete aiuto al vostro programma di grafica preferito, per conoscere i valori da assegnare a ogni colore.

font-size

Per modificare la dimensione del font, possiamo utilizzare la proprietà font-size, che è molto semplice da usare: tutto ciò che dobbiamo fare è indicare la dimensione da assegnare al font, usando una delle unità di misura già menzionate. Ad esempio

font-size: 1.2em;

font-size: 120%;

font-size: 20px;

e così via. C’è solo un avvertimento, riguardo al corretto utilizzo di questa proprietà, se esprimiamo la dimensione in percentuale o in em: se modifichiamo per la prima volta la dimensione del font, allora il valore di riferimento sarà quello base (di solito 16 pixel); se abbiamo già modificato la dimensione, allora il valore di riferimento sarà quello che abbiamo assegnato all'ultimo tag “padre”, secondo l’albero genealogico che abbiamo visto alla fine della precedente.

font-style

Una proprietà opzionale è font-style, che può essere utilizzata per rendere corsivo il testo, oppure per annullare lo stile corsivo in un tag figlio, se lo avevamo assegnato al tag padre. Questa proprietà ha tre possibili valori: normal, che toglie il corsivo, italic, che assegna il corsivo, oblique, che di fatto è identica a italic, ma non si usa quasi mai. Ad esempio,

font-style: italic;

font-style: normal;

dove il primo rende corsivo il testo e il secondo rimuove lo stile corsivo.

font-weight

Altra proprietà opzionale è font-weight, che funziona come font-style, ma si applica al grassetto, invece che al corsivo. In questo caso, però, i valori possibili sono soltanto due: normal e bold, dove il primo rimuove il grassetto e il secondo lo applica al testo. In pratica,

font-weight: normal;

font-weight: bold;

sono le uniche due combinazioni possibili per questa proprietà.

text-transform

A volte può essere necessario trasformare le lettere di una o più parole, per renderle maiuscole o minuscole: la proprietà text-transform si occupa proprio di questo. I valori possibili per questa proprietà sono quattro: uppercase, lowercase, capitalize e none. Come è facile da intuire, uppercase rende il testo maiuscolo, lowercase lo rende minuscolo e capitalize rende maiuscola soltanto la prima lettera di ogni parola, mentre none annulla ogni modifica. Le combinazioni sono dunque

text-transform: uppercase;

text-transform: lowercase;

text-transform: capitalize;

text-transform: none;

ed è una proprietà che probabilmente vi tornerà comoda soltanto per i titoli dei capitoli e poco altro, ma è sempre utile conoscerne l’esistenza.

font-variant

Altra proprietà estremamente specifica, che di fatto serve solo a creare testo in maiuscoletto. Scrivendo

font-variant: small-caps;

otterrete un testo in lettere maiuscole, ma di piccole dimensioni: il maiuscoletto, per l’appunto, che può essere usato per aggiungere una certa enfasi ad alcune parole, ma soprattutto per le sigle.

text-decoration

Una proprietà fondamentale, senza la quale non potremmo vivere, da cui ogni forma di tipografia digitale dipende: ecco cosa NON è text-decoration. Scherzi a parte, è una proprietà che raramente vi troverete a dover utilizzare (o almeno spero), ma può essere utile spendere una frazione della propria memoria per immagazzinarla, nel caso in cui dovesse servire, in un futuro lontano. Questa proprietà assegna una specie di decorazione al testo o alla parola a cui è assegnata, anche se la idea di “decorazione” che voi avete è probabilmente molto diversa da quella di chi ha progettato questa proprietà. I valori possibili sono underline, overline, line-through, blink, none e possono essere combinate tra loro, applicandone più di una allo stesso elemento. Undeline traccia una linea sotto al testo, overline ne traccia una al di sopra del testo, line-through ne traccia una attraverso il testo, blink farà lampeggiare fastidiosamente il testo e none abolirà decorazioni precedenti. Ad esempio,

text-decoration: line-through;

text-decoration: overline underline;

text-decoration: none;

e così via, dove soltanto il buon gusto potrà costituire un limite alla vostra creatività.

text-shadow

Chiudiamo con una vera decorazione, che certo può avere un buon impatto visivo, se usata bene, ma che potrebbe non funzionare su tutti i lettori, essendo una novità abbastanza recente: dovrete sperimentarla sul campo. Questa proprietà è text-shadow, che aggiunge un effetto-ombra al testo a cui è assegnata: in pratica, se la applicate a un titolo, il titolo sarà accompagnato da un’ombra, che darà una vaga illusione di profondità e tridimensionalità (con un poco di fantasia da parte di chi la guarda).

Per usarla, dovrete assegnare una discreta sfilza di valori, ad esempio

text-shadow: -4px 4px 3px #999999;

dove il primo valore corrisponde alla posizione orizzontale dell’ombra, il secondo alla posizione verticale, il terzo al tasso di sfocatura e il quarto al colore. Nel mio esempio, l’ombra è spostata a sinistra di 4 pixel (valori negativi la spostano a sinistra, valori positivi la spostano a destra, rispetto alla parola che la proietta), verso il basso di 4 pixel (valori positivi la spostano verso il basso, lavori negativi verso l’alto), è abbastanza sfocata (con 0 pixel è nitida, ogni punto in più ne aumenta la sfocatura) e ha un colore grigio. Il modo migliore per dare un senso a tutti i vari numeri è sperimentare di persona, se siete interessati a usare questa proprietà.
Continueremo alla prossima puntata.

Guida al CSS per EPUB – Il foglio di stile

Nella puntata precedente abbiamo visto come strutturare una pagina, per renderne più semplice la modifica e la formattazione attraverso le regole del CSS. Oggi, invece, cominceremo a vedere cosa siano queste regole del CSS: per poterlo fare, osserveremo prima di tutto la struttura di un foglio di stile.

Come ho scritto in precedenza, il CSS è un insieme di regole, che prescrivono al browser il modo in cui una pagina web debba essere visualizzata. In un normale sito, possiamo utilizzare il CSS per svariate operazioni di design, dalle più basilari, come modificare font, colori e inserire immagini di sfondo, fino alle più complesse, come assemblare l’intero layout del sito, distribuendo il contenuto delle pagina su una, due, tre o più colonne, inserendo barre laterali di navigazione, header, footer e anche semplici animazioni, per rendere più allegra, vivace o di pessimo gusto la nostra pagina. Dato però che qui mi sto occupando del CSS utilizzabile in uno EPUB, tralascerò molti di questi aspetti più avanzati e mi concentrerò invece sugli aspetti più semplici, ossia quelle che funzioneranno su qualsiasi dispositivo di lettura e per qualsiasi tipo di e-book. Se volete, però, nulla vi vieta di trattare le pagine del vostro libro come se fossero pagine web vere e proprie e sbizzarrirvi con le più recenti funzionalità aggiunte al CSS, ma sappiate che, al momento, non avrete alcuna garanzia che tutti i dispositivi di lettura supporteranno il vostro stile innovativo: dovrete sperimentare sul campo e sperare in bene.

Dopo questa introduzione, cominciamo a vivisezionare un foglio di stile. Un foglio di stile, come dicevo, è formato da una serie di regole, tutte strutturate allo stesso modo, cioè così:

h2 {

    font-family: Verdana, Arial, Helvetica, sans-serif;

    text-align: center;

    color: gray;

}

I colori li ho aggiunti io, per semplificare la spiegazione (chiedo scusa ai daltonici), ma per il resto è un esempio di normale regola, come potrete trovarne in qualsiasi foglio di stile.

L’elemento che ho colorato in rosso, cioè h2, è il nome del tag a cui questa regola dovrà essere applicata, nel caso specifico h2: il suo nome completo, come lo troviamo in una pagina HTML, sarebbe <h2> ma, come possiamo vedere, nel foglio di stile utilizzeremo solo la parte interna del nome, eliminando < e >. Subito dopo questo elemento, inseriremo due parentesi graffe, al cui interno si troveranno tutte le regole di stile da applicare alla porzione di testo o di pagina racchiusa da quel tag.

L’elemento colorato in blu è la proprietà che vogliamo modificare, attraverso questa regola. Ogni elemento possiede un grande numero di proprietà, che vanno dal colore, all'allineamento  ai margini, e così via, e ognuna di queste può essere modificata liberamente da una regola in CSS. Font-family, ad esempio, è la proprietà che determina il tipo di font da utilizzare per un elemento testuale. Ogni proprietà deve essere seguita dai due punti.

L’elemento colorato in verde, infine, è il valore che vogliamo assegnare a un certa proprietà. Se stiamo modificando la proprietà color, ad esempio, il valore corrisponderà al nuovo colore da assegnare all'elemento  mentre la proprietà font-family avrà come valore uno o più tipi di font. Ogni valore deve essere chiuso da un punto e virgola, a segnare che quella regola si è conclusa.

Oltre che a un tag, una regola CSS può essere applicata anche a una classe, oppure a una combinazione tag + classe, o infine a più tag contemporaneamente (o più combinazioni tag + classe contemporaneamente). Vediamo alcuni esempi.

p {

    color: red;

}

Questa regola applica il valore red alla proprietà color di tutto ciò che è racchiuso all'interno di un tag <p>: in pratica, colora di rosso il testo di tutti i nostri paragrafi, indiscriminatamente.


.paragrafo {

    color: red;

}

Questa regola applica il valore red alla proprietà color di tutto ciò che è racchiuso all'interno di un tag che possiede l’attributo class=”paragrafo”, qualunque sia il tipo di tag (<a class=”paragrafo”>, <p class=”paragrafo”>, <span class=”paragrafo”>, eccetera). Come possiamo vedere, il nome di una classe è preceduto da un punto, quando è utilizzato per una regola CSS.

p .paragrafo {

    color: red;

}

Questa regola applica il valore red alla proprietà color di tutto ciò che è racchiuso all'interno di un tag <p>, che possieda l’attributo class=”paragrafo”, cioè a tutti i tag <p class=”paragrafo”>. Se nel nostro testo è presente un tag <p class=”altro”>, la regola non si applicherà, perché è richiesta la presenza contemporanea sia del tag <p> che della classe “paragrafo”.

p, h1 {

    color: red;

}

Questa regola applica il valore red alla proprietà color di tutto ciò che è racchiuso all'interno di un tag <p> o di un tag <h1>: come vediamo, per applicare la stessa regola a più tipi di tag, basta separare i loro nomi con una virgola.

p .paragrafo, h1 .titolo {

    color: red;

}

Questa regola, infine, applica il valore red alla proprietà color di tutto ciò che è racchiuso all'interno di un tag <p> con un attributo class=”paragrafo”, o all'interno di un tag <h1> con un attributo class=”titolo”. In questo caso, ogni coppia tag + classe sarà separata da una virgola.

Come si può capire da questi esempi, unendo fra loro più tag e più classi si possono creare regole parecchio complesse e dettagliate, che si applicano soltanto a sezioni ben determinate delle nostre pagine. Tutto ciò può sembrare parecchio confuso, a prima vista, e magari anche a seconda vista, ma è solo una questione di pratica: di fatto, possiamo utilizzare tag e classi come mattoncini Lego e combinarli tra loro come preferiamo, per costruire lo stile più adatto al nostro ebook. Vedremo più avanti alcuni esempi concreti di foglio di stile.

Per concludere questa introduzione, c’è un ultimo fattore da considerare, quando lavoriamo sul CSS: l’effetto a cascata. Una normale pagina HTML è composta da un gran numero di tag, incasellati gli uni dentro gli altri: abbiamo tag <div> che contengono tag <h2> e <p>, abbiamo tag <p> che contengono tag <a>, <em> e <span>, e così via. Lo abbiamo visto nella puntata precedente, parlando di come strutturare la pagina. In una struttura di questo tipo, il tag più esterno è il padre, mentre i tag al suo interno sono i figli (oppure madre e figlie, se preferite un approccio femminile: non fa alcuna differenza): se la nostra pagina è

<body>

  <div class=”pagina”>

    <div class=”titolo”>

      <h2></h2>

    </div>

    <div class=”testo”>

      <p></p>

      <p></p>

      <p></p>

    </div>

  </div>

</body>

, il tag <body> sarà il padre di tutti, perché tutti gli altri tag sono al suo interno, ed è quindi il vertice della piramide. Subito sotto di lui c’è il figlio diretto, cioè <div class=”pagina”>, seguito poi dai suoi due figli diretti, ossia <div class=”titolo”> e <div class=”testo”>, e così via, fino alla fine dell’albero genealogico, cioè fino ai tag che non hanno altri tag al proprio interno. Se abbiamo impaginato bene il file, il rientro a inizio riga ci aiuterà visivamente a seguire la piramide dei tag.

A cosa serve tutta questa struttura? E cosa c’entra l’effetto a cascata? Semplice: tutti gli attributi che impostiamo per un tag padre si ripercuoteranno anche sui suoi tag figli. Se il tag <div class=”pagina”> ha un font Arial, anche tutti i suoi figli avranno un font Arial. Se non vogliamo che un tag figlio erediti un certo attributo dal padre (o dal nonno), dovremo sovrascrivere quell'attributo, ossia assegnare al tag figlio un valore diverso per quell'attributo. Per cambiare il font, ad esempio, dovremo assegnare al figlio un valore di font-family diverso da quello che erediterebbe dal padre: in questo modo, la sua eredità sarà ignorata e a prevalere sarà il valore che abbiamo assegnato direttamente a quel tag, non quello che riceverebbe dai tag più in alto nella scala gerarchica della pagina.

Nella prossima puntata proseguiremo con lo studio delle regole CSS, accompagnate da qualche esempio più concreto.

Guida al CSS per EPUB – Struttura della pagina

Nella puntata precedente ci siamo dedicati a una presentazione generale del CSS, imparando inoltre come aggiungere un foglio di stile alla nostra pagina. Prima di cominciare a scrivere il foglio di stile, e aggiungere al nostro testo una serie di formattazioni belle, strane o di cattivo gusto, dovremo però assicurarci che la nostra pagina sia pronta a farsi formattare, senza opporre resistenza, il che no è sempre così automatico. Vediamo dunque una struttura ottimale per le pagine dei nostri EPUB.

Lo schema di base di un file HTML dovrebbe ormai esserci familiare:

<html>

<head>

  <title></title>

</head>

<body>

</body>

</html>

Questo è il minimo indispensabile, lo scheletro su cui tutto il resto sarà costruito:

<html> è il tag che racchiude tutta la pagina.

<head> racchiude quella parte di pagina che, normalmente, non è visualizzata, ma che contiene una serie di regole, da utilizzare per la visualizzazione: è qui che inseriremo il CSS ed è qui che, in una normale pagina web, troveremo anche il JavaScript (in genere, ma non necessariamente: esistono almeno due scuole di pensiero, a riguardo, ma non è questo lo spazio per discuterne).

<title> contiene il titolo della pagina, che sarà visualizzato sul bordo alto del browser; siccome stiamo parlando di uno EPUB e il suo contenuto non sarà visualizzato in un browser, possiamo anche lasciare vuoto questo spazio, ma non lo possiamo eliminare.

<body> contiene tutto ciò che sarà visualizzato sullo schermo: il testo, le foto, i video, eccetera. Qui dovremmo inserire soltanto il contenuto, senza mischiarlo con stile (CSS) e funzionamento (JavaScript). Essendo HTML, questo spazio sarà brulicante di tag e i tag potranno essere modificati da CSS e JavaScript in qualsiasi modo vorremo, ma l’importante è che il codice per modificare i tag sia lasciato fuori dal body, ben separato dal contenuto. Se li mischiate, siete delle brutte persone, oppure avete trascorso gli ultimi quindici anni ibernati in un qualche laboratorio segreto.

Dopo questo rapido ripasso dello scheletro di una pagina, dovrebbe essere chiaro che la parte da strutturare a dovere, per poterla poi modificare col CSS, è quella contenuto nel tag <body>: qui finirà tutto il contenuto del nostro EPUB e qui dovremo lavorare, per renderlo adatto ad accogliere il CSS.

In una normale pagina web, dovremmo preoccuparci del layout dei vari elementi, del numero di colonne da utilizzare nella pagina e così via; nel microcosmo di uno EPUB, invece, molti di questi problemi non si pongono e possiamo concentrarci sullo stretto indispensabile. O meglio, in teoria potremmo anche cercare di utilizzare in uno EPUB tutte le regole di layout che magari abbiamo imparato per i siti web, ma ci sono buone probabilità che i risultati non saranno quelli che ci aspettavamo. Manteniamoci dunque sull'essenziale, cioè una pagina che presenta un titolo nella parte alta, ossia il titolo del capitolo, e poi una muraglia di testo, ossia il contenuto del capitolo: è lo schema seguito da quasi tutti i libri, dopotutto, ed è un ottimo schema, se vogliamo che il nostro e-book sia leggibile decentemente anche sullo schermo di un piccolo smartphone.

Una buona e semplice struttura potrebbe essere questa:

<body>

    <div class=”capitolo”>

        <div class=”titolo”>

            <h2>Titolo del capitolo</h2>

        </div>

        <div class=”corpo”>

        </div>

    </div>

</body>

Il tag <div>, che qui vediamo utilizzato, è un tag che, di per sé, non possiede un preciso valore semantico, nello HTML, ma è solitamente usato per dividere in blocchi il contenuto di una pagina. In un futuro prossimo, quando saranno rimasti in circolazione soltanto browser che supportano lo HTML5, questa funzione del tag div sarà svolta da tag speciali, che lo HTML5 ha introdotto proprio per questo scopo, e <div> diventerà molto meno frequente nelle pagine web. Siccome però noi ci occupiamo di EPUB, tutto ciò non ci tocca e possiamo continuare a usare il tag div per strutturare i nostri capitoli, indipendentemente dai nuovi tag dello HTML5.

A ogni tag può essere assegnato un attributo class, che ci servirà a rendere più precise le regole CSS da applicare alla pagina: invece di applicare genericamente una regola a tutti i tag dello stesso tipo (tutti i tag <a>, ad esempio), possiamo usare l’attributo class per applicare una regola a tutti i tag di uno stesso tipo, che possiedono un determinato class (ad esempio, class=”testo”), oppure a tag di tipo diverso, purché possiedano lo stesso class. Lo vedremo meglio più avanti, parlando delle regole CSS: per il momento, possiamo vedere che ci sono tre tag div, ognuno dei quali ha un attributo class differente, e grazie a questo attributo possiamo applicare loro stili differenti.

<div class=”capitolo”> è il tag più ampio, che racchiude l’intero contenuto della pagina: per questo suo ruolo, possiamo utilizzarlo nel CSS per assegnare regole di base, che saranno applicate a tutto il contenuto della pagina. Per esempio, possiamo utilizzare questo tag per impostare una immagine di sfondo, oppure la larghezza dei margini della pagina, o ancora il tipo di font, e così via. Al suo interno, troviamo poi altri due tag, che separano i due blocchi di base per ogni capitolo, ossia il titolo e il testo: entrambi sono all'interno della pagina, per questo li abbiamo inseriti all'interno del tag più generale, ma entrambi hanno un ruolo paritario, per questo li abbiamo mantenuti uno accanto all'altro.

<div class=”titolo”> è quindi la parte in cui inseriremo il titolo del nostro capitolo. Nel foglio di stile CSS potremo utilizzare questa combinazione tag + class, per assegnare uno stile particolare al titolo e distinguerlo dal resto del testo, oppure per racchiudere il titolo in una cornice, o applicare qualsiasi altro tipo di decorazione noi vogliamo.

<div class=”corpo”>, infine, racchiude il grosso del nostro capitolo, ossia il testo, dal primo all'ultimo paragrafo. I vari paragrafi al suo interno, poi, saranno racchiusi in altrettanti tag <p>, uno per paragrafo, e a questi tag <p> potremo assegnare attributi class, ad esempio per distinguere il primo paragrafo dagli altri. In una struttura del tipo

<div class=”corpo”>

    <p class=”primo”></p>

    <p class=”paragrafo”></p>

    <p class=”paragrafo”></p>

    <p class=”paragrafo”></p>

    <p class=”paragrafo”></p>

    <p class=”paragrafo”></p>

</div>

abbiamo definite due classi differenti per i nostri paragrafi: un attributo class=”primo”, che identifica il primo paragrafo del capitolo, e un attributo class=”paragrafo”, che identifica tutti gli altri paragrafi del capitolo. In questo modo, nel foglio di stile CSS potremo assegnare uno stile particolare al primo paragrafo, ad esempio ingrandendo la prima lettera, a simulare un manoscritto miniato del medioevo, mentre tutti i successivi paragrafi utilizzeranno uno stile comune e uniforme.

Se abbiamo bisogno di utilizzare uno stile particolare su una porzione molto ridotta di testo, ad esempio una riga o anche solo una parola all'interno di un paragrafo, dovremo racchiudere quella porzione di testo in un tag <span class=”nome”></span> (al posto di “nome”, ovviamente, inseriremo il nome che preferiamo, purché non sia già stato usato in altri class): in questo modo, nel foglio di stile potremo creare uno stile apposito, da applicare al testo che utilizza quell'attributo class.

Adesso che abbiamo strutturato a dovere la nostra pagina, possiamo cominciare a scrivere qualche regola in CSS: è ciò che faremo nella prossima puntata.

Guida al CSS per EPUB - Introduzione

Già in precedenza mi ero dedicato a una breve introduzione all'uso del CSS negli EPUB, per controllare e modificare lo stile di una pagina in base ai nostri gusti. Tornerò adesso sull'argomento  dedicandovi però più spazio, in una guida che, almeno nelle mie intenzioni, dovrebbe essere più chiara e completa della precedente introduzione. Non escludo che il risultato sarà un bignami di CSS, ma staremo a vedere. Argomento di oggi (e non solo di oggi) è dunque: come usare il CSS in uno EPUB.

Come ho ripetuto fino alla nausea, uno EPUB è fondamentalmente un sito web, compresso e impacchettato fino a sembrare un libro: i vari capitoli di uno EPUB sono altrettante pagine in formato HTML, oppure XHTML, ossia il formato di una normale pagina web, e come ogni normale pagina web possono essere formattati utilizzando un foglio di stile CSS. Un foglio di stile CSS è un normale file di testo, con estensione .CSS, al cui interno è raccolta una lista di regole di stile, che dovranno essere applicate alla pagina che le utilizza, al momento della sua apertura in un browser: quale font usare per il testo, quale colore, quali dimensioni avranno i caratteri, quando spazio lasciare sui margini, quale immagine caricare come sfondo della pagina, se ce ne deve essere una, e così via. Tutto ciò che rende una pagina bella (o brutta) da vedere, in pratica, raccolto e organizzato in un file a parte, che dovrà poi essere aggiunto alla pagina. Ma non è sempre stato così.

Alla fine del ventesimo secolo, quando il web era giovane, libero e selvaggio, gli animi erano coraggiosi, gli uomini erano veri uomini, le donne erano vere donne e le piccole creature pelose di Alpha Centauri erano vere piccole creature pelose di Alpha Centauri (per citare la Guida Galattica), stile e contenuto erano mischiati assieme, in una poltiglia difficilmente distinguibile. Nella pancia delle pagine, ossia tra i tag <body> e </body>, il testo da mostrare sullo schermo era intervallato da tag, che dicevano ai browser come dovesse essere formattato questo testo: c’erano tag che definivano il tipo di font, la sua dimensione, il suo colore, ma anche il colore dello sfondo, la larghezza e il colore delle caselle di una tabella, e così via. Un periodo in cui i web designer finivano spesso vittime di tremende crisi depressive e affondavano negli abissi bui dell’alcolismo, insomma, colti dallo sconforto mentre cercavano di annidare una tabella nell'altra, nel vano tentativo di impaginare il testo in modo decente.

A risolvere questo pasticciaccio brutto è arrivato il CSS.

Il CSS ha portato con sé una nuova e più razionale filosofia di progettazione, per le pagine web: una separazione netta tra il contenuto e lo stile. Nella pancia della pagina, ossia tra i tag <body> e </body>, doveva restare soltanto il contenuto, cioè testo, immagini e altro: in pratica, il cosa vediamo. Tutto ciò che serviva a definire il come lo vediamo, invece, doveva essere spostato altrove: nella parte alta della pagina, ossia tra i tag <head> e </head>, o meglio ancora in un file separato, da caricare assieme alla pagina. In questo file separato potevamo elencare i vari tag utilizzati nella pagina, assieme alle regole di stile da applicare al contenuto di quei tag; in fase di caricamento, il browser avrebbe controllato di volta in volta le regole, per applicarle alla visualizzazione dei tag, a mano a mano che li incontrava. Il file con la lista di tag e di regole è il foglio di stile CSS.

La progettazione di siti web ha poi proseguito su questa strada, aggiungendo un terzo elemento, cioè il funzionamento: se il semplice HTML contiene il cosa vediamo e il CSS si occupa del come lo vediamo, il JavaScript si occupa di far fare qualcosa a quella pagina. Siccome al momento gli EPUB supportano il JavaScript in teoria, ma in pratica siamo ancora abbastanza lontani dal poterlo usare decentemente (per fortuna, aggiungo io, ma questo è solo un parere personale), possiamo ignorare questo elemento e occuparci solo degli altri due.

Primo problema: come aggiungere un foglio di stile CSS a una pagina? Le possibilità sono due: scriverlo direttamente nella pagina, oppure scriverlo in un file a parte e poi dire alla pagina di caricare questo file. Il risultato finale sarà lo stesso, in entrambi i casi, ma le due soluzioni non sono equivalenti, sul piano del lavoro necessario: la scelta più razionale è quella di creare un file a parte, con tutto il CSS necessario per il nostro libro, e poi inserire un link a quel file in ogni pagina del libro, per cui vi invito caldamente a seguirla. Se poi un capitolo avrà bisogno di formattazioni particolari, perché magari contiene porzioni di testi in un altro alfabeto, allora potrete aggiungere una piccola estensione al CSS direttamente in quella pagina, per modificare le regole generali e adattarle al contesto.

Ipotizziamo allora che abbiate deciso di utilizzare un file esterno, in cui mettere tutto il CSS necessario, e lo abbiate salvato come “Stile.css” nella cartella Styles del vostro EPUB. Come fare ad aggiungerlo a ogni pagina? Con un poco di olio di gomito e di pazienza. Con Sigil, apriamo a una a una le pagine del nostro EPUB (ossia quelle contenute nella cartella Text) e passiamo alla Vista Codice. Nella parte alta di ogni pagina, cerchiamo il tag <head> e, al suo interno, il tag <title>: una volta localizzato, nello spazio tra </title> e </head> inseriamo un codice di questo tipo

<link href="../Styles/Stile.css" rel="stylesheet" type="text/css" />

Questa riga dirà al lettore di caricare un determinate file, ogni volta che deve visualizzare questa pagina; lo informerà inoltre sulla posizione in cui si trova il file (la parte che segue l’attributo href) e specificherà anche a cosa serva il file (la parte che segue l’attributo rel). Ovviamente, se il nostro foglio di stile ha un nome diverso, al posto di “Stile.css” dovremo scrivere il nome corretto del file, qualunque esso sia.

Se la pagina non è in XHTML, ma in HTML, il codice sarà quasi identico, ma un poco più corto:

<link b="" gt="" href="../Styles/Stile.css" rel="stylesheet">

Per sapere se la pagina sia in XHTML o in HTML, è sufficiente guardare la sua estensione, che ci è indicate chiaramente da Sigil.

Utilizzare un file esterno è la scelta più semplice e razionale, per risparmiarci fatiche inutili, ma niente e nessuno ci vieta di inserire il CSS direttamente nella pagina. In questo caso, nello spazio tra </title> e </head> dovremo aggiungere due tag, ossia <style type=”text/css”> e </style>: fra i due tag scriveremo poi tutte le regole che vogliamo.

Adesso che sappiamo come aggiungere un foglio di stile CSS alla nostra pagina, dovremo preoccuparci di preparare la nostra pagina ad accogliere il CSS, ottimizzandola cioè per la formattazione, ed è ciò che vedremo la prossima volta. Conclusa questa fase introduttiva, cominceremo a scrivere regole in CSS, per formattare la nostra pagina.

Usare un gradiente di colore nel CSS

Un gradiente è una transizione continua e graduale che conduce da un colore di partenza a un colore di arrivo: in altri termini, è un colore che sfuma a poco a poco in un altro colore. Esempi di gradienti si possono trovare più o meno ovunque nella interfaccia grafica di computer e altri strumenti analoghi: la Apple li usa più o meno per qualsiasi bottone compaia sullo schermo di uno dei suoi prodotti, ma più in generale sembrano andare molto di moda tra i grafici di ogni genere.

Più o meno qualsiasi programma di grafica (Photoshop, GIMP, eccetera) include una funzione per produrre gradienti, specificando un colore di partenza e un colore di arrivo, ma i gradienti sono supportati anche dalle ultime specifiche del CSS e possono essere utilizzati per colorare più elementi in una pagina web: lo sfondo della pagina stessa, i pulsanti, eccetera. Per esempio, se vogliamo che un elemento abbia un gradiente come colore di sfondo, nel foglio di stile CSS gli assegneremo una proprietà di questo tipo:

background: linear-gradient(rgb(229,76,16), rgb(173,54,8));

dove rgb(229,76,16) e rgb(173,54,8) sono il colore di partenza e il colore di arrivo della gradazione, espressi come “miscela” di rosso, verde e blu, i tre colori fondamentali. Leggendo questa regola nel foglio di stile, il nostro browser assegnerà all'elemento selezionato uno sfondo, in cui il primo colore indicato sfumerà gradualmente nel secondo. In teoria. In pratica, non è detto che ciò accada.

Sebbene nelle specifiche del CSS siano presenti i gradienti e i valori da attribuire a un elemento, per ottenere un gradiente, non tutti i browser li supportano. Il che è normale nel caso dei browser più vecchi, prodotti prima che i gradienti fossero introdotti nel CSS (se vi aspettate di farli visualizzare a Internet Explorer 6, andrete incontro ad amare delusioni), ma anche nei browser più recenti non è sempre garantito il supporto dei gradienti; talvolta, inserire il valore linear-gradient non è sufficiente, ma bisogna aggiungere un prefisso, specifico per ogni famiglia di browser. In altri termini, ottenere su ogni browser la grafica che abbiamo progettato può essere un lavoro discretamente seccante, se ci sono di mezzo i gradienti, perché è possibile che si debba scrivere il triplo del codice normalmente necessario. Per questo e altri motivi, esistono strumenti di supporto, che aiutano nella generazione del codice necessario per un gradiente e si possono occupare al posto nostro (se così vogliamo) di renderlo compatibile con la maggior parte dei browser in circolazione.

Ultimate CSS Gradient Generator è uno di questi strumenti, utilizzabile online sulla pagina del sito di Colorzilla e disponibile anche in due estensioni, per Firefox e Google Chrome. Come si può intuire dal nome assai umile e modesto, questo semplice programma si offre di generare per noi il codice da inserire nel foglio di stile CSS, per ottenere il tipo di gradiente da noi selezionato. Il suo funzionamento si può riassumere così: scegliamo il colore di partenza, il colore di arrivo e gli eventuali colori intermedi, poi indichiamo la direzione in cui dovrà avvenire la sfumatura (orizzontale o verticale) e il programma genererà il codice corrispondente. Una volta finito, basterà copiare il codice e incollarlo all'interno della regola CSS in cui dovrà essere utilizzato. Ma vediamo più in dettaglio.

Questa è la pancia della pagina, dove troviamo i vari comandi a nostra disposizione:

In alto a sinistra, sotto la etichetta Presets, ci è proposta una lista di modelli di gradienti, tra cui possiamo scegliere quello più simile al nostro progetto: sceglierne uno non è indispensabile, ma ci potrebbe far risparmiare tempo, se riusciamo a trovarne uno che corrisponda alle nostre idee (solo la struttura, non gli abbinamenti di colore: quelli li sceglieremo a parte).

In alto a destra, sotto la etichetta Preview, vediamo un’anteprima del nostro gradiente, ma soprattutto abbiamo la possibilità di selezionare la direzione del gradiente (sfumatura in orizzontale, in verticale, in diagonale o dal centro verso l’esterno).

Scegliere i colori è il passaggio fondamentale. È possibile che quelli proposti dai modelli del preset ci possano andare bene, ma molto più probabilmente vorremo utilizzare altri colori: li possiamo selezionare e impostare utilizzando tutti quegli altri comandi misteriosi che appaiono nella colonna di sinistra della pagina, cioè la barra colorata, Stops e Adjustments. Partiamo dalla barra colorata.

La bara colorata ha due gruppi di puntatori, che possiamo far scorrere: un gruppo nella parte superiore e uno nella parte inferiore. Il gruppo nella parte superiore serve a  regolare il livello di opacità di un colore (quanto è o non è trasparente), mentre il gruppo nella parte inferiore serve a scegliere il colore. Per avere un gradiente, servono almeno due colori, uno di partenza e uno di arrivo: per decidere il colore di partenza, clicchiamo sulla freccetta in basso a sinistra nella barra: a questo punto, vedremo che nel riquadro Stops, subito sotto, alla voce Color è apparso un colore, ossia quello di base per il modello da noi scelto. Se lo vogliamo cambiare, clicchiamo su quel colore e scegliamone un altro dalla tavola che ci apparirà. Lo stesso procedimento lo ripeteremo poi anche per il secondo colore e per gli eventuali colori intermedi.

Accanto a Color, sempre nel riquadro Stops, troviamo anche una voce Location, accompagnata da una percentuale: indica la posizione in cui si troverà quel colore, nel nostro gradiente. 1% è il colore di partenza, 100% è il colore di arrivo, percentuali intermedie indicano posizioni corrispondenti (un colore che ha 50% come Location, ad esempio, sarà raggiunto a metà della gradazione). Usando questo strumento, possiamo scegliere un colore di partenza, uno di arrivo e fino a due sfumature intermedie, se lo vogliamo. A ogni modo, possiamo anche limitarci a inizio e fine, senza tappe intermedie.

Utilizzando le frecce sulla parte alta della barra, come ho detto, si determina il livello di opacità per un colore: ci serviranno se vogliamo un gradiente che guadagna o perde trasparenza nel corso del suo passaggio da un colore all'altro  in questo caso, dopo aver cliccato su una freccia, dovremo indicare il livello di opacità, in percentuale: 100% è un colore completamente opaco, 1% è un colore completamente trasparente.

Nella colonna di destra della pagina, infine, troviamo il codice da copiare. A mano a mano che impostiamo il nostro gradiente, anche il codice cambierà corrispondentemente: una volta concluso, quando siamo soddisfatti del nostro lavoro, basterà copiare tutto quanto e incollarlo dentro a una regola del foglio di stile CSS, dove i gradiente dovrà essere applicato. Se vogliamo però che il nostro gradiente sia visibile anche su Internet Explorer 9, che per ragioni misteriose non supporta il normale gradiente in CSS, dovremo selezionare la opzione IE9 Support, che compare subito sotto il riquadro col codice: questa ci fornirà anche una porzione extra di HTML,ossia

<!--[if gte IE 9]>

  <style type="text/css">

    .gradient {

       filter: none;

    }

  </style>

<![endif]-->

Dobbiamo copiarla e incollarla nello <head> delle pagine in cui il gradiente dovrà essere utilizzato; più precisamente, incolliamola dopo il punto in cui abbiamo inserito il foglio di stile. 

Come funziona Google Fonts

Google Fonts è l’ennesimo servizio extra, offerto da Google, dopo Google Mail (per gli amici Gmail), Google Maps, Google Docs, Google Translate e Google eccetera eccetera. Nello specifico, questo servizio è una collezione di font (al momento oltre seicento), a disposizione di chiunque voglia utilizzarli nel proprio sito, senza doversi preoccupare troppo di litigare col CSS: per certi versi, lo possiamo vedere come un discount per font.

L’idea di base, così come il suo funzionamento, è molto semplice: accediamo al sito del servizio, passiamo in rassegna la lista di font, alla ricerca di quelli che più ci piacciono, indichiamo quali vogliamo usare nel nostro sito e Google confezionerà per noi due righe di codice, da aggiungere alle nostre pagine. Questo codice sarà un link a un foglio di stile esterno, nel quale sono indicate tutte le specifiche dei font da noi scelti; quando un visitatore apre una pagina, su cui noi abbiamo inserito il codice, Google si occuperà di inviare i font. Niente fogli di stile CSS da modificare per incorporare font, insomma: solo due righe da aggiungere a ogni pagina.

Come possiamo vedere sopra, il sito del servizio è in inglese e ha una grafica molto spartana, in linea con la tradizione di Google. La parte centrale della pagina è occupata da una vetrina, in cui ci è mostrato l’aspetto dei vari font, con una frase come anteprima: il senso della frase può essere ignorato, guardiamo solo come si presenta.

Possiamo studiare tutti i font disponibili facendo scorrere verso il basso il contenuto della vetrina, ma è una operazione che potrebbe diventare presto alquanto noiosa, dato che sono 625 (al momento, ma è un numero che aumenterà); molto più semplice e veloce è utilizzare la colonna sinistra della pagina, dove troviamo un riquadro di ricerca e una serie di opzioni, mediante le quali possiamo filtrare le categorie di font. Alla fine della colonna sinistra, peraltro, è presente anche la voce “Show all styles”, che ci mostrerà tutte le varianti disponibili per ogni font: le varianti possibili sono normale, corsivo, grassetto, piccolo, eccetera, solo alcuni dei quali saranno inizialmente visibili in anteprima, nella vetrina.

Se conosciamo già il nome del font che stiamo cercando, scriviamolo nel riquadro di ricerca. Se non lo conosciamo, o vogliamo semplicemente guardare cosa abbia da offrirci Google nei vari settori, possiamo procedere coi filtri.

Il menu per categoria, (cliccando su “All categories”), ci permette di filtrare i risultati in base alle categorie in cui i font sono suddivisi: Serif, cioè caratteri con piccole decorazioni (ad esempio Times New Roman), Sans-Serif, cioè caratteri senza decorazioni (ad esempio Arial), Display, Handwriting e così via.

Le voci successive ci permettono di filtrare i font in base alle caratteristiche fisiche che possiedono. Thickness li ordina in base alla larghezza delle linee che li compongono, Slant li ordina in base alla inclinazione dei caratteri, Width in base alla grandezza complessiva del font e a quanto “riempie” la linea di testo.

Scripts, infine, ci permette di cercare i font per alfabeto: tutti i font disponibili per l’alfabeto latino, tutti quelli per l’alfabeto greco, russo, arabo, eccetera.

Nella vetrina centrale, sopra e sotto la frase di esempio, ogni font presenta anche altri elementi: sopra il font troviamo il tipo di stile usato nell'anteprima (di solito normal, ossia la versione di base), mentre sotto la fase ci sono molti altri dati e pulsanti, che dovremo esaminare nello specifico.

La prima cosa che troviamo è il nome del font: Roboto Slab, Meie Script, eccetera (i nomi sono quelli dei primi due nella immagine soprastante, non me li sto inventando). A seguire, un numero ci informa di quanti stili sono disponibili per questo font, dopodiché troviamo il nome dell’autore. Fin qui, sono dati interessanti, ma di poca utilità pratica, per chi li vuole inserire nella propria pagina; i pulsanti successivi cambiano le cose.

Il primo pulsante che troviamo sotto a un font, sulla destra, è un quadrato con una freccia verso il basso: cliccandolo, possiamo vedere tutti gli stili disponibili per quel font. Ovviamente, se un font possiede un solo stile, questo pulsante non ci sarà.

Il secondo pulsante (quadrato con freccia che punta a destra) è “Quick Use”: cliccandolo, si aprirà un pannello, tramite cui potremo ottenere rapidamente il codice per aggiungerlo alla nostra pagina. Del pannello parlerò più avanti.

Il terzo pulsante, “Pop out”, ci offre una panoramica più completa sul font, mostrandoci tutte le lettere disponibili e fornendoci altre informazioni sul font. È sempre utile cliccarlo, prima di scegliere, giusto per evitare brutte sorprese, come la mancanza di una particolare lettera: un font che non prevede vocali accentate, ad esempio, può essere utile per la lingua inglese, ma potrebbe causare qualche problema in un testo in italiano, dove le lettere accentate sono parecchie.

Ultimo tasto, grande, grosso e blu, è “Add to collection”, che ci introduce a un secondo utilizzo del sito: oltre a pescare un singolo font e andarcene col nostro codice, possiamo anche raccogliere vari font, inserirli nel carrello come se fossimo al supermercato e poi, alla fine della spesa, farci dare un codice completo da Google, inclusivo di tutti i font che abbiamo scelto. Cliccando “Add to collection”, inseriamo il font nel nostro carrello e procediamo con lo shopping. Non c’è limite al numero di font che possiamo prendere, se non il buon gusto: un sito con font diversi in ogni pagina potrebbe non essere gradito a tutti i visitatori.

La nostra collezione di font è visibile nella parte bassa del sito: a mano a mano che aggiungiamo font, il numero accanto a font famiglie aumenterà e potremo osservare nei dettagli il contenuto del nostro carrello della spesa, cliccando sulla freccia che vediamo a sinistra della scritta. Aprendo i riquadro con la collezione, peraltro, ci appariranno altri tre pulsanti, in basso sulla destra: Choose, Review e Use. Review ci permette di fare un confronto tra i font selezionati, oltre a mostrarci altre informazioni sui font, ma il più importante è Use: cliccandolo, arriveremo al pannello cui accennavo in precedenza. Adesso parlerò del pannello.

Il pannello corrisponde all'ultima fase di personalizzazione dei font selezionati, prima di copiare il codice da inserire nelle pagine in cui li useremo. Le prime due sezioni di questo pannello sono appunto dedicate alla scelta dello stile (corsivo, grassetto e così via, a seconda degli stili disponibili per ogni font) e alla scelta del set di caratteri, a seconda del tipo di alfabeto che ci serve. Una volta selezionato tutto, la terza sezione ci fornisce il codice da inserire: questo codice è un link, che punta al foglio di stile contenente le indicazioni sul tipo di font e lo dovremo copiare nella sezione <head> delle pagine in cui quel font sarà usato. La quarta ultima sezione, infine, ci mostra come dovrà essere utilizzato il font nel foglio di stile scritto da noi; il codice fornito da Google renderà soltanto disponibile il font, starà poi a noi indicare nel foglio di stile CSS dove e come dovrà essere usato, proprio come facciamo coi font in dotazione.

Navigazione ed email anonime con Anonymouse

Dopo l’excursus sui cookies del precedente post, tornerò oggi a dedicarmi a privacy e anonimato, due temi molto vicini all'utilizzo e alla gestione dei cookies: nello specifico, lo farò parlando di un servizio per la navigazione anonima e per la spedizione di e-mail anonime, attivo già da parecchi anni ma, temo, non molto famoso. Questo servizio è Anonymouse.

Anonymouse è prima di tutto un sito e attraverso quel sito possiamo utilizzare tutti i suoi servizi, senza bisogno di installare programmi o configurare il browser in modo strano e complicato. Basta accedere al sito, entrare nella sezione che ci interessa e fare ciò che dobbiamo fare.

La pagina iniziale del sito, riprodotta qui sopra, potrebbe non ispirare molta fiducia e sollevare più di un dubbio sulla sicurezza e sull'affidabilità del servizio; grafica a parte, però, il sito funziona ed è mediamente affidabile. Non lo utilizzerei per questioni di vita o di morte, sia chiaro, ma per avere un buon anonimato in circostanze normali è molto più comodo (e molto più veloce) di Tor Browser, soprattutto se dobbiamo soltanto collegarci a un paio di siti in modo “protetto”. Vedremo poi alcuni esempi di questo.

Per procedere oltre, dobbiamo cliccare su una delle due bandiere, a seconda della lingua e del paese che preferiamo: arriveremo alla stessa pagina, ma cambierà la lingua in cui i testi saranno scritti. Se scegliamo l’inglese, la pagina si presenterà così:

Siamo già all'interno di uno dei tre servizi offerti, ossia AnonWWW, per la navigazione anonima. A questo punto, tutto funziona come un qualsiasi altro web-proxy , ossia un proxy con cui si interagisce attraverso un sito web, senza bisogno di impostarne i dati all'interno del nostro browser. Di fatto, Anonymouse è un proxy, ma con una maggiore attenzione all'anonimato rispetto a un proxy tradizionale e una minore attenzione alla crittografia, almeno nella sua versione gratuita. Per utilizzarlo, scriviamo o copiamo nel riquadro l’indirizzo del sito che vogliamo raggiungere e premiamo il tasto “Invio” (oppure clicchiamo su “surf anonymously”, come preferiamo). Dopo un breve caricamento, si aprirà la pagina che volevamo raggiungere.

Cosa ha fatto di particolare Anonymouse? Invece di connettersi direttamente al sito, ha svolto un normale lavoro da proxy, ossia ha inviato la nostra richiesta al suo server, la ha ripulita da ogni nostro dato personale e infine l’ha girata al sito che volevamo raggiungere. In questo modo, a collegarsi al sito non saremo noi direttamente, ma sarà il server di Anonymouse; di conseguenza, anche le comunicazioni che il sito ci invierà saranno prima di tutto filtrate da Anonymouse e poi inoltrate a noi. Fungendo da intermediario, il server di Anonymouse blocca lo scambio di dati personali tra noi e il sito di destinazione, garantendoci così un forma di anonimato: non un anonimato assoluto e impossibile da aggirare, sia chiaro, perché un anonimato del genere non esiste, ma è più che sufficiente per circostanze normali. Usatelo pure per collegarvi ai siti porno, insomma, ma non affidatevi ad Anonymouse se state pensando di ricattare il vostro capo o svolgere altre azioni ad alto rischio per la propria incolumità: sarete anche anonimi per il sito di destinazione, ma non lo sarete per il vostro provider (ossia l’azienda che vi fornisce il servizio di connessione). Solo la versione a pagamento di Anonymouse vi fornisce qualche tutela sul fronte-provider, garantendo anche una connessione criptata.

Pur nei suoi limiti, Anonymouse presenta comunque una discreta utilità per gli utenti italiani, soprattutto quelli colpiti dalla ennesima caccia alle streghe in nome della proprietà intellettuale e del copyright, ossia per gli orfani di torrent e della cara, vecchia baia dei pirati. Come dicevo in precedenza, Anonymouse è praticamente un proxy, o almeno svolge funzioni sufficientemente simili a un proxy standard, da permetterci di assimilarlo a uno di essi. Trattandosi dunque di un proxy, lo possiamo utilizzare anche per connetterci a siti che, in condizioni normali, sarebbero inaccessibili dal nostro paese: un esempio tra tutti, i siti legati a torrent e simili. Attraverso Anonymouse, ad esempio, possiamo rapidamente accedere a ThePirateBay, giusto per nominarne uno, ma anche a molti altri siti di torrent. Non è l’unico modo per accedervi, sia chiaro, ma è sempre meglio avere uno strumento in più per farlo, piuttosto che uno in meno.

Oltre al servizio di navigazione, però, Anonymouse offre anche altri due servizi: AnonEmail e AnonNews. A cosa servano di preciso, dovrebbe essere chiaro anche solo leggendo i nomi: AnonEmail permette di inviare e-mail anonime, mentre AnonNews permette di accedere e postare in modo anonimo sui newsgroups. Entrambi hanno una interfaccia parecchio simile, per non dire identica, per cui mi limiterò a postare una immagine di AnonEmail, a titolo di esempio (anche perché è il servizio che, probabilmente, interesserà al maggior numero di possibili lettori).

Il suo utilizzo è molto semplice: nel campo “To” scrivete l’indirizzo del destinatario, nel campo “Subject” scrivete il titolo della e-mail e nel campo “Message” scrivete il contenuto del messaggio. Alla fine, cliccate su “Send anonymously” per spedire il tutto. Niente di diverso da un normale servizio di e-mail basato sul web. Nel caso di AnonNews, a cambiare è soltanto il primo campo, dove dovrete scrivere l’indirizzo del newsgroup su cui volete postare, invece del destinatario della e-mail. Il funzionamento del servizio, invece, è esattamente lo stesso che già abbiamo visto per AnonWWW: il messaggio è inviato prima al server di Anonymouse, ripulito da ogni dato che possa consentire il riconoscimento del mittente (ma NON rimuoverà il vostro nome, se avete firmato la e-mail: non bisognerebbe scrivere il proprio nome in un messaggio anonimo...) e infine inoltrato al destinatario. 

Nel complesso, è un buon servizio per un uso rapido e occasionale, molto buono se vogliamo accedere a un sito di torrent senza faticare troppo, ma non un servizio che consiglierei per questioni serie e vitali. Averlo a portata di mano, magari tra i “preferiti”, può comunque fare sempre comodo.