Three.js – Una libreria per un WebGL semplificato

WebGL è una nuova tecnologia, incorporata nei browser (o almeno in buona parte dei browser), che permette di creare e disegnare immagini e animazioni 3D su una pagina web, senza bisogno di utilizzare plugin o programmi esterni, come il Flash, ma basandosi soltanto sul buon vecchio JavaScript. Questo per dirla in modo molto semplice, sorvolando sulla storia e tutto il resto.

Per visualizzare una grafica prodotta con WebGL, o per utilizzare un videogioco basato su WebGL, è sufficiente avere un browser che supporti questa tecnologia: in pratica, più o meno tutti i browser, a parte Internet Explorer, almeno per il momento. per utilizzare WebGL in modo attivo, ossia per programmare grafiche o videogiochi in 3D, gli strumenti necessari sono sempre un browser che lo supporti, una discreta conoscenza del JavaScript e una buona conoscenza di algebra lineare, se siete così pazzi o determinati, da voler programmare a mano le matrici. Se non siete così pazzi o così determinati, non preoccupatevi: praticamente nessuno lo fa, se non in fase di apprendimento. Di solito, la parte più algebricamente hardcore è affidata a librerie JavaScript, che si occupano per noi dei calcoli più complicati, lasciandoci il piacere e il privilegio di lavorare sul risultato dei calcoli. La più usata di queste librerie è Three.js, di cui parlerò oggi.

Se ricordate la versione 3D di Pong, presentata come uno degli ultimi esperimenti su Chrome, la parte grafica è stata realizzata proprio con la libreria Three.js, come accennavo nel relativo articolo: questo per dare un esempio concreto del suo utilizzo. Niente di strano: si possono scrivere a mano le matrici e ci si può occupare personalmente di tutti i calcoli necessari, ma questo va bene solo in fase di apprendimento, quando è necessario capire i meccanismi della grafica 3D. Quando però si passa dall'apprendimento alla produzione, librerie ausiliarie come Three.js sono fondamentali, per ridurre il lavoro e il tempo da spendere sul progetto. In linea generale, usare Three.js per lavorare col WebGL è come usare jQuery per lavorare col JavaScript: entrambe le librerie costituiscono un modo per interagire a un livello più alto di astrazione con la materia grezza che si trova sotto di esse. Esattamente come jQuery, poi, Three.js non è l’unica libreria esistente, per lavorare col WebGL, ma solo una delle più diffuse e più usate.

Le caratteristiche di Three.js, dunque. Prima e principale caratteristica, comune anche alle altre librerie della stessa famiglia, è di occuparsi per conto nostro della matematica necessaria: significa che ci risparmieremo parecchie linee di codice, ad alto tasso di errori e basso tasso di divertimento (soprattutto se non amiamo la matematica). Sempre per conto nostro, Three.js si occupa anche della fase di rendering per ogni oggetto presente in scena: noi dovremo soltanto indicarle cosa fare e la libreria saprà come farlo, senza bisogno di nostre istruzioni. Inoltre, al puro WebGL unisce anche altri elementi, che spesso lo accompagnano ma che non sono parte diretta di quella tecnologia: ad esempio, il supporto per il mouse, così da poter interagire direttamente con la scena, spostando e trascinando oggetti e così via. Infine, ma non meno importante, Three.js permette facilmente di introdurre una soluzione alternativa, anche per quei browser che non supportano il WebGL: se non è presente il supporto per il 3D, possiamo sostituirlo col normale canvas 2D. Come è ovvio, il risultato estetico non sarà identico, ma la grafica o il videogioco funzioneranno ugualmente.

Three.js, poi, è orientata verso una programmazione a oggetti, il che può essere sia un vantaggio, sia uno svantaggio, a seconda dei punti di vista e delle abitudini di lavoro col JavaScript: se decidete di usare questa libreria, preparatevi a dover ricorrere spesso a new, per creare nuovi oggetti, che possono essere figure geometriche, luci, videocamere, la scena che contiene tutta la grafica e così via. Così ha deciso il suo autore.

Una caratteristica curiosa di Three.js, poi, è la presenza di un grande numero di esempi, abbinata a una documentazione alquanto scarna, sul piano dei manuali: quando scaricate la libreria, non aspettatevi niente di più elaborato di un basilare “Hello World”, incluso nel pacchetto. È possibile però trovare altrove guide e tutorial, principalmente in inglese, e anche accenni o capitoli dedicati a questa libreria, nei testi generali sul WebGL. Chi preferisce imparare smanettando col codice, però, avrà appunto oltre cento esempi con cui divertirsi, vivisezionandoli e sperimentando varie modifiche, per capire con la pratica il loro funzionamento. Tra parentesi, molti di questi esempi richiedono la presenza di un server, per funzionare: se ne avete uno installato sul vostro computer, apriteli da lì e ne guadagneranno anche le prestazioni.

