Come usare fogli di stile CSS negli EPUB (1)

Come ho già scritto in diverse occasioni, uno e-book in formato EPUB è, di fatto, un sito web in versione tascabile (e locale). Come ogni altro sito web, è composto da una serie di documenti di testo, in formato XHTML (per adesso, ma un giorno dovremmo passare allo HTML5, se e quando lo standard EPUB3 sarà adottato ovunque), che costituiscono i vari capitoli del libro: sono normali files, che potremmo estrarre e aprire con qualsiasi browser, e di solito sono raccolti in una cartella Text. Se vi è mai capitato di aprire uno EPUB con Sigil, per modificarne il contenuto o anche solo per semplice curiosità, è la prima cartella che trovate, nella lista sulla sinistra. Oltre a queste pagine web, uno EPUB contiene di solito altri tipi di documenti, ognuno raccolto nella cartella più adatta: immagini nella cartella Images, font incorporati nella cartella Fonts, eventuali files audio e video nelle cartelle Audio e Video, eccetera. Fin qui, niente di nuovo.
C’è però un’altra cartella, molto importante, di cui mi occuperò oggi: è la cartella Styles. In questa cartella, se uno EPUB è stato realizzato decentemente, è contenuto un singolo file con estensione .CSS (può anche essercene più di uno, ma è raro e non molto comodo) e spesso un nome strano, se abbiamo lasciato che lo generasse in automatico qualche programma. Questo file è il foglio di stile ed è il documento che determinerà l’aspetto del nostro EPUB, cioè il modo in cui i vari dispositivi di lettura lo visualizzeranno.
È un sistema che si applica anche ai siti web; un sito ben realizzato avrà, da qualche parte, un foglio di stile, in cui sono contenute tutte le indicazioni su come visualizzare quel sito: font da utilizzare di preferenza, il colore dei vari elementi, i margini da lasciare, la dimensione preferita della pagina, eccetera. Uno EPUB non fa eccezione e si comporta da sito web anche sotto questo aspetto: nel foglio di stile possiamo indicare tutte le nostre preferenze e i lettori cercheranno di seguirle, nei limiti delle loro possibilità. Se vogliamo che le pagine del nostro e-book siano verdi, con scritte di colore turchese, dovremo indicarlo nel foglio di stile, e sempre nel foglio di stile potremo indicare quanto spazio lasciare tra il titolo di un capitolo e il contenuto, quale formattazione utilizzare per il testo, quale rientro per la prima riga di ogni paragrafo, e così via, in un elenco potenzialmente molto lungo.
Per ottenere un foglio di stile, abbiamo almeno due possibilità: realizzare il nostro futuro EPUB con un qualunque elaboratore di testi, impostando font, colori, margini e tutto il resto, e lasciare poi che il programma di conversione costruisca per noi il foglio di stile, con buone probabilità di doverlo modificare e correggere a mano, oppure realizzare un testo di base, senza formattazioni particolari, e scrivere a parte il nostro foglio di stile, da inserire poi attraverso Sigil. Qualunque sia la vostra scelta, è comunque utile avere almeno una idea di come sia fatto un foglio di stile, così da potervi mettere le mani senza doversi muovere a caso: per questo motivo, procederò adesso con una breve presentazioni delle principali classi utilizzare per uno e-book e degli attributi che più spesso vorrete o dovrete modificare, per dare al vostro testo l’aspetto che desiderate. Non sarà un elenco esaustivo, perché mi limiterò allo stretto necessario per uno e-book, ma dovrebbe costituire almeno una mappa di emergenza, per avventurarsi nel magico mondo del CSS.
Prima di tutto, dobbiamo aggiungere un foglio di stile a una pagina, se già non lo possiede. È la cosa più semplice: se state usando Sigil, scegliere la vista codice, poi controllate nelle prime righe della pagina, quelle racchiuse nei tag <head> e </head>, per vedere se compare una scritta del tipo
<link href="../Styles/nome_del_foglio.css" type="text/css" rel="stylesheet" />
Se compare, il foglio di stile è già stato aggiunto alla pagina; se non compare, dovrete aggiungere voi quella riga di codice, possibilmente subito dopo il tag <title>, modificando ovviamente il nome del vostro foglio di stile nella parte href. Poi, si tratterà di creare un file con quel nome nella cartella Styles, se già non esiste. A ogni modo, procediamo col viaggio nel CSS.
Come esempio, prenderemo in esame il foglio di stile per una pagina che ha la seguente struttura:
<body>
    <div id="pagina">
        <div id="titolo">
            <h2>Capitolo 1</h2>
        </div>
        <div id="testo">
            <p class="paragrafo">bla bla bla</p>
            <p class="paragrafo">bla bla bla</p>
            <p class="paragrafo">bla bla bla</p>
        </div>
    </div>
