Formattare il testo

Dopo aver parlato di pagina e paragrafo, proseguirò questa guida alla impaginazione degli e-books col terzo argomento fondamentale: il testo. Ovviamente, mi riferisco all’aspetto del testo, non al suo contenuto: ciò che sarà scritto in uno e-book è a carico dello scrittore, io mi limiterò a descrivere i modi in cui impostare un determinato tipo di font, colorare il testo in un certo modo, deciderne le dimensioni di partenza e così via. Il contenuto di uno e-book resta sempre e comunque il suo elemento più importante, quello a cui dedicare la massima cura e attenzione, ma una buona presentazione grafica ne è il condimento, che rende il contenuto più (o meno) appetitoso.

A titolo di premessa generale, specifico subito che utilizzerò la parola “font” al maschile. In un computer, e di conseguenza anche in un dispositivo di lettura per e-book, il font è un normale file (un, maschile), al cui interno sono rappresentati tutti i caratteri disponibili per quel determinato tipo: il font Arial, ad esempio, sarà composto da un file che contiene tutti i caratteri disponibili in stile normale, un altro file che contiene tutti i caratteri in corsivo, un altro che contiene tutti i caratteri in grassetto e così via, per tutti gli stili in cui un dato font è disponibile. Riprenderò questo discorso in dettaglio più avanti, parlando di come incorporare un font.

In breve, un font digitale è un documento, per cui utilizzerò il genere maschile. Se avete studiato come grafici e siete stati addestrati a utilizzare sempre e solo il femminile, anche quando si parla di computer e non di valigette rétro, contenenti lettere in piombo, è possibile che vedere “font” al maschile vi causi sonno alterato, nausea, febbre, inappetenza, crisi di identità, senso di colpa o disturbi anche più gravi: in questo caso, siete liberi di modificare il testo e sostituire il genere maschile con il femminile, se proprio non resistete.

7-1 Impostare un font

Qualunque tipo di modifica vogliate appioppare al vostro testo, il primo passo sarà decidere e impostare il tipo di font, che il dispositivo di lettura dovrà utilizzare per rappresentare il nostro testo. Per farlo, dovremo assegnare un certo valore all’attributo font-family. Una regola del tipo
p { font-family: "Times New Roman"; }
, ad esempio, imposterà il font “Times New Roman” per tutti i paragrafi del libro.

Il suo uso di base è dunque molto semplice: come valore di font-family dovremo scrivere il nome del font da utilizzare. Se il nome è composto da una sola parola, lo scriveremo senza virgolette, ad esempio
font-family: Arial;

Se invece il nome è composto da più parole, le dovremo racchiudere tra virgolette, come visto poco sopra col font “Times New Roman”. È importante scrivere il nome esatto del font, controllando anche le eventuali maiuscole, altrimenti il dispositivo di lettura non interpreterà correttamente la proprietà.

Impostare un solo tipo di font è semplice, ma presenta un inconveniente: se il dispositivo di lettura non dispone di quel font, utilizzerà al suo posto il font di default, che è variabile per ogni dispositivo ma che, molto probabilmente, è parecchio diverso da ciò che volevate voi. Come prima soluzione al problema, possiamo specificare più tipi di font, uno dopo l’altro: al momento del caricamento, il dispositivo di lettura li proverà uno alla volta, fermandosi quando troverà un font in suo possesso. In altri termini, la regola
p { font-family: Arial, Helvetica, sans-serif; }
darà al dispositivo di lettura una istruzione di questo tipo: “Per il testo contenuto in un tag <p>, usa il font Arial. Se non hai il font Arial, usa il font Helvetica. Se non hai neppure quello, usa un qualsiasi font di tipo sans-serif.”

Per scrivere una proprietà, che supporti vari tipi di font, il procedimento è molto semplice:

scegliamo una serie di font di nostro gradimento;
assegniamoli in ordine di preferenza all’attributo font-family, separandoli con una virgola;
per ordinarli, partiamo dal font che preferiamo e procediamo poi con le riserve, sempre in ordine di gradimento (da quella che ci piace di più a quella che ci piace di meno);
come ultimo valore, inseriamo il tipo più generico possibile, ossia serif, sans-serif o monospace.