I passaggi fondamentali, per creare e popolare una scena, non sono poi molto diversi da quelli che avevamo già visto, parlando di Blender: siamo sempre nel campo della grafica 3D, dopotutto, e a cambiare sono solo il linguaggio e il tipo di ambiente. Per un qualsiasi tipo di progetto con Three.js, avremo bisogno di inserire un renderer, una camera e una scena, al cui interno potremo poi sistemare oggetti (o mesh, per sembrare più professionali), luci e quant'altro. In altri termini, gli oggetti fondamentali che dovremo creare con new, nella funzione iniziale, sono:

THREE.Renderer - un oggetto che si occupa di disegnare la scena sullo schermo.

THREE.Scene - il contenitore di tutto ciò che apparirà sullo schermo.

THREE.Camera - la videocamera virtuale, attraverso cui vedremo la scena.

A questi tre oggetti, indispensabili, potremo poi aggiungerne altri, per avere anche qualcosa da vedere sullo schermo. Questi oggetti supplementari sono

THREE.Light - una sorgente di luce, di un colore a nostra scelta, indispensabile se vogliamo che sia resa la illusione di tridimensionalità degli oggetti (senza luce, appariranno bidimensionali).

THREE.Object3D - la classe base degli oggetti raffigurabili: alcuni tipi sono già definiti e pronti all'uso, altri li possiamo creare noi.

La tipologia base di oggetti, come già abbiamo visto con Blender, è Mesh e a ogni mesh dovremo assegnare due altri oggetti, nel momento della creazione: THREE.Geometry, che contiene la forma dell’oggetto (cubo, sfera, prisma eccetera) e THREE.Material, che contiene informazioni sulle qualità dell’oggetto, come il colore. In un qualsiasi progetto con Three.js, dunque, la funzione iniziale creerà un renderer, una scena, una camera, aggiungerà alla scena i vari oggetti presenti e la camera, infine passerà la mano al loop, che continuerà a ridisegnare lo schermo,a  intervalli regolari. Un esempio di come fare tutto questo lo troviamo già nel pacchetto della libreria, sotto forma di breve tutorial nella cartella "docs"; per il resto, potremo divertirci a squartare la caterva di esempi disponibili.

Esperimenti di Chrome: Cube Slam e WebRTC

Una quarantina di anni fa, quando i computer vivevano la loro età del rame e i videogiochi erano ancora in piena età della pietra, compariva sulla scena Pong, uno dei primi esemplari di gioco. Pong aveva una struttura molto semplice: due lineette verticali, una a destra e una a sinistra, si rilanciavano a vicenda un quadratino, potendosi muovere solo verso l’alto o verso il basso. Con una certa dose di fantasia, era una simulazione di ping-pong.

Curiosamente, proprio questo videogioco “preistorico” è stato scelto da Google, per essere utilizzato come cavia con cui testare e mostrare una nuova tecnologia per la comunicazione web: ne è nato così Cube Slam, uno degli ultimi esemplari appartenenti alla categoria dei Chrome Experiments, ossia applicazioni web sviluppate per mostrare quale sia il supporto offerto da Google Chrome a vari tipi di tecnologie sperimentali. Nel caso di Cube Slam, la tecnologia in questione è il WebRTC, che consente una comunicazione diretta da browser a browser, usando soltanto elementi nativi del browser stesso: niente Flash o altri tipi di plugin esterni, insomma. Ma guardiamo meglio cosa sia Cube Slam.

Questa è la schermata introduttiva, che apparirà se ci colleghiamo alla pagina con Google Chrome. Altri tipi di browser, come Firefox o Safari, potrebbero funzionare, ma non è garantito: dopotutto, è un progetto che serve a mostrare le funzionalità di Chrome e non ci si può aspettare che sia anche ottimizzato per funzionare altrettanto bene su altri browser.

Come possiamo vedere al centro, il campo di gioco è più o meno identico a quello del vecchio Pong, con una notevole variante: Cube Slam è tridimensionale, di conseguenza le due lineette sono sostituite da due parallelepipedi e il quadratino è adesso un cubo. Differenze marginali, si potrebbe dire. Una differenza più notevole è data dal contenuto del gioco, dove il semplice tic toc delle due lineette che si rilanciano l’un l’altra un quadratino è stato arricchito da svariati elementi extra, come campi gravitazionali, ostacoli, bombe e più o meno tutto l’armamentario che si può immaginare in un videogioco di questo tipo.