</body>
Una struttura molto semplice, certo più semplice di molte strutture che vedremo, utilizzando la vista codice di Sigil. Tutto ciò che appare nella pagina è dentro l’elemento body; questo elemento è a propria volta diviso in titolo, dove vediamo il nome del capitolo, e testo, dove apparirà il testo del capitolo. Ognuno degli elementi che vediamo, racchiusi tra < e >, potrà essere modificato nel foglio di stile, utilizzando o il nome dell’elemento (body, h2, p), oppure il nome che gli è stato assegnato (quello che compare accanto a id e class).
Un foglio di stile si presenta infatti come un elenco di strutture strane, composte da un nome e una serie di coppie attributo-valore, racchiuse tra due parentesi graffe. Qualcosa di questo tipo (ma senza colori, che ho aggiunto io a scopo esplicativo):
body {
    display: block;
    background-color: gainsboro;
    font-size: 1em;
    font-family: "Courier New", Courier, monospace;
}
Per quanto possa apparire strano a prima vista (e forse anche a seconda vista), in realtà è una struttura molto semplice da capire e modificare. Come ho scritto poco sopra, una pagina web, o nel nostro caso una pagina dello EPUB, è divisa in più elementi, ognuno contraddistinto da un particolare tag in XHTML; spesso, i tag possiedono a propria volta un nome specifico (quello che compare accanto a id e class), per suddividere il documento in modo ancora più dettagliato e preciso. Nel nostro esempio, usiamo i nomi “titolo” e “testo” per distinguere due tag uguali, cioè i tag div, così da assegnare a ognuno caratteristiche differenti.
Un foglio di stile elenca tutti gli elementi che vogliamo modificare, indicandoli per nome (body, nell’esempio qui sopra): all’interno delle parentesi graffe sono elencati gli attributi che vogliamo modificare in quel particolare elemento, accompagnati dal valore che dovrà essere loro assegnato. L’attributo background-color, ad esempio, indica il colore che dovrà avere lo sfondo dell’elemento body, e il colore sarà gainsboro, ossia il valore assegnato a quell’attributo (gainsboro è il nome di un colore, per quanto possa sembrare strano; i colori possono essere indicati per nome, se hanno un nome valido, oppure col codice numerico corrispondente). In questo esempio, la nostra pagina avrà un colore gainsboro, invece di essere bianca. A voi scoprire che tipo di colore sia.
Ogni pagina XHTML possiede un elemento body ed è la sua parte fondamentale: tutti gli altri elementi sono costruiti su quello e all’interno di quello. Nel vostro foglio di stile, dunque, è bene che l’elemento body sia il primo e contenga tutti quegli attributi che dovranno costituire la struttura portante dello EPUB: colore della pagina, colore e dimensioni dei caratteri, ampiezza dei margini, tipo di font da utilizzare, eccetera. Ognuno di questi elementi potrà tranquillamente essere modificati per parti specifiche del libro, a seconda delle necessità, ma qui è bene indicare i valori di base per il nostro libro.
Ovviamente, ciò che noi indichiamo in un foglio di stile è un suggerimento, che il dispositivo di lettura cercherà di seguire come può: se gli chiediamo di usare un carattere che non possiede, o un colore che non possiede, il dispositivo non potrà soddisfare la nostra richiesta e utilizzerà il font o il colore di default. Su un computer succede raramente, ma su altri dispositivi può essere un problema reale: non esageriamo con le richieste strane e, se necessario, aiutiamo i dispositivi, per esempio usando font incorporati nel nostro EPUB.
Questo vale come premessa generale; la prossima volta vedremo gli attributi che userete più spesso in un normale e-book, con indicazioni sui valori che si possono attribuire e i tag a cui abbinarli di preferenza (ma nessun vi vieta di assegnare qualsiasi tipo di valore a qualsiasi tipo di tag, una volta appreso il meccanismo). Per adesso, potete scaricare ed esaminare un semplice modello di testo, in cui sono messe in pratica alcune delle possibili modifiche: guardate il suo foglio di stile, guardate il risultato sulla pagina e preparatevi a comprenderne il significato nella seconda parte della guida.

