Creare libri con CSS3

Processori XML, XSL, XHTML e PDF#section1

Man mano che l’industria editoriale si sposta verso un workflow incentrato sul digitale, ci sarà bisogno di scalabilità: processi ripetibili e flussi di lavoro che funzionino su grande scala come su piccola scala. Creare un libro stampato ben formattato non è più sufficiente: gli editori spesso hanno bisogno di rilasciare molteplici formati differenti per ciascun libro – cartaceo, ePub per iPad, Nook, etc., .mobi per Kindle e così via. Il salto più difficile è tra la stampa e l’ePub: dovete mettere del semplice testo, spesso proveniente da più documenti o flussi di testo, ed elementi non lineari come le immagini, in un flusso lineare taggato con precisione e impacchettare il tutto con un indice e con le istruzioni su come mettere insieme i vari file che compongono il libro (si veda la pagina ePub su Wikipedia per capirne di più le specialità che fanno parte del formato ePub). Perfino l’output in formato ePub di InDesign ha bisogno di una pulizia extra dopo essere stato creato, per via della natura non lineare del design della pagina stampata.

Per molti anni, XML è stato uno dei modi in cui si poteva ottenere un modello editoriale scalabile a seconda della destinazione. XML offre un modo strutturato e standardizzato per taggare il contenuto di un libro e lo si converte facilmente in XHTML, che è alla base dei libri digitali. Inoltre, c’è anche XSL-FO, che converte il markup in layout PDF a qualità di stampa. XSL-FO è stato sia l’ingresso per la pubblicazione di sorgenti XML sia un grande blocco: è un linguaggio potente per strutturare le pagine e formattare i files XML ma è anche intricato, inaccessibile e non molto conosciuto. Tuttavia, usando XSL-FO e un PDF processor come Antenna House o Prince per leggere il markup, gli editori possono usare una singola sorgente XML per ottenere XHTML e ePub e anche per produrre dei PDF strutturati e di qualità pari a quella della stampa.

Combinando i maggiori PDF processor e le caratteristiche dei media impaginati in CSS, l’editoria basata su XML e XHTML può allontanarsi da XSL-FO per sfruttare la vasta e talentuosa comunità del web design. Questi processor leggono i file taggati e li convertono in PDF utilizzando i fogli di stile forniti dall’utente. Il PDF impaginato che ne risulta usa lo stesso vasto CSS disponibile per il web design, insieme a delle features CSS3 specializzate, aggiunte appositamente per i media impaginati, come stringhe di testo, riferimenti incrociati e i crocini per la stampa.[1]

Un fattore per cui è opportuno adottare questo tipo di workflow è il costo: il PDF processor è il costo più elevato da affrontare subito oltre allo sviluppo iniziale del foglio di stile. Al momento in cui scrivo, Antenna House costa 1700$ con una singola licenza utente o 7000$ con una licenza server. Le licenze di Prince sono sostanzialmente più economiche: 495$ per un utente singolo o 3800$ per una licenza server. Ma comparati ai costi continui di un desktop page layout, un singolo pagamento immediato per installare un PDF processor diventa un’opzione percorribile. (Prince offre una versione demo che mette un watermark sulla prima pagina di ogni PDF ma è comunque completamente funzionante. È un buon modo per sperimentare e valutare il workflow.)

Il tool open source e command-line xhtml2pdf è stato creato con Python e riesce a convertire da HTML a PDF ed è gratuito: tuttavia, il supporto per CSS è molto meno robusto che quello degli strumenti a pagamento, specialmente per le caratteristiche dei media impaginati. Potete scaricare il codice sorgente da GitHub. Qui trovate delle note che ho creato dopo aver giocato per un’ora con xhtml2pdf.

Creare un libro#section2

Le nuove feature di CSS3 provengono dal Paged Media Module e dal Generated Content for Paged Media Module (GCPM). Per sviluppare il mio foglio di stile ho utilizzato l’ultima working draft e la più recente editor’s draft di Paged Media Module. La specifica è abbastanza stabile e si trova nel “last call period” (il che vuol dire che il working group si sente piuttosto sicuro riguardo alla specifica e cerca delle review finali prima di raccomandare l’avanzamento). La stanno ancora editando ed è probabile che rilascino un’altra Last Call Working Draft per finalizzare i cambiamenti fatti durante il periodo di review.