Sempre dalla schermata introduttiva, possiamo notare un altro particolare, cioè le due modalità di gioco offerte: contro un amico, oppure contro un orso. La seconda, per quanto possa suonare bizzarra, è soltanto un modo per dire che giocheremo contro il computer, ossia contro una tipica AI da videogioco, in questo caso impersonata da un orso. La prima opzione è invece molto più interessante, perché ci conduce al cuore dell’esperimento: la comunicazione diretta via browser, nel caso specifico tra il nostro browser e quello di un amico, contro il quale giocheremo.

WebRTC, ossia Web Real Time Communication, è una nuova tecnologia, per introdurre una comunicazione diretta tra browser, utilizzando solo le risorse a disposizione dei browser, senza appoggiarsi a programmi esterni. In particolare, il fine di WebRTC è quello di rendere la comunicazione audio e video, attraverso i browser, semplice e immediata quando la comunicazione testuale. Cube Slam utilizza WebRTC per collegarci direttamente col browser di un nostro amico, se scegliamo di giocare contro un amico e se l’amico è in linea (ovviamente), gestendo in modo diretto la comunicazione tra noi e lui: noi vedremo sullo schermo il nostro amico e lui vedrà noi. Niente di diverso da una normale video chat, da un certo punto di vista, ma la differenza sta nel modo in cui la comunicazione è realizzata: direttamente dal browser e non utilizzando un plugin di Skype, come ad esempio fa Facebook. peraltro, lo scopo stesso del gioco è proprio quello di abbattere lo schermo del nostro avversario, cosa che avverrà dopo che lo avremo colpito per tre volte.

Per essere giocato contro un amico, quindi, Cube Slam richiede la presenza di webcam e microfono (sì, oltre a vederci, possiamo anche insultarci in diretta, mentre giochiamo): se non utilizziamo un firewall (pessima abitudine), i dati saranno trasmessi direttamente dal nostro browser al browser del nostro amico, senza bisogno di un server, in un modo simile a quanto avviene con programmi P2P, come eMule o BitTorrent.

Per quanto riguarda la grafica, che è in 3D, può essere visualizzata in due modi: se il nostro browser supporta il WebGL, che è una grafica 3D nativa dei browser, il gioco sarà visualizzato utilizzando quella, dato che è stato prodotto con three.js, una libreria JavaScript per semplificare il ricorso alla grafica 3D; in assenza di WebGL, invece, ripiegherà sulla simulazione del 3D attraverso il CSS, così da garantire un risultato simile, anche se non proprio identico, anche su altri browser.

Scribus, alternativa libera a InDesign

Scribus è un programma di impaginazione libero e open source, disponibile per tutti i principali sistemi operativi: Windows, Macintosh, Linux/UNIX e così via. Meglio ancora, è disponibile in lingua italiana e corredato da una valida guida interna (anche questa in gran parte in italiano), che ne descrive la struttura, le funzioni principali e fornisce anche un breve tutorial, con un esempio concreto di creazione di un documento. È un buon punto di partenza e vale la pena cominciare da lì il proprio studio di Scribus.

L’installazione del programma non dovrebbe presentare particolari problemi, ma per gli utenti Windows c’è un’avvertenza: al termine della procedura di installazione, se decidete di aprire il file readme, Scribus vi segnalerà che avreste dovuto installare un altro programma, prima di Scribus, e cioè Ghostscript. Se non lo avete installato, a ogni successivo avvio Scribus si lamenterà di non riuscire a trovarlo: è bene dunque scaricare e installare Ghostscript, prima di installare Scribus. A ogni modo, è anche possibile utilizzare Scribus, senza aver installato Ghostscript, ma alcune funzioni non saranno disponibili, ossia le funzioni per cui è richiesto Ghostscript: nello specifico, non potrete importare file in formato EPS, utilizzare l’anteprima di stampa, o generare codici a barre. Nei sistemi operativi Linux/UNIX, invece, Ghostscript è di solito già installato, per cui il problema non si pone, anche se potrebbe essere necessario aggiornarlo.

Una volta installato, al primo avvio vi troverete molto probabilmente davanti a questa finestra,