I termini serif, sans-serif e monospace rappresentano di fatto la nostra ultima spiaggia, in materia di font. Questi termini indicano le tre famiglie fondamentali di font e un rappresentante per ciascuna di esse è presente in ogni tipo di lettore (o almeno, dovrebbe essere presente): è un modo molto gentile per dire “se non hai proprio niente che mi piaccia, almeno scegline uno che sia vagamente simile”.

Serif: font di questo tipo presentano piccoli “piedi” alla base dei caratteri e sono considerati più adatti per testi lunghi e continui (il contenuti di un capitolo, ad esempio). Il più celebre esponente è il Times New Roman.

Sans-serif: font di questo tipo sono netti, squadrati e privi di appendici alla base dei caratteri. Li troviamo di solito usati per i titoli e il loro esponente più celebre è probabilmente lo Arial.

Monospace: nei font di questo tipo, i caratteri occupano tutti la stessa larghezza, in uno stile che ricorda molto le vecchie macchine da scrivere. Il più celebre esponente è il Courier.

Per dare una idea più precisa di come funzioni font-family, quando è usato con più font, elencherò di seguito alcune possibili combinazioni, a titolo di esempio:
font-family: Georgia, "Times New Roman", Times, serif; font-family: Baskerville, "Palatino Linotype", Times, serif; font-family: "Hoefler Text", Garamond, Times, serif; font-family: Verdana, Arial, Helvetica, sans-serif; font-family: Geneva, Arial, Helvetica, sans-serif; font-family: Tahoma, "Lucida Grande", Arial, sans-serif; font-family: "Courier New", Courier, monospace; font-family: "Lucida Console", Monaco, monospace;

E si potrebbe continuare a volontà, ma non lo farò. Di solito, sono indicate tre o quattro alternative, tra cui il dispositivo di lettura può scegliere, ma possiamo anche indicarne di più o di meno, se proprio lo vogliamo. Se poi abbiamo deciso di utilizzare un font molto diffuso, come Times New Roman o Arial, allora possiamo anche limitarci a indicare quel font, più la famiglia a cui appartiene (serif o sans-serif), dato che questi due font sono presenti quasi ovunque.

7-2 Incorporare un font

Se vogliamo utilizzare un tipo di font poco diffuso, oppure se abbiamo ragione di credere che il nostro font preferito non sia presente sui vari dispositivi, o anche se vogliamo solo essere sicuri che il nostro libro utilizzi un certo font, invece di limitarci a confidare nei font a disposizione di un certo dispositivo, allora possiamo incorporare quel determinato font nel nostro e-book. Detta in altri termini, possiamo aggiungere al nostro e-book i files, che contengono il font da noi scelto, proprio come aggiungeremmo una immagine o un file audio.

Se avviamo il programma Sigil, possiamo vedere che, tra le cartelle generate per un EPUB, ce n’è anche una dal nome “Fonts”: come è facile da immaginare, quella cartella è destinata a contenere i font che vogliamo aggiungere al nostro e-book. Ripeto, non è necessario aggiungere un font: i più comuni sono disponibili su quasi tutti i dispositivi di lettura. Se però utilizzate un font poco diffuso, o se volete avere la certezza che il testo del vostro libro sarà riprodotto utilizzando quel font e non un altro, allora incorporarlo è la soluzione migliore.

Per incorporare un font, la prima operazione da svolgere è aggiungere allo e-book il file (o i files) contenente il nostro font. Come dicevo in apertura, un font è costituito da uno o più files: in linea di massima, avremo un file per ogni stile in cui il font è disponibile (normale, corsivo, grassetto, corsivo + grassetto). Se quel font sarà utilizzato soltanto per testo normale, sarà sufficiente aggiungere il file di base; se lo useremo anche per testo in corsivo, dovremo aggiungere il file per il corsivo, e così via. Per distinguere tra loro i vari tipi di files, in genere è sufficiente guardare il nome del file stesso, che sarà composto dal nome del font, più lo stile del font: avremo pertanto uno Arial Normale, uno Arial Corsivo, e così via. A volte, il nome sarà in inglese, nel qual caso avremo Regular, Bold, Italic e BoldItalic, come stili disponibili.