Il primo step quando si lavora con documenti stampati è quello di impostare la struttura della propria pagina usando l’elemento @page. Questo è simile alle pagine master nel layout per la stampa, attraverso le quali potete impostare la rifinitura (ossia la dimensione della pagina), i bordi, le intestazioni e i pié di pagina, i font e così via: praticamente, tutto quello che volete che appaia su ogni pagina. E ovviamente, potete sfruttare il “cascading”. Per esempio:

@page {
  size: 5.5in 8.5in;
}

Questo codice imposta la rifinitura di ciascuna pagina nel libro su cui potete poi lavorare per dare uno stile alle varie sezioni del libro. Le definizioni di pagina seguenti aggiungono i margin e i padding per le pagine sinistre e destre e sono nelle parti del file che usano la regola della pagina “chapters”:

@page chapters:left { /* left page setup */
  margin: 0.75in 0.75in 1.125in 0.62in;
  padding-left: 0.5in;
}
@page chapters:right { /* right page setup */
  margin: 0.75in 0.62in 1.125in 0.75in;
  padding-right: 0.5in;
}

Potete creare voi i nomi della pagina e ciascuna pagina con un nome può essere ulteriormente suddivisa in :first (che dà gli stili alla prima pagina all’interno di un elemento che usa quella regola di pagina), :left e :right. Invocate le regole di pagina in questo modo:

section.chapter {
page: chapters;
}

La specifica Paged Media ha anche 17 aree di pagina predefinite che potete personalizzare all’interno delle vostre regole per la pagina. C’è l’area principale della pagina e poi altre 16 aree che scorrono lungo i margini in questo modo:

Potete assegnare uno stile a ciascuna di queste aree di pagina singolarmente, se per esempio volete aggiungere dei tab di navigazione o delle intestazioni o dei pié di pagina (leggete di seguito per ulteriori informazioni). La Paged Media Editor’s Draft ha un’estensiva descrizione della size e del positioning dei margin box. Tutti i box tranne quelli che si trovano agli angoli hanno larghezze variabili (per i box sui margini orizzontali) o altezze variabili (per i box lungo i margini verticali) e si allungheranno per tutta la larghezza o altezza a disposizione finché non incontreranno un ostacolo (per esempio, il contenuto adiacente definito in uno dei margin box adiacenti). L’esempio qui sotto aggiunge un bleed grigio al margine esterno di tutte le pagine dell’indice aggiungendo un colore di sfondo a solo tre dei margin box verticali. Poiché non c’è altro contenuto definito nei restanti box, il bleed riempirà completamente l’altezza della pagina. Potreste ottenere un simile effetto con un’immagine di background con posizione fissa o usando i bordi della pagina, ma questo metodo è semplice, pulito e dà i bleed reali (si veda Bleed più avanti).

@page indexmaster:right {
	@top-right-corner {
	background-color: #777777;
	background-color: device-cmyk(0.0, 0.0, 0.0, 0.5);
	padding-left: .8in;
	margin: -6pt -6pt -6pt 0;
	}
	@right-top {
	background-color: #777777;
	background-color: device-cmyk(0.0, 0.0, 0.0, 0.5);
	padding-left: .8in;
	margin: -6pt -6pt -6pt 0;
	}
	@bottom-right-corner {
	background-color: #777777;
	background-color: device-cmyk(0.0, 0.0, 0.0, 0.5);
	padding-left: .8in;
	margin: -6pt -6pt -6pt 0;
	}
}

Per mantenere il bleed sul lato esterno, le pagine destra e sinistra devono essere definite separatamente. I margin, padding e margin box avranno tutti bisogno di piccoli aggiustamenti per la corrispondente tinta della pagina sinistra. (Potreste anche aver notato che ci sono due definizioni di colore nel codice di cui sopra: si veda Colori CMYK più avanti per ulteriori informazioni).

Contatori#section3

