Qualche dritta sui fogli di stile

Qualche dritta sui fogli di stile CSS? Alto artigianato digitale!

Se siete tra quelli un po’ più smanettoni, o anche solo per lavoro vi siete imbattuti nei CSS, e quindi conoscete un po’ questo linguaggio, be’, questo articolo potrebbe esservi molto utile!

Il perché è presto detto: come ho già avuto modo di spiegare, i software e gli altri strumenti di lettura si comportano con l’ePub ognuno a suo modo, per cui è meglio adottare qualche trucco per evitare spiacevoli sorprese e far “funzionare” tutto per il meglio. Si deve puntare, diciamolo subito, a una compatibilità il più larga possibile, altrimenti occorre rifare le cose tante volte quanti sono i mercati a cui ci si vuole rivolgere. Per esempio: iBooks di Apple ci permette di giocare parecchio coi CSS, interpretando correttamente quasi tutti i comandi. Peccato però che poi alcuni di questi comandi mandino completamente in palla alcuni altri programmi di lettura! Che vogliamo fare, un foglio di stile per iBooks e uno per gli altri software? Non credo proprio. E se credo bene, cominciate da qui.

Tutti insieme appassionatamente? Meglio di no!

Una grande idea di quei bravi ragazzi che hanno messo a punto il CSS è il selettore *. Quell’asterisco riunisce sotto di sé tutti gli elementi HTML, così che se io volessi applicare a ogni cosa un margine a sinistra di 2 pixel mi basterebbe scrivere * { martin-left: 2px;}. Ma non sugli ePub, pena il crash totale di Adobe Digital Editions. Quindi, purtroppo, se volete che tutti gli elementi abbiano un bordo rosa, dovrete mettervi di santa pazienza e dichiararli uno a uno…

Stai lontano da me!

Quando si crea uno stile per un eBook, una delle prime cose che serve impostare è la distanza in verticale tra un elemento e l’altro (tra il titolo e il primo paragrafo, per esempio). L’istinto, o meglio, l’abitudine a usare i programmi di videoscrittura, suggerisce di impostare il margine in basso, ma l’esperienza invece consiglia di usare il margine alto, cioè distanziare sempre un elemento da quello che lo precede, non da quello che lo segue. Questo perché così si evitano pagine bianche alla fine di un capitolo (se per esempio si imposta un margine di 1em sotto un paragrafo, e questo invece finisce a filo con il bordo dello schermo, si avrà quel margine alla pagina successiva, che risulterà bianca), e in più si può ricoprire una casistica più ampia con meno righe di codice. Es.: invece di impostare un margine in basso per il titolo di primo livello, così da distanziare titolo e paragrafo, salvo poi impostare un margine negativo per note in calce o titoli di secondo livello (che di solito non sono alla stessa distanza dal titolo rispetto al primo paragrafo), è meglio impostare direttamente il margine in alto di un paragrafo preceduto da un titolo di primo livello e di un paragrafo preceduto da un titolo di secondo!

Si badi alla cornice!

Le immagini patiscono da parte dei programmi di lettura una gestione spesso deprimente per chi si accinge a produrre eBook: a volte, per intenderci, se si imposta una dimensione per un’immagine, su alcuni software (come iBooks) questa viene ignorata, lasciando quindi l’immagine alla sua grandezza naturale (o al limite larga il 100% della larghezza dello schermo). Un trucchetto semplice semplice risolve la situazione (va applicato anche all’HTML): incasellare ogni tag <img/> in un <div>. Si imposterà poi una dimensione (preferibilmente la larghezza, meglio gestita) con un valore a piacere nel CSS per il <div> e si darà all’immagine un valore del 100% nella stessa dimensione (larghezza se il <div> è impostato in larghezza, come abbiamo consigliato, insomma). Tutto qua!

Il CSS non è uguale per tutti

Ultima cosina, una chiccheria per quelli che le mani se le vogliono sporcare davvero.

Volendo, è possibile impostare uno o più CSS, a parte, per quanti dispositivi si vogliono. Immaginiamo (è il caso più “normale”) di voler creare uno stile per tablet e uno per smartphone (magari per poter sfruttare un’impaginazione a colonne senza dovervi rinunciare a causa della sua inutilità su schermi piccoli): basta utilizzare le media queries, che indirizzano il software su questo o quel CSS a seconda del tipo di schermo che vi indichiamo. Però (c’è sempre un però) bisogna impostare le media queries all’interno del file HTML, non nel CSS stesso (quindi bisogna fare tanti fogli di stile quante sono le differenziazioni che vogliamo applicare), altrimenti alcuni programmi potrebbero andare in crash (tanto per cambiare).

 

L’immagine in evidenza è di dorena-wm, da Flickr, (Creative Commons, Attribuzione – Non Opere Derivate 2.0 Generico, CC BY-ND 2.0)

Parole chiave: #, #, #, #, #, #

Rubrica: e-book yourself!

Commenta su Facebook

commenti

0 Comments

Trackbacks/Pingbacks

  1. CSS per ebook - pianopiano book bakery - [...] Scrivo.me Un articolo che affronta la questione in generale, ma se andrete a cercare tra gli altri post di ...
Email
Print