Blender – Impostare e modificare il mondo

Finora ci siamo concentrati sugli oggetti all’interno di Blender e su come controllarti, modificarli, colorarli e attribuire loro altre proprietà; in altri termini, abbiamo modificato gli oggetti, ma li abbiamo lasciati galleggiare nel vuoto, come se non esistesse altro all’infuori di essi. In particolare, lo sfondo della scena ha mantenuto quel fascinoso grigio Blender, che fa molto battuta iniziale di Neuromancer.
In realtà, gli oggetti di Blender non sono sospesi nel vuoto, ma si trovano all’interno di un mondo, o di una scena, con proprietà ben precise. Una di queste proprietà è la forza di gravità, di cui però non ci occuperemo oggi, anche perché presuppone l’uso di animazione; una proprietà più generica, e che abbiamo sotto agli occhi fin dal primo avvio del programma, è lo sfondo della scena, il quale è poi soltanto una proprietà di un oggetto più grande e fondamentale. Questo oggetto è il mondo.
Blender ci mette a disposizione vari oggetti, nella sua schermata di default: un cubo, come abbiamo già, visto, ma anche una videocamera e una lampada. Questi tre oggetti si collocano all’interno di un oggetto ancora più fondamentale, che invece potrebbe esserci sfuggito, ed è il mondo. Il mondo è il contesto al cui interno si trovano gli elementi sulla scena; a volte lo possiamo ignorare, se stiamo solo sperimentando nuovi modi per modificare e scolpire un oggetto, ma molto più spesso diventerà fondamentale, se stiamo lavorando a una immagine vera e propria, a un video o ad altro. in breve, ogni volta che abbiamo bisogno di uno sfondo che non sia un grigio smorto, il mondo è il primo elemento che dovremo guardare (ma non l’unico).
In versioni precedenti di Blender, era necessario prima di tutto creare un mondo, ma adesso ne abbiamo già uno a nostra disposizione, fin dall’avvio: possiamo accedere alle sue proprietà cliccando sulla terza icona da sinistra, nella finestra delle proprietà.