cioè la finestra per la creazione di un nuovo documento. A differenza di un elaboratore di testi, come ad esempio Word o Writer, o anche il semplice Blocco Note, non ci sarà già una pagina bianca standard ad aspettarvi, pronta a essere profanata dai vostri scritti: dovrete crearla voi stessi, in base alle vostre esigenze per quel particolare lavoro. per facilitarvi le cose, ma anche per darvi un primo suggerimento su come cominciare, Scribus vi proporrà subito la finestra per la creazione di un nuovo documento. Se lo trovate troppo invasivo, o se non amate in generale essere imboccati con le operazioni da svolgere, potete sempre selezionare “Non mostrare più questa finestra di dialogo”, in basso a sinistra: in questo caso, all'avvio vi troverete davanti il programma nudo e crudo, in attesa che voi apriate un file già esistente, oppure creiate un nuovo documento.

Come ho detto in precedenza, nella guida di Scribus è presente un tutorial in italiano, che vi mostrerà le principali funzioni del programma: se decidete di seguirlo, lo troverete nella sezione Documentazione -> Le basi di Scribus, col titolo “Iniziare subito a lavorare con Scribus”. Un altro possibile punto di partenza è il tutorial online, che potete raggiungere dal menu Aiuto -> Guide online, sotto il nome di “Primi passi con Scribus”.

Più in generale, è utile leggere tutti gli articoli presenti nella sezione “Le basi di Scribus”, nella guida interna, se non avete mai utilizzato un programma di questo genere. È opportuno ripetere, infatti, che Scribus non è un programma per la creazione o la scrittura di testo, ma per la sua impaginazione: anche se contiene un elaboratore di testo molto semplice (poco più di un Blocco Note), il suo utilizzo fondamentale consiste nell'importare documenti e poi impaginarli, non crearli da zero. In altri termini, se volete creare un semplice volantino, con due righe di testo, potete farlo direttamente con Scribus, senza problemi; se invece lo volete usare per impaginare un libro o una rivista, scrivete prima di tutto il testo col vostro editor preferito, salvatelo in un formato TXT o ODT e poi utilizzate pure Scribus per impaginarlo, aggiungere le immagini e così via. Una volta concluso il lavoro, il risultato finale potrà essere esportato come PDF, come immagine, oppure stampato (o anche tutte e tre le cose assieme, volendo).

Le funzioni di base di Scriptus possono poi essere semplificate, utilizzando script per automatizzare diversi tipi di operazioni: alcuni sono preinstallati e li potete trovare elencati nel menu Script, ma potete aggiungerne quanti volete, in base alle vostre esigenze. L’unico requisito necessario è saper programmare in Python, cioè il linguaggio in cui gli script sono realizzati; inoltre, è anche possibile aggiungere plugin, in questo caso realizzati in C++. La guida di Scribus fornisce qualche informazione in proposito, nella sezione For Developers, assieme a una introduzione alla creazione di plugin in C++, ma non è stata tradotta in italiano: nulla vi vieta di leggerla, se siete interessati all'argomento.

Guida al CSS per EPUB – Come lavorare

Nella puntata precedente abbiamo parlato di bordi, margini e di come impostare (o annullare) la distanza tra gli elementi all'interno di una pagina. Con questo non abbiamo certo esaurito il discorso sul CSS, che include svariate altre funzioni per impaginare gli elementi su più colonne, animarli e così via, ma tutto ciò che poco o nulla a che fare con gli EPUB: se vogliamo che un nostro e-book sia leggibile senza problemi anche su uno smartphone, dobbiamo limitarci a una sola colonna e il ricorso ad animazioni, oltre ad avere poca attinenza coi libri in generale, potrebbe non essere supportato da tutti i lettori in circolazione. Volendo, il problema relativo alla dimensione dello schermo può essere risolto, ricorrendo a un layout adattabile (come accade su molti siti web), ma è un argomento che va ben al di là sella semplice introduzione al CSS e, semmai, lo affronterò in futuro. Per adesso, vediamo invece di riassumere il discorso, con un esempio più concreto.

Supponiamo di dover lavorare su una pagina strutturata in questo modo:

<body>
<div class=”titolo”>
<h2>Capitolo 1</h2>
</div>
<div class=”testo”>
<p class=”primo”>Testo del primo paragrafo.</p>
<p>Testo del paragrafo.</p>
<p>Testo del paragrafo.</p>
<p>Testo del paragrafo.</p>
<p>Testo del paragrafo.</p>
<p>Testo del paragrafo.</p>
<p>Testo del paragrafo.</p>
</div>
</body>