Per incorporare un font in uno EPUB, apriamo dunque il nostro EPUB con Sigil. Clicchiamo col tasto destro sulla cartella Fonts, scegliamo “Aggiungi File Esistente” e cerchiamo nel nostro computer il file da aggiungere. Un file di font, almeno nei sistemi operativi Windows e Linux, è molto spesso un file con estensione TTF o OTF; di solito questi files sono raccolti in una cartella di nome Font, da qualche parte nel vostro disco fisso, ma la sua collocazione esatta dipende dal sistema operativo, dal modello e anche da come potreste aver deciso di modificarlo voi. A titolo di esempio, in un sistema operativo Windows la collocazione standard dei fonts è in una cartella di nome Fonts, dentro la cartella Windows del disco C.

Dopo aver selezionato il file, o i files, da aggiungere, dovremo descrivere nel nostro foglio di stile il modo in cui trovarli e utilizzarli. Ipotizziamo dunque di voler incorporare nel nostro e-book un font, contenuto nel file “Esempio.otf” (OTF è una delle estensioni, che caratterizzano un file di font). Dopo aver aggiunto alla cartella Fonts il file “Esempio.otf”, all’inizio del nostro foglio di stile scriveremo la seguente regola:
@font-face { font-family: Esempio; font-weight: normal; font-style: normal; src: url(../Fonts/Esempio.otf); }

In questa regola compaiono alcuni attributi, che non abbiamo ancora esaminato, ma la possiamo interpretare e tradurre in italiano nel seguente modo. La direttiva @font-face serve a indicare al dispositivo di lettura sia il nome che assegneremo al font, sia le sue caratteristiche fondamentali, sia infine il luogo in cui trovarlo. Di conseguenza, con l’attributo “font-family” assegniamo un nome al font; questo nome ci servirà più avanti, quando indicheremo il font da utilizzare nel documento. L’attributo “src” serve a indicare il percorso per raggiungere il file: quei due puntini iniziali non sono lì per bellezza, ma fanno parte del percorso e devono essere aggiunti. Gli altri due attributi, font-weight e font-style, sono opzionali e servono nel caso dobbiamo specificare un carattere da utilizzare solo col grassetto, oppure solo col corsivo.

Riassumendo, questa regola dice: crea un font di nome “Esempio”, che sarà utilizzati con testo normale, e che puoi trovare nel file “Esempio.otf” nella cartella “Fonts”. Dovremo ripetere questa operazione per ogni stile in cui il font incorporato dovrà essere utilizzato. In altri termini, avremo una serie di regole quasi uguali, del tipo
@font-face { font-family: Esempio; font-weight: normal; font-style: normal; src: url(../Fonts/Esempio.otf); } @font-face { font-family: Esempio; font-weight: bold; font-style: normal; src: url(../Fonts/EsempioBold.otf); } @font-face { font-family: Esempio; font-weight: normal; font-style: italic; src: url(../Fonts/EsempioItalic.otf); } @font-face { font-family: Esempio; font-weight: bold; font-style: italic; src: url(../Fonts/EsempioBoldItalic.otf); }

In questo modo, per il font “Esempio” avremo creato tutte e quattro le varianti fondamentali e le potremo utilizzare a nostro piacimento nel libro. Come potete vedere, nelle quattro regole il nome del font rimane sempre lo stesso, ossia Esempio, ma cambiano sia i valori di font-weight e font-style, sia l’indirizzo in cui si trova il file, dato che ogni stile di font è contenuto in un file diverso. Può essere una operazione poco divertente da svolgere, ma è necessaria, se vogliamo incorporare un font.

A questo punto, il resto è molto semplice. Potremo usare il nostro font Esempio nello stesso modo in cui utilizziamo un qualsiasi altro font, ossia come valore di un attributo font-family. Ad esempio, se vogliamo che questo font sia utilizzato per il testo contenuto in un tag <p>, scriveremo la regola
p { font-family: Esempio, serif; }

Il lavoro di preparazione può essere lungo e noioso, soprattutto se vogliamo incorporare parecchi font; una volta concluso, però, il nostro font incorporato funzionerà come qualsiasi altro tipo di font, con la sola differenza che, anziché cercare nella propria limitata scorta di font, il dispositivo di lettura lo pescherà direttamente dalla cartella in cui lo avremo inserito (la cartella Fonts del nostro e-book, di solito).