Questa è la scheda con le proprietà del mondo, o almeno una parte di esse.
Il primo elemento che noteremo, con ogni probabilità, è il riquadro Preview, nella parte alta della finestra: il suo colore coincide esattamente con quello dello sfondo della nostra scena, una tonalità di grigio non molto allegra. Quel riquadro ci mostra appunto un’anteprima di come apparirà lo sfondo della scena ed è lì che potremo vedere che effetto hanno le nostre  modifiche alle proprietà del mondo. Un modo migliore per vederle, però, consiste nel premere il tasto F12 e realizzare una resa ad alta definizione della scena, ma questa potrebbe essere lenta, se il nostro computer ha una potenza non eccessiva e la scena contiene una camionata di elementi. Ci sono varie proprietà che possiamo modificare e che vedremo riflesse in questo riquadro, ma per oggi ci concentreremo soltanto su tre: il cielo, le stelle e la nebbia.
Il cielo, prima di tutto. Se siamo stanchi di vedere sempre lo stesso grigio, come sfondo delle nostre creazioni, possiamo modificarlo in tre modi: cambiando i colori reimpostati, inserendo una immagine, da usare come sfondo, oppure creare noi stessi una simulazione passabile di cielo.
Il primo caso è il più semplice, perché basta modificare i colori indicati nella sezione World, subito sotto a Preview, in particolare Horizon Color e Zenith Color: il primo indica il colore che il cielo deve avere nel suo punto più basso, ossia sulla linea di orizzonte, mentre il secondo indica il colore che il cielo dovrà avere nel suo punto più alto. Selezionando l’opzione Blend Sky, poi, il cielo sfumerà a poco a poco dal colore dell’orizzonte al colore dello zenit.
Inserire una immagine già esistente non è molto complicato: si tratta solo di assegnare una texture al mondo e correggere un paio di impostazioni, come vedremo. Per inciso, il mondo è un caso in cui è possibile utilizzare una texture, senza aver prima assegnato un materiale su cui applicarla. Vediamo come fare, anche se in parte si tratta di ripetere quanto già visto parlando di texture la volta scorsa.
Partiamo dalla nostra classica scena con cubo grigio su sfondo grigio scuro, quella che comprare al primo avvio di Blender. Deselezioniamo il cubo, premendo il tasto A: non ci interessa e ci eviterà possibili errori, strada facendo. Nella finestra delle proprietà, clicchiamo sulla icona del mondo, per aprire la sua lista di proprietà. Qui abbiamo da correggere un paio di impostazioni nella sezione Word, appena sotto a Preview: selezioniamo Blend Sky e modifichiamo lo Zenith Color, portandolo a bianco (assegniamo 1 a ogni vice).

Fatto questo, è tempo di passare al reparto Texture, cliccando sull’icona a forma di scacchiera, nella parte alta della finestra. Abbiamo già visto come selezionare e caricare una immagine, da usare come texture; dopo averlo fatto, dovremo spostarci verso il fondo della finestra, cercando la sezione Influence: qui dovremo selezionare le voci Blend, Horizon e Zenith Up, se già non sono selezionate (non dovrebbero esserlo, almeno le ultime due). A questo punto, premiamo il tasto F12 e guardiamo il risultato. Se non è soddisfacente, possiamo sempre correggere altre impostazioni, per centrare meglio la immagine di sfondo, o per modificare il mondo in cui è stata “spalmata” sullo schermo.
Più interessante è invece il lavoro di creare un cielo artificiale, da aggiungere alla scena: partiremo creando un cielo nuvoloso, ispirandomi a ciò che vedo fuori dalla finestra.
Apriamo un nuovo piano di lavoro, con la combinazione di tasti CTRL+N, deselezioniamo il cubo, come abbiamo visto poco sopra, e apriamo la voce World nella finestra delle proprietà. Otterremo sempre questo:

Nella sezione World, che è sempre sotto a Preview, selezioniamo anche stavolta Blend Sky, assegniamo un bel colore bianco a Zenith Color e un bel blu a Horizon Color. L’anteprima ci mostrerà già una vaga idea di come sarebbe a questo punto il nostro cielo, ossia una miscela in cui si parte dal blu e si tende a poco a poco verso il bianco; il che è normale, avendo noi scelto il blu come colore per l’orizzonte e il bianco come colore per lo zenit.

Volendo, possiamo selezionare anche Real Sky, per dare maggiore tridimensionalità alla scena, ma questo ci serve più che altro se stiamo pianificando una scena in movimento: per una scena statica, invece, la differenza sarà minima.