Corrisponde più o meno a una struttura ideale, per lavorare col CSS. Come ho accennato in precedenza, diversi tag HTML possiedono una formattazione di base, inserita automaticamente dal browser o dal dispositivo di lettura: il tag <p>, ad esempio, sarà quasi sempre seguito da una riga vuota, a separarlo dal paragrafo successivo, mentre i vari tag usati per i titolo, come <h1>, <h2> e così via, avranno già in partenza una dimensione differente, rispetto al testo normale, e spesso saranno anche visualizzati in grassetto. Queste impostazioni automatiche possono andarci bene, ma possono anche essere una seccatura, se vogliamo avere un controllo totale sulla grafica della pagina. Se le consideriamo una seccatura, nella prima parte del foglio di stile possiamo inserire alcune regole per annullarle: le ho riassunte nel file CSS che potete scaricare da qui. Per usarle, copiate il contenuto e incollatelo all'inizio del vostro foglio di stile, così da fare piazza pulita di tutto, prima di cominciare il lavoro.

Per scrivere il nostro foglio di stile, ricordiamo sempre il principio di base del CSS: partiamo dalle regole più generali, che costituiranno la base del nostro stile, e procediamo poi verso le regole più specifiche, che riguarderanno soltanto piccole porzioni di testo. Nella nostra pagina di esempio, il tag di base è <body>, che li include tutto. È il capofamiglia, se ricordiamo la struttura gerarchica dello HTML. Subito dopo di lui, vengono i tag <div class=”titolo”> e <div class=”testo”>, alla pari: sono tag fratelli (oppure sorelle, come preferite), nonché figli del tag <body>. Il tag <div class=”titolo”> ha un solo figlio, ossia il tag <h2>, e il suo ramo si conclude lì; il fratello <div class=”testo”>, invece, ha diversi figli, tutti i tag <p>, e ognuno di essi avrà probabilmente altri figli, se abbiamo usato qualche corsivo o grassetto, oppure se abbiamo inserito link, immagini o altro. È una famiglia molto ramificata, ma dobbiamo sempre ricordare la sua struttura: i figli ereditano lo stile del padre, a meno che questo stile non sia modificato in una delle loro regole.

Se vogliamo impostare uno sfondo che valga per tutto il capitolo, impostiamolo come regola per il tag <body>. Scriveremo ad esempio:

body{
    color: yellow;
}

se vogliamo che il capitolo abbia uno sfondo giallo. Potremo poi cambiare il colore dello sfondo per un tag specifico, ma il giallo sarà il colore di base per lo sfondo di tutti gli elementi della pagina. Se vogliamo impostare un font di base, modificandolo eventualmente per i titoli, il tag body è sempre un buon punto in cui impostarlo. Unendolo alla regola precedente, otterremo

body{
  color: yellow;
  font-family: “Times New Roman”, Times, serif;
}

che assegnerà uno sfondo giallo alla pagina e imposterà il font di base per tutto il testo. Per modificare il font del titolo, poi, basterà scrivere

.titolo{
  font-family: "Arial Black", Arial, sans-serif;
}

In questo modo, il tag <div class=”titolo”> utilizzerà un font diverso, che sarà ereditato dai suoi figli (il solo tag <h2>, in questo esempio). Il contenuto di <div class=”testo”>, invece, erediterà il font impostato per <body>, che è suo padre. Se la catena di genitori, figli e fratelli ci confonde, può essere utile tracciare un breve schema della rete di rapporti, così da averla sempre a portata di occhio, mentre scriviamo il foglio di stile: può aiutare a chiarire perché un determinato elemento abbia un certo colore, oppure utilizzi un certo font.

Il tag body è un ottimo posto anche per inserire tutte le regole che determineranno i margini della pagina, quando spazio vuoto dovrà essere lasciato sui bordi, eccetera. Ad esempio, se al tag body aggiungiamo anche una regola

padding: 7px 10px 5px 10px;

tutta la pagina presenterà un margine alto di sette pixel, laterale di dieci pixel e basso di cinque pixel: avremo insomma creato una piccola cornice bianca attorno al contenuto della pagina.

Titolo e testo, nel nostro esempio e nella maggior parte delle pagine ben strutturate, sono due elementi fratelli: le regole che assegniamo a uno non influiscono sull'altro ed è bene così. Per separarli, inserendo un certo spazio tra il titolo e il primo paragrafo del testo, non premiamo tre o quattro volte il tasto “Invio”, perché il risultato non è garantito. Il modo migliore per separarli è usare i margini, come già abbiamo visto. ad esempio, se scriviamo la regola
.titolo{
  margin-bottom: 30px;
}