Lavorando a un sito Web, avremmo a disposizione anche un altro sistema per incorporare un font, ossia ricorrere a un WebFont, ma è una soluzione che sconsiglio, quando si tratta di uno e-book. Un WebFont è un font che, anziché essere inserito nel sito, è collocato in un deposito da qualche altra parte nel Web: caricando il sito, il nostro browser pescherà quel font da suo deposito e lo userà per rendere il testo. Soluzione ottima, per un sito, dato che dobbiamo comunque collegarci alla rete, per visitarlo, ma decisamente non buona per uno e-book, che in teoria dovremmo poter leggere anche in assenza di connessioni. A ogni modo, l’unica differenza concreta tra un font incorporato e un WebFont è che, nel caso del WebFont, il valore di url() sarà l’indirizzo web a cui è possibile trovare il font, invece che la posizione della cartella in cui il font è stato caricato.

7-3 Colorare il testo

Ancora una volta tornerò a parlare della colorazione, applicata qui a un altro elemento: il testo. Le regole per indicare il colore non sono diverse da quelle che abbiamo già visto a proposito dello sfondo di un elemento, oppure dei bordi di un elemento: abbiamo sempre un attributo, in questo caso color:, a cui dovremo assegnare un valore, ossia un colore espresso in una delle solite forme.

Per impostare il colore, con cui sarà riprodotto il testo dei paragrafi, useremo una regola del tipo
p { color: blue; }
, che colorerà di blu tutto il testo di tutti i paragrafi. Come al solito, il colore può essere indicato

con il rispettivo nome in inglese;
con un codice esadecimale;
con le dosi di rosso, verde e blu necessarie, per miscelare il nostro colore.

Di conseguenza, a titolo di esempio questi sono i vari modi, in cui possiamo indicare il colore blu per il testo:
color: blue; color: #0000FF; color: rgb(0, 0, 255); color: rgb(0, 0, 100%); color: rgba(0, 0, 100%, 1);

Qualunque forma noi scegliamo, il risultato sarà sempre lo stesso: il testo a cui assegneremo questa proprietà sarà colorato di blu. Ovviamente, il fatto che noi indichiamo un certo colore non implica necessariamente che il dispositivo di lettura, poi, colorerà il testo nel modo da noi indicato: non tutti i colori saranno disponibili ovunque e non tutti i dispositivi di lettura accettano i colori. Dovremo semrpe testare il nostro e-book sul caompo, per poter conoscere il risultato effettivo di questa proprietà.

7-4 Cambiare dimensione al font

Tornando a discutere dei nostri amati font, vediamo adesso come sia possibile impostarne o modificarne le dimensioni attraverso il CSS. Il carattere del testo ha già una dimensione di base, nei browsers e nella maggior parte dei dispositivi, e questa dimensione di base è pari a 16 pixel; allo stesso modo, la serie di tag da <h1> a <h6>, ha già impostate dimensioni variabili del carattere, per riflettere il livello di importanza di quel titolo. In ogni caso, tutte queste impostazioni possono essere modificate a nostro piacimento, nel foglio di stile.

L’attributo che ci interessa, per stabilire la dimensione del font, è font-size, che abbiamo già visto in almeno un esempio in precedenza. Una regola del tipo
p { font-size: 14px; }
cambierà la dimensione del font in tutti i paragrafi, portandola a 14 pixel. Come per molte proprietà già viste, anche in questo caso le unità di misura che possiamo utilizzare per i valori sono tre: il pixel, la percentuale e lo em. Nel caso dei pixel, il numero che indichiamo è anche il numero che otteniamo: un testo di 16px sarà sempre di 16 pixel, mentre un testo di 30px sarà sempre di 30 pixel. Nel caso di percentuali ed em, invece, il discorso si fa più complesso.

La percentuale funziona impostando le dimensioni del carattere, in proporzione alle dimensioni che il carattere possedeva in precedenza. Il che, detto così, potrebbe suonare piuttosto confuso. Vediamo dunque di spezzarlo in piccole regole, più facili da comprendere.

In partenza, prima di applicare qualsiasi modifica col CSS, il testo ha una dimensione base di 16 pixel: una proprietà
font-size: 100%;
significa dunque che il carattere dovrà essere il 100% di questa dimensione base: in altri termini, rimarrà 16 pixel. Se noi decidiamo di modificare il testo di un elemento, con una proprietà
font-size: 75%;
, il testo di quell’elemento avrà una dimensione pari al 75% della dimensione precedente, ossia al 75% di 16 pixel, che corrisponde a 12 pixel.

