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.