avremo la garanzia che il titolo e il primo paragrafo saranno separati da uno spazio vuoto di trenta pixel. Possiamo assegnare qualsiasi valore, a seconda delle nostre preferenze, ma la cosa importante è assegnarlo alla proprietà margin-bottom, che determina la distanza tra la fine di questo elemento e l’inizio del successivo.

Venendo al testo, molti libri scelgono di rientrare la prima riga di ogni paragrafo. Se vogliamo adottare questo stile per il nostro EPUB, basterà una regola del tipo
p{
  text-indent: 2em;
}
che produrrà un rientro pari a due caratteri nella prima riga di ogni tag <p>. Il primo paragrafo di un capitolo, a volte, riceve un trattamento particolare: per questo gli abbiamo assegnato una classe “primo”, che useremo nel CSS per modificare soltanto quel paragrafo. Ad esempio,
p.primo{
  text-indent: 0;
}
azzera il rientro per il tag <p> che possiede un attributo class=”primo”, ossia il primo paragrafo del nostro capitolo. Essendo poi una regola più specifica, è meglio inserirla dopo la regola generale, che abbiamo scritto per il tag <p>. Se poi vogliamo davvero sbizzarrirci e dare un aspetto particolare alla prima lettera del capitolo, in memoria degli antichi testi miniati medievali, possiamo ricorrere a una regola ancora più specifica, ossia
p.primo:first-letter{
  position: relative;
  display: block;
  float: left;
  font-weight: bold;
  font-size: 4.4em;
  line-height: 0.8em;
  color: rgb(40,40,40);
}
che potrete divertirvi a decifrare, sulla base delle puntate precedenti. In linea di massima, la regola di rivolge alla prima lettera del paragrafo con classe “primo”: ingrandisce la lettera, la colora, la rende in grassetto e la allinea al resto del paragrafo. Questa regola, che è specifica al massimo grado (riguarda solo una lettera di un paragrafo), la collocheremo alla fine della parte del foglio CSS dedicata ai paragrafi.
Tutte le regole che modificano elementi interni a un tag <p>, come possono esserlo i tag <b>, <i> e così via, li sistemeremo subito dopo la sezione dedicata al paragrafo: una buona organizzazione del foglio di stile ci aiuterà a vedere meglio i rapporti di parentela tra gli elementi. Il foglio di stile, dunque, potrebbe avere una struttura finale di questo tipo:
body{
  //regole globali
}
.titolo{
  //regole per la sezione “titolo”
}
.titolo h2{
  //regole specifiche per il tag <h2>, quando si trova in un elemento con class”titolo”
}
.testo{
  //regole generali per il corpo del capitolo
}
p{
  //regole specifiche per i paragrafi
}
p.primo{
  //regole specifiche per il paragrafo con classe “primo”
}
p.primo:first-letter{
  //regole specifiche per la prima lettera del paragrafo con classe “primo”
}
b{
  //regole specifiche per il tag <b>
}
e così via. Combinando i tag, possiamo ottenere regole sempre più specifiche e precise, ad esempio la regola
p b{
//regole per i tag <b> all’interno di un tag <p>
}
che si rivolge soltanto a un sottogruppo dei tag <b>, ossia quelli che sono figli di un tag <p>. Il principio di base, che dobbiamo sempre ricordare per risparmiarci fatica inutile è: partiamo dal generale e scendiamo sempre più verso il particolare. Ricordarlo e applicarlo non ci metterà al sicuro dagli errori, ma ci aiuterà a ridurli e a localizzarli più facilmente.

Guida al CSS per EPUB – Impostare i margini

Nella puntata precedente abbiamo visto alcune delle proprietà che dobbiamo modificare, per cambiare l’aspetto di un paragrafo o della pagina: è un buon inizio, per posizionare correttamente un elemento, ma ancora non basta, soprattutto se siamo interessati a controllare gli spazi tra un elemento e l’altro (le famigerate righe vuote tra i paragrafi, insomma, contro cui spesso ci si trova a dover combattere). Se convertiamo un documento con Calibre, e non prestiamo attenzione a tutti i valori da impostare, molto spesso ci troveremo coi paragrafi separati tra loro da fastidiose linee bianche, proprio come accade quando scriviamo qualcosa in Sigil. Per capire cosa siano e imparare a evitarle o eliminarle, dobbiamo prima osservare come il CSS gestisca lo spazio nello HTML.

