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.