I contatori non sono niente di nuovo ma sono davvero comodi per i media impaginati perché ci permettono di aggiungere automaticamente i numeri ai capitoli, alle figure, agli esempi e così via con solo poche righe di CSS, in questo modo:

section.chapter > div.titlepage > div > div > h2.title:before {
counter-increment: ChapterNo;
content: "Chapter " counter(ChapterNo);
}
div.figure-title:before {
counter-increment: FigureNo;
content: "Figure " counter(ChapterNo)"-" counter(FigureNo)": ";
}
section.chapter {
counter-reset: ChapterNo FigureNo;
}

Nel codice qui sopra, abbiamo creato due contatori: uno per i numeri dei capitoli e l’altro per i numeri delle figure e poi abbiamo fatto in modo che si azzerassero entrambe all’inizio di ogni nuovo capitolo. (Tenete presente counter-reset cascades, che significa che se volete reimpostare alcuni contatori sullo stesso elemento ma li definite separatamente, verrà onorata solo l’ultima definizione. Per far sì che tutti i contatori si azzerino, dovete farli andare insieme, come mostrato qui sopra). Inoltre, usiamo il contatore ChapterNo all’interno del titolo della figura, per fare cose di questo tipo:“Figura 5-11:.”. In questo caso, il contatore ChapterNo è in effetti applicato all’elemento padre del titolo della figura: section.chapter. Il PDF Processor cercherà progressivamente sempre più avanti finché trova un’istanza del contatore specificato che si applica all’elemento in questione.

Stringhe#section4