Pensiamo a un tag HTML (e al suo contenuto) come a una porzione di spazio, uno dei mattoncini LEGO che formano la pagina. Ognuno di questi tag, in linea di massima, è rappresentato come un rettangolo, più o meno grande a seconda dei casi: il tag <body> è un rettangolo grande quanto la pagina intera, il tag <p> è grande quanto il paragrafo contenuto, il tag <h1> sarà grande invece quando la riga di titolo corrispondente, e così via. Una pagina è dunque un muro, composto da tanti mattoni, di dimensione diversa: ogni tag è un mattone e il contenuto del tag determina la grandezza del mattone.

Il CSS ci permette di impostare e controllare tre proprietà spaziali, per ogni mattone: margin, padding e border. Border è il più semplice di tutti: è il perimetro del rettangolo e possiamo usarla per disegnare una “cornice” attorno a un elemento. Padding è lo spazio vuoto tra il bordo e il contenuto interno: se abbiamo deciso di racchiudere un paragrafo in una cornice, usando border, padding ci dirà quanto spazio bianco vedremo tra la cornice e il testo del paragrafo. Margin, infine, è lo spazio che separa il bordo di un tag dal bordo dei tag che lo circondano: è lo spazio che fa da cuscinetto tra un mattone e l’altro, separandoli. L’insieme di questi tre elementi forma il cosiddetto “modello a box”, nel CSS.

In breve, border segna il confine di un elemento, padding è lo spazio interno tra il confine e il contenuto dell’elemento, margin è lo spazio esterno tra il confine e gli altri elementi che lo circondano. Ognuna di queste tre proprietà può essere impostata individualmente, per ognuna delle quattro direzioni, oppure può essere impostata con un comando solo per tutti e quattro i lati. Inoltre, ognuna può essere impostata a zero, se vogliamo eliminare le formattazioni automatiche di alcuni tag (tipo <p>).

padding

Come detto, è lo spazio che separa il contenuto di un elemento dal suo bordo: se vogliamo disegnare una cornice attorno al testo, padding è la proprietà che dovremo impostare, per lasciare un certo spazio tra il bordo e il testo. Se un elemento utilizza la proprietà background-color, per colorare lo sfondo, allora anche la fascia di padding sarà colorata, in quanto è interno all'elemento.

A seconda dei casi, possiamo utilizzare una delle quattro varianti “locali” di padding, per impostarlo solo su un lato, oppure possiamo usare direttamente padding, per impostarlo in una volta sola su tutti e quattro i lati. Le quattro varianti sono padding-top, padding-right, padding-bottom, padding-left, sistemate come nella immagine soprastante: per ognuna possiamo indicare una delle unità di misura permesse dal CSS, per indicare quanto spazio lasciare. Ad esempio,

padding-top: 5px;
padding-left: 10px;

lasciano rispettivamente uno spazio vuoto di cinque pixel sopra il contenuto dell’elemento, e uno spazio vuoto di dieci pixel a sinistra del contenuto. Se invece scriviamo

padding: 5px 10px 5px 10px;

possiamo impostare in una volta sola la distanza per tutte e quattro le direzioni: in questo caso, il primo numero sarà la distanza in alto, il secondo la distanza a destra, il terzo la distanza in basso e il quarto la distanza a sinistra. Se vogliamo usare questa proprietà “unica”, è importante ricordare il corretto ordine: alto-destra-basso-sinistra, ossia top-right-bottom-left. Per memorizzare la sequenza, partite da sopra e muovetevi in senso orario. Se invece li impostiamo individualmente, non è importante seguire un ordine.

Infine, se vogliamo assegnare lo stesso valore a tutti e quattro i lati, possiamo utilizzare una formula ancora più breve, ossia

padding: 10px;

In questo modo, tutti e quattro i lati avranno un margine interno di dieci pixel (o di qualsiasi altro numero indicheremo).

margin

Come detto, è lo spazio che separa questo elemento dagli altri elementi che lo circondano: il suo “spazio vitale”, se preferite pensarla così. Funziona esattamente come padding, in tutto e per tutto, ma non sarà colorato, se abbiamo impostato un valore per background-color, in quanto lo spazio di margin non fa parte del nostro elemento, ma è esterno. Avremo dunque margin-top, margin-right, margin-bottom e margin-left, come proprietà individuali, e margin come proprietà unica, che le riassume tutte quante. Ad esempio,

margin-top: 12px;
margin-right: 8px;

imposteranno il margine esterno a dodici pixel in alto (margin-top) e a otto pixel sulla sinistra (margin-left). Utilizzando invece la formula abbreviata, possiamo scrivere