Se poi modifichiamo la dimensione del testo, per un elemento che si trova all’interno di quell’elemento, la nuova dimensione del testo sarà calcolata in percentuale, sulla base del valore che aveva nel secondo caso, ossia 12 pixel. E così via.

In altri termini, all’inizio il testo è di 16 pixel.
body { font-size: 90%; }
La dimensione del testo è adesso pari al 90% di 16 pixel.
p { font-size: 80%; }
La dimensione del testo è adesso pari all’80% del 90% di 16 pixel.
E così via. Usare le percentuali può diventare parecchio complicato, se il nostro foglio di stile si ramifica troppo.

La stessa cosa accade quando utilizziamo gli em. Di base, 1em corrisponde alla dimensione del carattere usato nel testo (16 pixel, come è sempre il valore di partenza). Ogni volta che lo modifichiamo, però, il valore di 1em cambierà di conseguenza, proprio come abbiamo visto con le percentuali. Per farla breve, il pixel è l’unità di misura più semplice da utilizzare, perché è indipendente dal valore assegnato agli altri elementi. Percentuali ed em, invece, dipendono dal valore assegnato agli elementi che si trovano più in alto nell’albero genealogico della pagina.

7-5 Gli stili del font

Procedendo con la nostra analisi, vediamo adesso come assegnare a un testo un determinato stile, che di fatto significa rendere il font in grassetto, in corsivo o entrambi. Sono possibili anche altri tipi di decorazioni, da un certo punto di vista, e li vedremo nel corso di questa sezione, anche se è molto probabile che le troverete deludenti: il concetto di decorazione, posseduto da chi ha redatto lo standard del CSS, potrebbe essere alquanto diverso da quello di una persona comune. Ma non divaghiamo.

font-style

L’attributo font-style ci permette di assegnare o rimuovere lo stile corsivo al testo. Di base, tutto il testo contenuto in un tag <em> o in un tag <i> è reso in corsivo, ma possiamo modificare questo stato a nostro piacimento, sia rendendo corsivo il testo contenuto in altri tag, sia rendendo in forma piana il testo contenuto nei tag corsivi. Perché mai dovremmo desiderare di fare una cosa simile, ovviamente, è un altro discorso, ma lo possiamo fare.

Una proprietà del tipo
font-style: italic;
, dunque, renderà il testo in corsivo, mentre una proprietà del tipo
font-style: normal;
annullerà il corsivo, rendendo il testo in forma piana. Questi sono gli unici due valori che possiamo assegnare all’attributo font-style. Come nota a margine, li abbiamo già visti quando parlavamo dei font incorporati, come strumento per indicare se un dato font fosse in stile corsivo, oppure normale.

Tecnicamente, esiste anche un terzo valore che possiamo assegnare a questa proprietà, ossia oblique, ma non ricordo di averlo mai visto usato in vita mia, almeno non negli ultimi dieci anni. Se volete essere originali, però, nulla vi vieta di scrivere
font-style: oblique;
per impostare lo stile corsivo in una determinata porzione di testo. Il risultato sarà comunque identico a quello che otterreste usando il valore italic.

font-weight

L’attributo font-weight funziona come il precedente, ma in questo caso ci permette di assegnare o rimuovere la forma in grassetto. Di base, tutto il testo contenuto in un tag <b>, <strong>, oppure in uno dei tag per i titoli (da <h1> a <h6>) è reso in grassetto, ma possiamo assegnare questa forma anche ad altro testo, oppure rimuovere il grassetto da uno di questi tag. Di conseguenza, scrivere
font-weight: bold;
renderà il testo in grassetto, mentre scrivere
font-weight: normal;
rimuoverà il grassetto, rendendo il testo in forma normale.