Quasi ogni elemento può essere convertito in una stringa che potete poi richiamare nel vostro CSS perché appaia in altri posti del vostro documento. Le intestazioni e i pié di pagina, dove si trovano i numeri di pagina e del testo su ciascuna pagina, fanno un buon uso delle stringhe: per esempio, il titolo del libro sulla pagina di sinistra e il titolo del capitolo su quella di destra (CSS3 include anche delle gestioni built-in per gli elementi mobili. Spiegherò più avanti perché ho scelto invece di usare le stringhe.

Usate string-set su qualsiasi elemento per far sì che il contenuto dell’elemento sia riutilizzabile. Decidete un nome per questo e nominate il contenuto che volete includere:

div.book > div.titlepage > div > div > h1.title {
  string-set: Booktitle self;
}
section.chapter > div.titlepage > div > div > h2.title {
  string-set: Chapter self before;
}

Nell’esempio di prima, il nome della stringa è “Booktitle” e uso il semplicissimo “self” per dire che voglio che la stringa includa il contenuto di quell’elemento, qualunque esso sia. Nel secondo blocco, dico alla stringa di includere sia il contenuto dell’elemento, sia qualsiasi contenuto io abbia aggiunto usando il selettore :before (come ho fatto per aggiungere i numeri di capitolo nella sezione Contatori di cui sopra).

Per richiamare le stringhe, fatevi riferimento nella proprietà del contenuto:

@page :left { /* left page setup */
  @bottom-left { /* verso running footer */
    content: counter(page)" "string(Booktitle);
  }
}
@page :right { /* right page setup */
  @bottom-right { /* recto running footer */
    content: string(Chapter)" "counter(page);
  }
}

Le stringhe possono essere piuttosto potenti e possono includere svariati tipi di contenuto all’interno della proprietà string-set, inclusi i contatori (uso il contatore di pagina negli esempi qui sopra per mostrare anche il numero di pagina attuale su ogni pagina), il testo prima/dopo e il testo statico. Potete anche definire più stringhe all’interno di una proprietà string-set.

CSS3-GCPM include in realtà delle proprietà speciali solo per gli elementi mobili: running() e element(). Usate insieme, queste proprietà convertono qualsiasi elemento in un’intestazione o in un pié di pagina mobile. Tuttavia, il pericolo in questo caso è che quando si converte così un elemento in un elemento mobile, questo non appare più nella sua posizione originale: running() agisce più come un float che oltretutto si ripete sulle pagine seguenti. Dal momento che voglio che le mie intestazioni appaiano sia al loro posto inline sia come running element, ho usato le stringhe al loro posto.

Riferimenti incrociati#section5

La maggior parte dei documenti lunghi (come i libri) include i riferimenti incrociati, che di solito hanno questa forma: “Vedi pag. 127”. All’interno di un workflow XML o HTML, i riferimenti incrociati possono essere impostati come link che saltano ad un’altra sezione. Sebbene i link dei riferimenti incrociati siano una caratteristica base di tutti i libri digitali, inclusi i PDF ottimizzati per il web, naturalmente non saranno utili nel caso dei libri stampati. Comunque, dal momento che il contenuto sorgente non è impaginato, è difficile sapere a quale punto nel testo dovrebbero far riferimento. Non saprete il numero della pagina stampata finché il testo non passerà attraverso il PDF processor e in ogni caso quel numero di pagina non sarà accurato quando diventerà un eBook che potrà ridimensionarsi. La soluzione a questo problema consiste nell’usare un testo generato, che si basi su target-counter() e target-text().

Ad esempio, supponiamo che abbiate questo riferimento incrociato nel vostro HTML:

<p>See <a class="xref" href="#section25" title="Working with Cross 
References">Chapter 5, <em>Working with Cross References</em></a>.</p>

Aggiungendo questo stile al CSS:

a.xref:after {
  content: " (pag. " target-counter(attr(href, url), page) ")";
}

Otterrete:

Vedi Capitolo 5, Lavorare con i riferimenti incrociati (pag.127)

In questo CSS accadono alcune cose interessanti. Innanzitutto, abbiamo usato una stringa di testo statico che aggiungerà uno spazio, una parentesi aperta, la parola “page ” e un altro spazio prima di qualsiasi contenuto generato. Il pezzo successivo, target-counter, dice al renderer di richiamare il contatore specifico relativo all’elemento. Poi, all’interno delle parentesi, diciamo al renderer che abbiamo bisogno del contatore “page” che si applica all’attributo href dell’elemento in questione i.e., il renderer deve seguire il link alla sua sorgente (#section25), capire su quale pagina si trova e mostrare quel numero di pagina. Per chiudere, abbiamo un’ultima stringa di testo per aggiungere una parentesi chiusa. Se la paginazione cambia, la prossima volta che manderemo il documento attraverso il PDF processor, il numero di pagina sarà aggiornato automaticamente.

La proprietà target-text() spinge le cose un po’ più in là tirando dentro tutto il testo da un altro elemento da qualche altra parte nel documento. Come semplice esempio, supponiamo di aver bisogno di fare qualcosa riguardo un riferimento incrociato “hard-coded” per stampare un numero di pagina, come questo:

<p>See <a class="xref" href="#section25" title="Working with Cross 
References">page 110</a></p>
…
<h2 class="title" id="section25">Working with Cross References</h2>

Di nuovo, vogliamo essere sicuri che il riferimento incrociato appaia sempre con il numero di pagina giusto, ma vogliamo anche includere il nome della sezione che viene referenziata per abbinare la formattazione del nostro esempio precedente. Quindi, il seguente:

a.xref {
  content: target-text(attr(href, url), content())" (page " target-counter
  (attr(href, url), page) ")";
} 

Ci darà questo:

See Working with Cross References (page 127)

La proprietà target-text funziona più o meno come target-counter: segue l’url alla sua sorgente e quando gli diamo il valore di content(), preleva il contenuto dell’elemento a cui stiamo facendo riferimento. L’ultimo pezzo del nostro riferimento incrociato consiste nell’aggiungere il numero del capitolo referenziato all’interno del testo del riferimento incrociato. Se abbiamo già impostato la numerazione automatica dei capitoli utilizzando i contatori, come abbiamo fatto in precedenza nella sezione Stringhe, allora possiamo tirare dentro anche quest’ultimo:

a.xref {
  content: target-counter(attr(href, url), ChapterNo)", "target-text
  (attr(href, url), content())" (page " target-counter(attr(href, url), 
  page) ")";
}

Per il nostro risultato finale desiderato:

See Chapter 5, Working with Cross References (page 127)

Un avvertimento importante: Antenna House non spezza il testo generato su più righe. Se il testo importato è troppo lungo per rientrare nell’area della pagina, semplicemente si allungherà oltre il margine della pagina. Tuttavia, Antenna House spezzerà le stringhe di testo statico che includete nella proprietà del contenuto. Nell’esempio precedente, spezzerà in un qualunque posto “Chapter “, “ (page “, and “)”, ma non spezzerà all’interno del titolo del capitolo o nei numeri di pagina o di capitolo (sebbene questi ultimi sono così piccoli che comunque non li avrebbe separati). Questo rende il testo generato piuttosto rischioso e appropriato solo per righe brevi. Approfondisco il discorso nella sezione “Note a fondo pagina”.

Sommario#section6

Un sommario può essere impostato in XHTML come una serie di liste non ordinate e annidate, con ciascun elemento della lista che fa riferimento tramite link alla sezione in questione. Questa cosa funziona molto bene con gli ebook, ma i libri stampati devono anche mostrare il numero di pagina per la sezione. Proprio come i riferimenti incrociati, potete usare target-counter per impostarlo:

div.toc ul li.preface a:after { 
 content: leader(dotted) " " target-counter(attr(href, url), page);
}

La funzione leader(dotted) aggiunge un tab leader tra la entry del testo del sommario e il numero di pagina generato, in questo modo:

Working with Cross References…………………………………….. 127

Ci sono tre stili predefiniti del leader: dotted, solid e space, oppure potete crearvi il vostro mediante una stringa. Ad esempio, leader("~") creerà una linea di tilde.

Layout multi-colonna#section7

Un’altra nuova feature di CSS3 sono i multi-column layouts: permettono di suddividere ogni div in più colonne usando column-count. Ad esempio, per impostare solo l’indice di un libro in due colonne lasciando la maggior parte del testo in una singola colonna, aggiungete column-count: 2 al div index:

div.titlepage+div.indexnote+div.index {
column-count: 2;
column-gap: 12pt;
}

La proprietà column-count imposta il numero di colonne e la proprietà column-gap imposta lo spazio tra le colonne. Potete anche aggiungere column-width per specificare la larghezza di due (o più) colonne. Di default, le colonne si estendono per l’intera area della pagina a disposizione.

Interruzioni#section8

Se avete fatto produzione di libri digitali, allora le proprietà di page break di CSS vi saranno probabilmente familiari: page-break-before, page-break-after e page-break-inside.

Così come è stato definito in CSS2.1, page-break-before e -after accettano i seguenti valori: auto, always, avoid, left, right e inherit. Potete usarli per forzare le interruzioni attorno agli elementi o utilizzare page-break-inside per evitare che le interruzioni avvengano all’interno degli elementi. (Ciò è ad esempio utile per tenere tutti i paragrafi di una barra laterale sulla stessa pagina). Assegnare un valore di left o right forzerà un’interruzione fino a che non vi ritroverete con una pagina vuota rispettivamente sinistra o destra. Questo è utile per i capitoli del libro, in cui volete che ogni capitolo inizi sulla pagina a destra. Definirete il div del capitolo come segue:

section.chapter {
  page-break-before: right;
}

CSS3 aggiunge alcune altre proprietà per i layout su più colonne: break-before, break-after e break-inside. Queste funzionano nello stesso modo delle regole page-break ma a livello della colonna e aggiungono alcuni altri valori possibili: page (forza un’interruzione di pagina), column (forza un’interruzione di colonna), avoid-page (evita un’interruzione di pagina) e avoid-column (evita un’interruzione di colonna).

Note a fondo pagina#section9

CSS3-GCPM aggiunge una gestione speciale solo per le note a fondo pagina. Per prima cosa, abbiamo il selettore @footnote, che definisce la parte della pagina riservata solo alle note a fondo pagina (se ce ne sono). Abbiamo anche un nuovo tipo di float: float: footnote, che è dove accade la vera magia. Quando applicate un float footnote a un elemento, l’intero contenuto dell’elemento viene spostato in basso, in fondo alla pagina, nell’area della pagina per @footnote. Inoltre, al punto di riferimento, viene aggiunto un marker (di default in apice) che corrisponde al numero (o simbolo) vicino al nuovo contenuto a cui è applicato il float. Potete assegnare uno stile in-text al marker, chiamato footnote-call e il numero di nota a fondo pagina a cui è applicato il float, chiamato il footnote-marker con due nuovi pseudo-elementi: ::footnote-call e ::footnote-marker.

Ecco ora l’interruzione: i miei files sorgente XHTML includevano tutte le note a fondo pagina come note di chiusura, in cui il testo della nota a fondo pagina stava alla fine di ciascuna sezione. Il mio design per la stampa richiedeva che le note a fondo pagina apparissero sulla pagina sulla quale erano state referenziate. Nonostante ciò, le note a fondo pagina hanno quasi funzionato senza cambi al XHTML usando solo il testo generato e gli strumenti per le note a fondo pagina di CSS3. Alla fine, questo piano è fallito perché, come notato sopra, il testo generato in alcuni PDF processor non si interrompe tra le righe, ma al contrario finisce sotto il margine se è troppo lungo. Non ci sono problemi per i libri con le note a fondo pagina lunghe solo un paio di parole, ma raramente succede così. [2]

Alla fine ho modificato lo XHTML per spostare le note a fondo pagina nell’esatta posizione in cui sono referenziate e le ho inserite in uno span con class="footnote". Ho scelto gli span principalmente perché avrebbe lasciato le note a fondo pagina come inline, senza aggiungere un’altra interruzione di paragrafo (come farebbero invece i div o i p).

Ecco il nuovo html:

<p>As you saw in the earlier section,<span class="footnote"><p>If you 
were paying attention, of course.</p></span> generated text doesn't break 
across lines.</p>

Sì, avete visto giusto: abbiamo un p all’interno di uno span all’interno di un p. Non è XHTML perfettamente formato, ma funziona. E con questo semplice CSS:

span.footnote {
  float: footnote;
}

Otteniamo questo:

As you saw in the earlier section,¹ generated text doesn’t break across lines.

1 If you were paying attention, of course.

Un’altra parte dell’arsenale CSS3 per le note a fondo pagina è il predefinito counter-footnote, che si applica a tutti gli elementi con float: footnote. Il contatore della nota a fondo pagina si resetta allo stesso modo degli altri contatori (si veda il paragrafo Contatori), permettendoci di ricominciare a numerare le note a fondo pagina secondo le nostre esigenze (per esempio, potreste impostare la numerazione perché ricominci all’inizio di ogni nuovo capitolo).

Potete personalizzare il modo in cui le note a fondo pagina sono marchiate (con numeri, lettere, simboli o qualunque altro valore supportato in list-style-type. C’è anche uno stile “footnote” predefinito che fa girare e poi moltiplica quattro diversi glifi: asterisco, asterisco doppio, croce e croce doppia. Le note a fondo pagina saranno numerate con i numeri decimali come 1, 2, 3, etc. di default. Per cambiarli in lettere minuscole dovete fare così:

::footnote-call { 
  content: counter(footnote, lower-alpha); 
} 
::footnote-marker { 
  content: counter(footnote, lower-alpha); 
}

Assicuratevi di impostare il tipo di lista sia per il footnote call sia per il footnote marker, a meno che vogliate davvero confondere i vostri lettori.

Segnalibri PDF#section10

Il bookmarking è irrilevante quando avete a che fare con i media stampati, ma è un comodo (e oserei dire, essenziale) componente per i PDF ottimizzati per il web. Il bookmarking aggiunge una tabella di contenuti collegati al pannello di navigazione di un reader PDF, permettendo agli utenti di saltare a specifiche sezioni. Potete creare un segnalibro praticamente per ogni elemento e potete dire al PDF come annidare e mostrare i segnalibri nel vostro CSS.

Ecco come abbiamo ottenuto due livelli di segnalibri, annidando intestazioni di un livello all’interno dei titoli del capitolo. Invece di avere tutti i livelli espansi e mostrarli quando il PDF è aperto, li abbiamo impostati sullo stato “closed”. Gli utenti vedranno solo i titoli del capitolo e potranno cliccare per espandere l’albero e vedere le intestazioni annidate delle sezioni se lo desiderano:

section.chapter > div.titlepage > div > div > h2.title { 
  bookmark-level: 1; 
  bookmark-state: closed;
}
div.sect1 > div.titlepage > div > div > h2.title { 
  bookmark-level: 2; 
  bookmark-state: closed;
}

I segnalibri includeranno automaticamente l’intero contenuto dell’elemento, incluso qualsiasi testo che abbiate aggiunto con i selettori :before e :after. Tuttavia, potete restringere il bookmark perché mostri solo un sottoinsieme dell’informazione dell’elemento usando la proprietà bookmark-label. Ad esempio:

 
section.chapter > div.titlepage > div > div > h2.title { 
  bookmark-level: 1; 
  bookmark-state: closed;
  bookmark-label: content();
}

L’esempio precedente mostrerà solo il testo attuale dell’elemento e ignorerà il contenuto prima/dopo (before/after). Si noti che tutto il testo viene importato senza alcuna formattazione e non potete specificare combinazioni di valori del contenuto all’interno di una singola dichiarazione bookmark-label.

Potete anche scegliere di mostrare una stringa di testo specifica che sovrascriverà il contenuto dell’elemento HTML. Ad esempio, se volte aggiungere un segnalibro alla pagina copyright, ma le parole “Copyright Page” effettivamente non appaiono da nessuna parte nel testo:

div.copyrightpage { 
  bookmark-level: 1; 
  bookmark-state: closed;
  bookmark-label: "Copyright Page"
}

Font#section11

Quando si tratta di aggiungere dei font personalizzati al proprio CSS, potreste essere sollevati dal sapere che è lo stesso vecchio CSS a cui siete abituati: usate @font-face per dichiarare il font e usate font-family per invocarlo. Ricordatevi di includere dei font di fallback, specialmente per il testo del corpo, dove potreste aver bisogno di usare simboli che non sono inclusi nell’insieme di font del body. Di nuovo, questo è lo stesso CSS che abbiamo usato per anni:

font-family: "Gotham", "Arial Unicode", sans-serif; 

Arial Unicode include un numero impressionante di glifi, pertanto è una scelta piuttosto sicura come fallback sans-serif.

La maggior parte delle stampanti commerciali richiede che i font siano “embedded” nel file PDF. I metodi per fare ciò variano a seconda del PDF processor, perciò dovete leggere attentamente la documentazione se volete inserire dei font nel vostro workflow. Potreste anche inserire dei font dopo la conversione con PitStop o con un altro tool di post-processing del PDF.

Ci sono molte feature CSS3 carine per i font, ma sono ancora instabili e né Antenna House né Prince le supportano ancora (sebbene Antenna House e Prince in senso più limitato hanno alcune estensioni carine per lavorare con i font). Guardate il Fonts module per avere un’idea di quello che verrà. È in corso lo sviluppo che migliora la formattazione del testo su larga scala, incluso specificare le word-break e i line-break, la spaziatura e così via. Prince e Antenna House hanno implementato alcune caratteristiche vari modi, come sono state definite al momento del rilascio. Potete controllare la specifica, sebbene io vi incoraggi a controllare il manuale del vostro PDF processor prima di sperimentare, perché potrebbero esserci delle variazioni.

I tocchi finali per la stampa#section12

Ci sono alcuni tocchi finali da fare se state pianificando di stampare il vostro documento per la vendita.

Risoluzione delle immagini#section13

La risoluzione delle immagini è cruciale per i media stampati. Una linea guida generale è di impostare la risoluzione di ciascuna immagine tra i 200 e i 300 dpi (requisiti specifici dipendono dalle necessità di ciascun libro). La maggior parte dei PDF processo imposterà la propria risoluzione di default sulle immagini durante la conversione, ma potete invece scegliere di preservare la risoluzione dei files sorgente.

img {
image-resolution: from-image;
}

Potete anche impostare il valore a normal per far sì che il processor scelga la risoluzione, oppure potete fornire un valore numerico specifico per il dpi. (Pasticciare con la risoluzione delle immagini è una questione delicata, quindi prima fate i compiti!).

I colori CMYK#section14

Dovreste pensare ai colori CMYK durante tutta la costruzione del foglio di stile. Li si specifica in maniera simile alla specifica dei colori RGB:

hr {
color: device-cmyk(0.0, 0.0, 0.0, 0.3);
}

Ciascun valore dovrebbe essere un numero tra 0 e 1 (i valori in percentuale funzionano sebbene al momento il W3C appoggi solo i valori decimali). Specificate le percentuali di inchiostro Ciano, Magenta, Giallo e Nero che devono essere usati in quell’ordine. Potete anche crearle con dei fallback impilando le definizioni dei colori, per i casi in cui dovete riadattare i vostri fogli di stile a più presentazioni (web, carta, etc.).

hr {
color: #B3B3B3;
color: device-cmyk(0.0, 0.0, 0.0, 0.3);
}

Se il dispositivo che legge il codice non comprende CMYK, userà la versione web-friendly.

[QUI]

Crocini e bleed per la stampa#section15

Durante la stampa commerciale i libri sono in effetti stampati su pagine di dimensione maggiore di quelle della versione finale e vengono poi tagliati. Il taglio è solitamente piuttosto esatto ma può variare di alcuni sedicesimi di pollice. Così, per essere sicuri che qualunque immagine o colore che avete ai bordi della pagina sia esattamente sul bordo della pagina senza strisce di bianco lasciate dal processo di taglio, dovete impostarli per far sì che vadano un pochino oltre il limite della pagina, per ogni eventualità, e poi dovrete dire al processor di rendere quel piccolo pezzo extra oltre il limite per aggiungere dei segni di taglio per guidare la stampante:

@page {
  bleed: 6pt;
  marks: crop;
}

È davvero così semplice. Ovviamente, dovrete essere creativi con gli elementi bleed, utilizzando i margini negativi e il posizionamento per far sì che funzioni: il processor non aggiungerà automaticamente dei colori o del contenuto oltre i limiti dell’elemento, mostrerà solo il contenuto che già esiste.

Note finali e ulteriori approfondimenti#section16

Potete leggere l’elenco completo delle proprietà CSS supportate da Antenna House, ma vi metto in guardia: la documentazione è nel caso migliore limitata e non sempre chiara. Quella di Prince è leggermente migliore.

Sia Antenna House sia Prince hanno le loro estensioni create sugli standard CSS3 e vale la pena dargli un’occhiata. Ecco le estensioni di Antenna House. Le estensioni di Prince sono elencate online con il supporto CSS regolare e sono meno robuste. Inoltre, se la documentazione CSS non vi è di aiuto, potreste trovare utile leggere la documentazione della relativa proprietà XSL-FO. Sono in uso da molto più tempo e sono più approfondite; inoltre, la funzionalità di solito è la stessa o è molto simile. Non sono riuscita a trovare la documentazione di Prince su questo argomento, ma qui trovate la documentazione di Antenna House.

Ricordatevi che CSS3 è una specifica ancora in fase di sviluppo. CSS3.info mantiene un elenco piuttosto aggiornato sullo stato dei vari moduli CSS3. Non fermatevi dopo aver pucciato un dito/piede/gamba/collo nell’acqua! Qui mi sono limitata ad alcune caratteristiche base della creazione di un libro: le dimensioni e i margini di una pagina, i riferimenti incrociati, le stringhe le intestazioni e i pié di pagina, i colori printer-friendly, le immagini e i bleed, ma CSS3 ha molto di più da offrire quando si tratta di media impaginati e vi esorto a guardare quanto potreste fare (e ricordatevi che CSS2.1 funziona ancora).

Riferimenti#section17

[1]Se state partendo dai file sorgente in XML, vi sarà più facile convertirli prima in XHTML per poi aggiungervi gli stili con CSS. Per fortuna, Bob Stayton ha già creato lo XSL per aiutarci:http://sourceforge.net/projects/docbook/files/epub3/.

[2] Perché dov’è il divertimento nelle note a fondo pagina se non si può essere un po’ poetici?

Illustrazioni: {carlok}