margin: 4px 5px 10px 6px;

così imposteremo un margine in alto di quattro pixel, a destra di cinque pixel, in basso di dieci pixel e a sinistra di sei pixel. Se vogliamo usare lo stesso numero per tutti e quattro i lati, la formula abbreviata resta sempre

margin: 5px;

proprio come abbiamo già visto per padding. Queste due proprietà funzionano allo stesso modo e cambia solo il luogo in cui collocano lo spazio vuoto nell'elemento: margin lo colloca all'esterno del bordo, padding lo colloca all'interno del bordo.

border

Concludiamo proprio col bordo. La proprietà border disegna una cornice attorno a un elemento e, può essere utilizzata sia per tracciare questa cornice attorno a tutto l’elemento, sia per tracciarla solo su alcuni dei quattro lati. Come i suoi colleghi, dunque, anche border ha le versioni specifiche, ossia border-top, border-right, border-bottom e border-left, che tracciano il bordo soltanto sul rispettivo lato del nostro elemento, ma i valori da attribuire a queste proprietà sono alquanto diversi: per disegnare un bordo, infatti, dovremo assegnare valori come il colore, lo spessore e lo stile.

Il primo valore che indichiamo, di solito, è lo spessore del bordo, espresso in pixel. Il secondo valore indica lo stile con cui sarà disegnato il bordo e lo possiamo scegliere tra i seguenti: solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden. Solid è una normale linea chiusa, dotted è una linea punteggiata, dashed una linea tratteggiata, double una linea doppia, none elimina il bordo, hidden lo nasconde (di fatto ottiene lo stesso risultato di none, cioè il bordo non si vedrà, ma nascondere una cosa è diverso da eliminarla), mentre gli altri quattro producono particolari effetti grafici, più semplici da vedere che da descrivere. Infine, il terzo valore è il colore che il bordo dovrà avere e lo possiamo impostare seguendo le regole già viste prima, parlando degli attributi color e background-color. Qualche esempio:

border: 2px dotted red;

border-bottom: 1px solid rgb(0, 0, 255);

nel primo caso, tracceremo su tutti e quattro i lati un bordo punteggiato, dallo spessore di due pixel e di colore rosso; nel secondo caso, tracceremo sotto l’elemento un bordo solido, dallo spessore di un pixel e di colore blu (una sottolineatura blu, insomma).

Possiamo utilizzare la forma abbreviata border, soltanto se vogliamo che il bordo sia identico su tutti e quattro i lati; se vogliamo disegnare bordi di spessore o di colore diverso, dovremo utilizzare le proprietà individuali per i quattro lati, ossia border-top, border-right, border-bottom e border-left. Non so perché qualcuno dovrebbe desiderare un bordo arlecchino e di dimensioni diverse, per una parte del proprio EPUB, ma questo è un altro paio di maniche: se il vostro senso estetico vi spinge in questa direzione, usate le quattro proprietà individuali; se siete tradizionalisti e volete un bordo uniforme su ogni lato, usate pure la formula abbreviata.

Ovviamente, border, margin e padding possono essere utilizzati su qualsiasi tipo di tag, ma non sempre otterremo il risultato previsto da noi. Lo HTML distingue infatti tra due tipi di tag, ossia quelli che creano un blocco nel testo e quelli che coabitano su una stessa linea. I tag <p> e <div> sono esempi tipici di tag che creano blocchi (servono proprio a dividere la pagina in sezioni logiche) e sono spesso accompagnati da una separazione grafica sullo schermo; i tag <b>, <span> e <a> sono esempi tipici di tag che coabitano su una stesa linea, senza dividere la pagina in blocchi. In caso di tag “in linea”, assegnare margini in alto e in basso non funzionerà come previsto, mentre i margini laterali non daranno problemi: non possiamo insomma usare padding-top o margin-bottom per aumentare lo spazio tra le linee. O almeno, non normalmente.

Esiste infatti una proprietà particolare, che ci permette di decidere se un tag dovrà comportarsi come un blocco, oppure come un tag “in linea”: è la proprietà display. Se a un tag assegniamo il valore

display: inline;

quel tag coabiterà pacificamente sulla stessa linea con altri tag, a prescindere da quale sia il suo tipo; se invece gli assegniamo il valore

display: block;

quel tag creerà un blocco indipendente all'interno della pagina, proprio come il tag <p>, e potremo controllare i sui margini su tutti e quattro i lati.
Nella prossima puntata, tireremo le somme.