Proprio come abbiamo visto per font-style, anche per font-weight questi sono gli unici due valori che abbia senso utilizzare: bold e normal. Sempre in teoria, è anche possibile esprimere il livello di grassetto mediante un valore numerico, compreso tra 100 e 900 (valgono solo le centinaia: possiamo usare 300 o 500, ma non 304 o 476), dove 900 corrisponde a un grassetto estremamente marcato, mentre 100 è un grassetto che si nota appena. In teoria, appunto. In pratica, questo funzionerà soltanto se abbiamo un font con 9 forme diverse di grassetto, il che è molto improbabile, a meno che non abbiate un font progettato su misura. Manteniamoci dunque sui valori bold e normal e non avremo problemi.

text-transform

Questa è un attributo che ci permette di modificare il testo di un elemento, rendendolo interamente maiuscolo, interamente minuscolo, oppure rendendo maiuscola soltanto la prima lettera di ogni parola. Di fatto, è improbabile che ci capiterà di utilizzarlo al di fuori di un titolo, anche se talvolta potremmo volerlo usare per la prima riga di un paragrafo, ma è sempre utile conoscerne l’esistenza.

I valori possibili per questo attributo sono quattro: uppercase, lowercase, capitalize, none. Il loro significato dovrebbe essere abbastanza semplice da intuire, a ogni modo uppercase rende il testo in maiuscolo, lowercase lo rende in minuscolo, capitalize rende maiuscola soltanto la prima lettera di ogni parola e none annulla questa proprietà. Di conseguenza, le combinazioni possibili sono:
text-transform: uppercase; text-transform: lowercase; text-transform: capitalize; text-transform: none;

In particolare, la proprietà text-transform: none; ci servirà soltanto quando (e se) vorremo annullare, per un tag discendente, una delle altre tre proprietà assegnate a un tag antenato.

font-variant

Questo è un attributo estremamente specifico, che di fatto serve solo a rendere un testo in maiuscoletto. Scrivendo
font-variant: small-caps;
otterremo 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. Questo è un esempio di maiuscoletto, a titolo informativo.

Se siete la Morte del Mondo Disco, lo userete parecchio; in tutti gli altri casi, sarà molto raro trovarne un’applicazione pratica. Di fatto, un uso tipico di questo attributo sarà in combinazione con una classe, assegnata a un tag <span>, per racchiudere una o più parole che dovranno essere rese in maiuscoletto: sigle e poco altro.

text-decoration

Se vi aspettate che questo attributo aggiunga chissà quale effetto grafico al vostro testo, rendendolo affascinante al di là di ogni umana comprensione, allora preparatevi a una doccia fredda. Nonostante il nome, è un attributo che non possiede alcunché di decorativo, a meno che il vostro senso estetico non sia stato asportato chirurgicamente alla nascita, nel qual caso potreste anche trovarlo decorativo.

Di fatto, l’attributo text-decoration aggiunge al testo alcuni elementi extra, più che altro linee in varie posizioni. Può anche essere utilizzato per riprodurre quel fastidiosissimo testo lampeggiante, che fa molto web anni ’90, ma è improbabile che un dispositivo di lettura per e-book ve lo farà passare. Fortunatamente. È anche improbabile che avrete mai voglia di utilizzarlo in un libro normale, ma questo è un altro discorso.

I valori possibili per questo attributo sono cinque: underline, overline, line-through, blink, none. A parte none, per ovvie ragioni, gli altri valori possono essere combinati, se proprio lo vogliamo. Con underline sarà tracciata una linea orizzontale sotto al testo (sì, è così che sono tracciate le linee sotto ai link), overline traccerà una linea al di sopra del testo, line-through la traccerà attraverso il testo, blink renderà il testo lampeggiane e none annullerà ogni eventuale decorazione applicata a un testo.

Se vogliamo che i link nel nostro e-book non siano sottolineati, come invece accade normalmente, dovremo impostare una regola del tipo
a { text-decoration: none; }
, che rimuoverà la sottolineatura da tutti i tag <a>, ossia da tutti i link.

Di fatto, questo è probabilmente l’unico caso in cui vi troverete a utilizzare questo attributo: per togliere la sottolineatura dai link, se deciderete così. Se desiderate utilizzarlo per aggiungere un sottolineatura (o una sopralineatura) al testo, considerate anche l’opzione di ricorrere a un attributo borded-top o border-bottom, per ottenere lo stesso risultato, ma con una maggiore versatilità: con border potrete scegliere sia lo stile della linea, sia il suo spessore, sia il suo colore.

