Formattare il paragrafo

Dopo esserci divertiti come pazzi, lavorando ai margini del nostro e-book, vediamo adesso in quali modi possiamo prendere un piccolo, povero, indifeso e inconsapevole paragrafo del nostro testo e brutalizzarlo al di là di ogni possibile riconoscimento. Come dicevo anche in precedenza, tutto ciò che descriverò in questo capitolo potrà essere utilizzato, per cambiare la faccia dei nostri paragrafi, ma non significa che queste proprietà dovranno essere applicate tutte assieme, su uno stesso paragrafo. Esiste anche una cosa chiamata buon gusto e ogni tanto può essere simpatico applicarla: un testo nasce prima di tutto per essere letto ed è dunque opportuno che rimanga leggibile, anche se questo potrebbe costringerci a frenare un poco le nostre aspirazioni di grandi artisti figurativi.

Dopo questa premessa, mettiamoci al lavoro.

Se si tratta di impostare o modificare lo stile di un paragrafo o di un intero capitolo, i tag che ci servono sono fondamentalmente due: il tag <p> e il tag <div>. Il tag <p>, come abbiamo già visto, racchiude un paragrafo di testo ed è, con ogni probabilità, il tag che appare più spesso in uno e-book. Di conseguenza, se vogliamo impostare uno stile di base che sia valido per ogni paragrafo del libro, selezioneremo il tag <p> ed elencheremo tutte le proprietà che i nostri paragrafi devono possedere. Il tag <div> ha un uso meno definito, ma non meno importante: in uno e-book, compare nella maggior parte dei casi come strumento, per racchiudere una parte più o meno grande del documento, a cui dovrà essere assegnato uno stile particolare.

A titolo di esempio, un capitolo si potrebbe presentare così:
<div class="titolo"> <h2>Capitolo primo</h2> </div> <div class="pagina"> <p class="primo">Primo paragrafo.</p> <p>Secondo paragrafo.</p> <p>Terzo paragrafo.</p> <p>Quarto paragrafo.</p> <p>Quinto paragrafo.</p> </div>

In questo esempio ho utilizzato due tag <div>: il primo per racchiudere il titolo del capitolo, il secondo per racchiudere il contenuto del capitolo. A entrambi i tag ho applicato una particolare classe, che userò nel foglio di stile per definire l’aspetto delle rispettive porzioni di testo. La classe “titolo” conterrà tutte le proprietà che dovranno essere comuni ai titoli dei vari capitoli (tipo di font, dimensione del carattere, colore, allineamento, margini, eccetera), mentre la classe “pagina” conterrà tutte le proprietà che dovranno essere comuni al testo dei vari capitoli (tipo di font, dimensione del carattere, margini, colore dello sfondo, eccetera). Inoltre, al primo paragrafo del capitolo ho assegnato una classe “primo”, che conterrà tutte quelle proprietà che dovranno contraddistinguere il primo paragrafo di un capitolo.