letter-spacing e word-spacing

Questi due attributi ci permettono di impostare lo spazio tra le lettere (letter-spacing) o tra le parole (word-spacing) in una porzione di testo: più precisamente, letter-spacing ci permette di aumentare o ridurre lo spazio tra una lettera e la successiva all’interno di una parola, senza variare però lo spazio tra una parola e l’altra, mentre word-spacing ci permette di aumentare o diminuire lo spazio tra una parola e la successiva, senza variare però lo spazio tra le lettere all’interno di una parola.

Il valore che assegneremo a entrambi questi attributi sarà un numero, accompagnato da una unità di misura (le solite, px o em): un numero positivo aumenterà lo spazio del valore corrispondente, un numero negativo lo ridurrà. Di conseguenza,
letter-spacing: 2px;
aumenterà lo spazio tra le lettere di 2 pixel, mentre
letter-spacing: -1px;
ridurrà di 1 pixel lo spazio tra le lettere.
word-spacing: 1em;
aumenterà di 1 em lo spazio tra una parola e l’altra, mentre
word-spacing: -.5em;
ridurrà di mezzo em lo spazio tra una parola e l’altra.

Se stiamo lavorando a una raccolta di poesie futuriste, è probabile che ci troveremo spesso a utilizzare questi attributi; in altri casi, invece, è probabile che ne avremo bisogno (ammesso che ne avremo bisogno) soltanto per rendere più o meno arieggiati i titoli.

7-6 Text-shadow

Dopo questo excursus su attributi più o meno decorativi, chiuderò con qualcosa che può davvero essere considerato decorativo: l’attributo text-shadow. Questo attributo ha lo stesso funzionamento di box-shadow, che abbiamo già visto, ma con una differenza: box-shadow si applica a blocchi di testo, come interi paragrafi o intere pagine, mentre text-shadow si applica a parole o lettere. In altri termini, con questo attributo possiamo far proiettare un’ombra alle varie lettere delle parole che compongono un testo. Ammesso che il dispositivo di lettura lo supporti già, il che non è certo e va testato sul campo.

Di base, questo attributo richiede quattro valori:

allineamento orizzontale dell’ombra;
allineamento verticale dell’ombra;
sfocatura dell’ombra;
colore dell’ombra.

Il primo valore ci dice di quanto sarà spostata in orizzontale la nostra ombra, rispetto alla lettera che la proietta: un numero positivo la proietterà verso destra, un numero negativo verso sinistra. Il secondo valore ci dice di quanto sarà spostata in verticale la nostra ombra, rispetto alla lettera che la proietta: un numero positivo la proietterà verso il basso, un numero negativo verso l’alto. Il terzo valore ci dirà quanto debba essere sfocata l’ombra: un valore di 0 la renderà estremamente netta, un numero superiore la renderà proporzionalmente più sfocata. Infine, il quarto valore indicherà il colore da utilizzare per la nostra ombra, espresso secondo le solite regole dei colori.

Ad esempio, la proprietà
text-shadow: -4px 4px 3px #999999;
disegnerà un’ombra spostata di 4 pixel a sinistra della parola, di 4 pixel verso il basso, un poco sfocata e di colore grigio scuro. Ogni lettera del testo avrà una propria ombra, che seguirà questa regola.

Un fantastico esempio di testo ombreggiato: mai più senza. Se lo vedete senza ombra, significa che il vostro dispositivo di lettura non supporta questa proprietà.

Se proprio vogliamo, possiamo anche assegnare due ombre a uno stesso testo: in questo caso, prima di tutto elencheremo i quattro valori per la prima ombra, poi inseriremo una virgola ed elencheremo i quattro valori per la seconda ombra. Ad esempio,
text-shadow: -4px 4px 3px #666666, 1px -1px 2px #000000;
proietterà due ombre: la prima è orientata verso sinistra e verso il basso, la seconda è orientata verso destra e verso l’alto. Se vogliamo assegnare tre ombre, il principio è lo stesso. In breve, possiamo assegnare tante ombre quante ne vogliamo, purché ogni set di quattro valori sia separato con una virgola dal set successivo. Non so in quali circostanze potreste desiderare di inserire una sfilza di ombre a un testo, in un normale libro, ma ancora non esistono leggi che vi vietino di farlo.