Di conseguenza, il foglio di stile presenterà una struttura di questo tipo:
.titolo{ //proprietà comuni a tutti i titoli di capitolo } .pagina { //proprietà comuni al testo di tutti i capitoli } p { //proprietà comuni a tutti i paragrafi } .primo { //proprietà del primo paragrafo di un capitolo } .primo:first-letter { //proprietà della prima lettera del primo paragrafo di un capitolo }

Ovviamente, questo è solo un esempio di come si potrebbe impostare un capitolo: ognuno è poi libero di scegliere la struttura che preferisce, oppure la struttura più adatta al libro da impaginare. È comunque un utile riferimento, per capire meglio gli attributi di cui parlerò nelle prossime pagine.

6-1 Allineare il contenuto

Una delle prime preoccupazioni che ci si pone, quando bisogna impaginare un capitolo, è il tipo di allineamento da assegnare al testo. Vogliamo che il contenuto sia allineato a sinistra, con un margine destro frastagliato? Vogliamo che il contenuto sia allineato a destra, con un margine sinistro frastagliato? Oppure vogliamo una giustificazione classica, da libro cartaceo, dove tutte le righe hanno la stessa lunghezza? Qualunque sia la risposta, l’attributo che ci interessa è text-align.

Il funzionamento di text-align è identico a quello dei quattro famigerati pulsanti, che troviamo in ogni elaboratore di testi e che, premendoli, ci permettono di cambiare il modo in cui il testo è distribuito nella pagina. Come è facile da immaginare, i valori a disposizione sono quattro.

text-align: left;
il testo sarà allineato a sinistra: avremo dunque un margine sinistro bello preciso, mentre il margine destro avrà un aspetto frastagliato.

text-align: right;
l’esatto opposto del precedente: il margine destro sarà preciso, il margine sinistro sarà frastagliato. È improbabile che desidereremo utilizzare una proprietà di questo tipo, se stiamo scrivendo in un linguaggio che si legge da sinistra a destra (come il nostro), ma potremmo volerla scegliere se il nostro libro è scritto in un linguaggio che si legge da destra a sinistra (come l’arabo).

text-align: center;
il contenuto è allineato al centro della pagina, con entrambi i lati frastagliati. Una proprietà di questo tipo è comune per i titoli, ma decisamente non è comune per il contenuto di un paragrafo.

text-align: justify;
è il classico stile da carta stampata: tutte le righe hanno la stessa lunghezza, entrambi i margini sono precisi e squadrati. È lo stile che probabilmente sceglierete per un romanzo, oppure per un manuale, ma con un’avvertenza: browsers e dispositivi di lettura non possiedono facilitazioni per andare a capo, spezzando una parola. Di conseguenza, è possibile che il contenuto di una riga includa anche spazi vuoti piuttosto larghi, tra una parola e l’altra, per “riempire lo spazio”.

6-2 Altezza della linea

Un’altra proprietà, che probabilmente desidereremo modificare in base ai nostri gusti, è l’altezza di una linea di testo. L’attributo line-height è il nostro migliore amico, in questo caso: il valore che gli assegneremo determinerà, di fatto, l’ampiezza dello spazio tra una linea e la successiva (la famosa interlinea, insomma). Il funzionamento di questo attributo è molto semplice: il valore che noi gli assegneremo corrisponde all’altezza che possiederanno le varie linee del testo. Fin qui, nessun problema.

Il discorso si fa un poco più complicato, quando si passa a esaminare i possibili valori di questo attributo, dato che le possibilità sono parecchie e non sempre chiare. La dimensione della interlinea può dunque essere espressa in percentuale:
line-height: 150%;
significa che ogni riga sarà alta il 150% della dimensione impostata per il carattere. La distanza effettiva tra una linea e l’altra sarà dunque pari alla metà dell’altezza del carattere. Se il nostro carattere ha una dimensione di 12 pixel, line-height: 150%; renderà la riga alta 18 pixel (il 150% di 12) e lo spazio tra le righe sarà pari a 6 pixel (altezza della riga meno altezza del carattere). A titolo indicativo, l’impostazione di base di browsers e dispositivi di lettura prevede un valore di 120% per questo attributo.

La percentuale è il sistema consigliato, per esprimere il valore di questa proprietà: in questo modo, al variare della dimensione dei carattere, lo spazio tra le righe cambierà in proporzione. Nulla ci vieta, però, di utilizzare altre unità di misura: possiamo assegnare a line-height un valore in pixel, ad esempio, oppure in em (unità di misura, che corrisponde all’altezza del carattere in uso). Inoltre, è possibile indicare il valore con un semplice numero:
line-height: 1.5;

In questo caso, la dimensione del carattere sarà moltiplicata per il numero da noi indicato e il risultato sarà l’altezza della nostra linea. Di fatto, il risultato è quasi identico a quello ottenuto, se indichiamo il valore in percentuale, ma con una grossa differenza, che diventa visibile in caso di ereditarietà.

La proprietà line-height è ereditabile: se assegniamo questa proprietà a un elemento, tutti i suoi discendenti la erediteranno e avranno la stessa interlinea. Se esprimiamo il valore in percentuale, ciò che sarà ereditato non è la percentuale, ma il risultato del calcolo: se in un elemento il carattere di 12 pixel e la linea è alta il 150%, i suoi discendenti erediteranno una linea alta 18 pixel (il risultato del calcolo). Se invece utilizziamo un numero semplice, come 1.5, tutti i discendenti erediteranno il numero e lo moltiplicheranno di volta in volta per le dimensioni del carattere che possiedono.

Questa distinzione può apparire pignola e di scarsa importanza, ma diventa molto importante se il discendente utilizza un carattere di dimensioni maggiori, rispetto al suo antenato. Conducete pure qualche semplice esperimento, alternando i due valori, per verificarlo di persona.

6-3 Paragrafi con rientro

Una caratteristica molto comune, almeno nelle opere stampate, è un leggero rientro nella prima riga di ogni paragrafo, escluso a volte il primo paragrafo del capitolo. Nei documenti in HTML, di solito, il rientro di paragrafo non è utilizzato, ma il passaggio da un paragrafo al successivo è marcato da una tecnica affine: una riga vuota. Proprio per questo motivo, nelle impostazioni di base del tag <p> è presente un margine, che lo separa dal blocco precedente e da quello successivo.

Non siamo obbligati a seguire questo sistema. Se la riga vuota tra un paragrafo e l’altro non ci piace, e preferiamo che il nostro e-book utilizzi il rientro nella prima riga, c’è un apposito attributo, che ci permetterà di impostare quanto debba essere il rientro nella prima riga di un paragrafo: è l’attributo text-indent.

Il valore da assegnare a questo attributo è un numero, che indica l’ammontare del rientro, ed è di solito espresso in pixel, oppure in em. Ad esempio,
text-indent: 2em;
dirà al nostro paragrafo che la prima riga deve presentare un rientro pari alla dimensione di due caratteri. Allo stesso modo,
text-indent: 10px;
dirà al nostro paragrafo che la prima riga deve presentare un rientro pari a 10 pixel. Di norma, lo si trova usato all’interno di una regola, applicata al tag <p>, oppure a una classe che sarà abbinata a un tag <p>.
p { //varie proprietà text-indent: 10px; //altre proprietà }

Ovviamente, una proprietà del tipo text-indent: 0; annullerà ogni eventuale rientro, che il nostro paragrafo potrebbe avere ereditato da un suo antenato. Se abbiamo impostato un rientro iniziale per tutti i paragrafi, ma vogliamo che il primo paragrafo di ogni capitolo non abbia alcun rientro, basterà assegnare una proprietà text-indent: 0; alla sua classe.

Questo attributo text-indent imposta un rientro soltanto per la prima riga del paragrafo. Se vogliamo invece che tutto il paragrafo sia rientrato, rispetto al resto del testo, e vogliamo farlo mediante il CSS, allora la soluzione migliore è creare una classe, da assegnare a tutti i paragrafi che dovranno essere rientrati (oppure da assegnare a un tag <div>, con cui racchiudere tutti i paragrafi da rientrare), e poi modificare gli attributi di margin-left e/o margin-right per quella classe. Per esempio, la regola
.citazione { margin-left: 15px; }
assegnerà a tutti i tag, che implementano una classe “citazione”, un margine sinistro pari a 15 pixel, che li farà apparire rientranti rispetto al resto della pagina. Allo stesso modo, impostando margin-top e margin-bottom, possiamo aumentare o diminuire lo stacco tra un paragrafo e il successivo, come ho già detto parlando dei margini nel capitolo precedente.

6-4 Prima lettera e prima riga

Come visto in precedenza, esistono due pseudoelementi che ci permettono di isolare e modificare due porzioni di un paragrafo: :first-letter, che modifica la prima lettera, e :first-line, che modifica la prima riga. Non potendoli usare da soli, nel foglio di stile li dovremo appiccicare a un selettore, che tipicamente sarà il tag <p>, se vogliamo che questa regola sia valida per tutti i paragrafi, oppure una particolare classe, se vogliamo che sia valida soltanto per alcuni paragrafi.

Se abbiamo creato una classe “primo”, da assegnare al primo paragrafo di ogni capitolo, e vogliamo che la prima lettera del primo paragrafo abbia una decorazione particolare, magari per ricreare uno stile da codice miniato medievale, possiamo scrivere una regola di questo tipo:
.primo:first-letter { //proprietà da assegnare alla prima lettera. }

La regola così definita si applicherà alla prima lettera di tutti i paragrafi, che implementano una classe “primo”. Più avanti, nel corso della guida, vedremo anche cosa sia possibile fare a una singola lettera, utilizzando il CSS: cambiarne le dimensioni, lo stile, il colore, la posizione, lo sfondo, eccetera. Per il momento, accontentiamoci di sapere come selezionarla.

A titolo di esempio, una regola del tipo
.primo:first-letter{ display: block; float: left; font-weight: bold; font-size: 4.4em; line-height: 0.8em; color: rgb(40,40,40); }
ingrandisce la prima lettera, la colora, la rende in grassetto e la allinea poi al resto del paragrafo. Non preoccupatevi, se non avete capito la maggior parte di queste proprietà: molte le dobbiamo ancora vedere, ma alcune le dovreste aver riconosciute, come color: e line-height:. Sempre a titolo informativo, questa regola è pensata per un paragrafo privo di rientro nella prima riga.

Per lo pseudoelemento :first-line, il discorso è identico: non potendo essere utilizzato da solo, lo dovremo attaccare a un altro elemento, come il tag <p> o una classe di stile, per poter selezionare e modificare la prima riga di quella porzione di testo. Quanto sarà lunga, di preciso, la prima linea, è un dettaglio che non abbiamo bisogno di conoscere e, in fin dei conti, non ci deve neppure interessare: dipende in larga parte dalla dimensione dello schermo, su cui il nostro e-book è riprodotto.

6-5 Impaginazione “galleggiante”

Per concludere il capitolo, parlerò di una strategia molto diffusa nei siti Web, ma di scarsa applicabilità in uno e-book; ha però i suoi possibili usi e per questo è opportuno dedicarle una sezione. La strategia a cui mi riferisco è l’uso dell’attributo float:, per posizionare liberamente un elemento all’interno di un altro elemento.

Normalmente, gli elementi che compongono una pagina sono distribuiti sullo schermo nello stesso ordine in cui appaiono nel file HTML: dall’alto verso il basso e da sinistra verso destra, per riempire tutto lo spazio disponibile nello schermo. In pratica, se il corpo della pagina ha una struttura
<body> <h2>Titolo</h2> <p>Primo paragrafo.</p> <p>Secondo paragrafo.</p> <img src=”../Images/foto.jpg” /><br /> <p>Terzo paragrafo.</p> <p>Quarto paragrafo.</p> </body>
, il dispositivo di lettura inserirà prima di tutto l’elemento <h2>, poi il primo elemento <p>, quindi il secondo elemento <p>, l’immagine, andrà a capo con l’elemento <br> e riprenderà con un altro elemento <p>. Tutto quanto sarà impilato con ordine, come mattoni collocati l’uno sopra l’altro. Di solito è proprio ciò che vogliamo.

A volte, però, potremmo desiderare un ordine differente. Ad esempi, potremmo volere che una immagine sia collocata accanto a un paragrafo, invece che sotto, e magari col testo del paragrafo che la avvolge. Oppure, come nell’esempio della sezione precedente, potremmo volere ingrandire la prima lettera del capitolo, distribuendola su più linee, come in una miniatura di un manoscritto medievale. La proprietà float può permetterci di ottenere questo risultato.

La proprietà float stacca un elemento dalla sua posizione naturale, all’interno di una pagina, e lo porta a galleggiare verso uno dei due lati del blocco che lo contiene. Più precisamente, collocherò quell’elemento lungo il lato destro o il lat sinistro, nel blocco che lo contiene: se quell’elemento non è alla fine del blocco, ma in un’altra sua parte (all’inizio o al centro), tutto il resto del blocco si avvolgerà attorno a lui. Se l’elemento a cui la proprietà float è applicata non è contenuto in un altro elemento, allora sarà spostato a destra o a sinistra della pagina, dato che è comunque contenuto nell’elemento <body>. Come ogni altra proprietà, è poi composta da due parti: l’attributo float: e il relativo valore, che indicherà la parte di pagina verso cui vogliamo far “galleggiare” quell’elemento.

I valori che possiamo assegnare a float sono tre:

left, per spostarlo a sinistra:
right, per spostarlo a destra;
none, per non spostarlo e annullare eventuali spostamenti ricevuti in eredità.

Riprendendo l’esempio della sezione precedente, ossia
.primo:first-letter{ display: block; float: left; font-weight: bold; font-size: 4.4em; line-height: 0.8em; color: rgb(40,40,40); }
, possiamo vederne meglio il funzionamento. Prima di tutto, ho selezionato un elemento interno a un altro elemento, ossia la prima lettera di un paragrafo. Siccome una lettera, di per sé, non costituisce un blocco, le ho assegnato la proprietà display: block;, per farla agire come un blocco. Dopo questo, l’ho fatta galleggiare a sinistra (float: left;) rispetto al resto del testo e le ho assegnato le varie proprietà, che la prima lettera del testo deve possedere. In questo modo, la prima lettera ha formato un blocco, all’interno del blocco-paragrafo, e il resto del testo le si avvolge attorno.

Possiamo eseguire una operazione analoga con una immagine, per posizionarla meglio nel nostro libro, ma con una differenza: siccome una immagine costituisce già un blocco, non avremo bisogno di assegnarle una proprietà display: block;, come invece ho dovuto fare con una singola lettera. Ad esempio, in un paragrafo del tipo
<p>Immaginate che questo paragrafo contenta testo molto interessante e non solo una serie di parole, disposte a casaccio a titolo di esempio. Ecco una foto che lo rappresenta al meglio. <img src=”../Images/Foto.jpg” />Tutto il testo successivo a questa immagine, cioè dalla parola “Tutto” in poi, si arrotolerà alla sinistra della immagine ed eventualmente al di sotto, se le abbiamo assegnato una proprietà float: right;, mentre farà la stessa cosa sul lato opposto, se la proprietà è float: left;. Provare per credere.</p>
, la prima parte del paragrafo comparirà normalmente, fino al punto in cui abbiamo inserito il tag <img>. Da quel punto in poi, se abbiamo assegnato alla nostra immagine una proprietà float: left;, il testo si arrotolerà sulla destra della immagine, avvolgendola se necessario. Ne potete ammirare il risultato nel paragrafo seguente, che vale come esempio pratico.

Immaginate che questo paragrafo contenta testo molto interessante e non solo una serie di parole, disposte a casaccio a titolo di esempio. Ecco una foto che lo rappresenta al meglio. Tutto il testo successivo a questa immagine, cioè dalla parola “Tutto” in poi, si arrotolerà alla sinistra della immagine ed eventualmente al di sotto, se le abbiamo assegnato una proprietà float: right;, mentre farà la stessa cosa sul lato opposto, se la proprietà è float: left;. In questo caso, è utile anche assegnare un certo valore di padding alla foto, così da evitare che il testo finisca spiaccicato contro il suo contorno. Se la foto è più alta rispetto al paragrafo che la contiene, o rispetto al generico elemento che la contiene, allora si prolungherà sul testo sottostante, con possibili effetti non desiderati sulla nostra impaginazione.

Ovviamente, dopo aver assegnato la proprietà float, possiamo aggiungere qualsiasi altra proprietà, per rendere più bello l’elemento: un margine tra quell’elemento e il testo, ad esempio, oppure variarne le dimensioni o la grandezza della linea, eccetera.