{"id":278,"date":"2012-06-19T11:49:08","date_gmt":"2012-06-19T09:49:08","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/creare-libri-con-css3\/"},"modified":"2012-06-19T11:49:08","modified_gmt":"2012-06-19T09:49:08","slug":"creare-libri-con-css3","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/creare-libri-con-css3\/","title":{"rendered":"Creare libri con CSS3"},"content":{"rendered":"

Sebbene storicamente sia stato difficile, nel migliore dei casi, creare dei libri in PDF di qualit\u00e0 pari a quella della stampa partendo dal solo markup, CSS3 ci mette ora a disposizione il Paged Media Module<\/a>, che ha come obiettivo la formattazione dei libri per la stampa. I media “impaginati” hanno pagine finite, come i libri o le riviste, piuttosto che lunghi segmenti di testo su cui fare scrolling, come la maggior parte dei siti web. CSS3 ci permette di dare uno stile al testo, di suddivide il libro in pagine e di impostare la struttura della pagina nel suo insieme. Potete determinare la dimensione del libro, il contenuto dell’intestazione e dei pi\u00e9 di pagina, il modo in cui visualizzare i rimandi (riferimenti incrociati) e gli indici, se aggiungere delle guide e i bleed per le aziende commerciali che si occupano della stampa e molto altro ancora. Con un singolo foglio di stile CSS, gli editori possono prendere il contenuto sorgente XHTML e trasformarlo in un perfetto PDF pronto per la stampa. Potete prendere il vostro sorgente XHTML, bypassare i software di desktop page layout come Adobe InDesign e impacchettarlo in un file ePub. \u00c8 un workflow leggero ed adattabile, che vi permette di ottenere dei libri ben fatti in maniera pi\u00f9 rapida.<\/p>\n

\n

Processori XML, XSL, XHTML e PDF<\/h2>\n

Man mano che l’industria editoriale si sposta verso un workflow incentrato sul digitale<\/a>, ci sar\u00e0 bisogno di scalabilit\u00e0: processi ripetibili e flussi di lavoro che funzionino su grande scala come su piccola scala. Creare un libro stampato ben formattato non \u00e8 pi\u00f9 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\u00ec via. Il salto pi\u00f9 difficile \u00e8 tra la stampa e l’ePub: dovete mettere del semplice testo, spesso proveniente da pi\u00f9 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<\/a> per capirne di pi\u00f9 le specialit\u00e0 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.<\/p>\n

Per molti anni, XML \u00e8 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 \u00e8 alla base dei libri digitali. Inoltre, c’\u00e8 anche XSL-FO, che converte il markup in layout PDF a qualit\u00e0 di stampa. XSL-FO \u00e8 stato sia l’ingresso per la pubblicazione di sorgenti XML sia un grande blocco: \u00e8 un linguaggio potente per strutturare le pagine e formattare i files XML ma \u00e8 anche intricato, inaccessibile e non molto conosciuto. Tuttavia, usando XSL-FO e un PDF processor come Antenna House<\/a> o Prince<\/a> 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\u00e0 pari a quella della stampa.<\/p>\n

Combinando i maggiori PDF processor e le caratteristiche dei media impaginati in CSS, l’editoria basata su XML e XHTML pu\u00f2 allontanarsi da XSL-FO per sfruttare la vasta e talentuosa comunit\u00e0 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.<\/a>[1]<\/a><\/p>\n

Un fattore per cui \u00e8 opportuno adottare questo tipo di workflow \u00e8 il costo: il PDF processor \u00e8 il costo pi\u00f9 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\u00f9 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 \u00e8 comunque completamente funzionante. \u00c8 un buon modo per sperimentare e valutare il workflow.)<\/p>\n

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

\n

Creare un libro<\/h2>\n

Le nuove feature di CSS3 provengono dal Paged Media Module<\/a> e dal Generated Content for Paged Media Module<\/a> (GCPM). Per sviluppare il mio foglio di stile ho utilizzato l’ultima working draft<\/a> e la pi\u00f9 recente editor\u2019s draft<\/a> di Paged Media Module. La specifica \u00e8 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 \u00e8 probabile che rilascino un’altra Last Call Working Draft per finalizzare i cambiamenti fatti durante il periodo di review.<\/p>\n

Il primo step quando si lavora con documenti stampati \u00e8 quello di impostare la struttura della propria pagina usando l’elemento @page<\/code>. Questo \u00e8 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\u00e9 di pagina, i font e cos\u00ec via: praticamente, tutto quello che volete che appaia su ogni pagina. E ovviamente, potete sfruttare il “cascading”. Per esempio:<\/p>\n

\n@page {\n  size: 5.5in 8.5in;\n}\n<\/code><\/pre>\n
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 \u201cchapters\u201d:<\/p>\n
\n@page chapters:left { \/* left page setup *\/\n  margin: 0.75in 0.75in 1.125in 0.62in;\n  padding-left: 0.5in;\n}\n@page chapters:right { \/* right page setup *\/\n  margin: 0.75in 0.62in 1.125in 0.75in;\n  padding-right: 0.5in;\n}\n<\/code><\/pre>\n
Potete creare voi i nomi della pagina e ciascuna pagina con un nome pu\u00f2 essere ulteriormente suddivisa in :first<\/code> (che d\u00e0 gli stili alla prima pagina all’interno di un elemento che usa quella regola di pagina), :left<\/code> e :right<\/code>. Invocate le regole di pagina in questo modo:<\/p>\n
\nsection.chapter {\npage: chapters;\n}\n<\/code><\/pre>\n
La specifica Paged Media ha anche 17 aree di pagina predefinite che potete personalizzare all’interno delle vostre regole per la pagina. C’\u00e8 l’area principale della pagina e poi altre 16 aree che scorrono lungo i margini in questo modo:<\/p>\n\n\n<\/col>\n<\/col>\n<\/col>\n<\/col>\n<\/col>\n<\/colgroup>\n\n\n\n\n\n\n
top-left-corner<\/td>\ntop-left<\/td>\ntop-center<\/td>\ntop-right<\/td>\ntop-right-corner<\/td>\n<\/tr>\n
left-top<\/td>\nmain page area<\/td>\nright-top<\/td>\n<\/tr>\n
left-middle<\/td>\nright-middle<\/td>\n<\/tr>\n
left-bottom<\/td>\nright-bottom<\/td>\n<\/tr>\n
bottom-left-corner<\/td>\nbottom-left<\/td>\nbottom-center<\/td>\nbottom-right<\/td>\nbottom-right-corner<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
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\u00e9 di pagina (leggete di seguito per ulteriori informazioni). La Paged Media Editor\u2019s Draft ha un’estensiva descrizione della size e del positioning dei margin box<\/a>. 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\u00e9 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\u00e9 non c’\u00e8 altro contenuto definito nei restanti box, il bleed riempir\u00e0 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 \u00e8 semplice, pulito e d\u00e0 i bleed reali (si veda Bleed pi\u00f9 avanti).<\/p>\n
\n@page indexmaster:right {\n\t@top-right-corner {\n\tbackground-color: #777777;\n\tbackground-color: device-cmyk(0.0, 0.0, 0.0, 0.5);\n\tpadding-left: .8in;\n\tmargin: -6pt -6pt -6pt 0;\n\t}\n\t@right-top {\n\tbackground-color: #777777;\n\tbackground-color: device-cmyk(0.0, 0.0, 0.0, 0.5);\n\tpadding-left: .8in;\n\tmargin: -6pt -6pt -6pt 0;\n\t}\n\t@bottom-right-corner {\n\tbackground-color: #777777;\n\tbackground-color: device-cmyk(0.0, 0.0, 0.0, 0.5);\n\tpadding-left: .8in;\n\tmargin: -6pt -6pt -6pt 0;\n\t}\n}\n<\/code><\/pre>\n
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\u00f9 avanti per ulteriori informazioni).<\/p>\n<\/div>\n
\n
Contatori<\/h2>\n
I contatori non sono niente di nuovo ma sono davvero comodi per i media impaginati perch\u00e9 ci permettono di aggiungere automaticamente i numeri ai capitoli, alle figure, agli esempi e cos\u00ec via con solo poche righe di CSS, in questo modo:<\/p>\n
\nsection.chapter > div.titlepage > div > div > h2.title:before {\ncounter-increment: ChapterNo;\ncontent: \"Chapter \" counter(ChapterNo);\n}\ndiv.figure-title:before {\ncounter-increment: FigureNo;\ncontent: \"Figure \" counter(ChapterNo)\"-\" counter(FigureNo)\": \";\n}\nsection.chapter {\ncounter-reset: ChapterNo FigureNo;\n}\n<\/code><\/pre>\n
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<\/em>, che significa che se volete reimpostare alcuni contatori sullo stesso elemento ma li definite separatamente, verr\u00e0 onorata solo l’ultima definizione. Per far s\u00ec che tutti i contatori si azzerino, dovete farli andare insieme, come mostrato qui sopra). Inoltre, usiamo il contatore ChapterNo<\/code> all’interno del titolo della figura, per fare cose di questo tipo:\u201cFigura 5-11:.\u201d. In questo caso, il contatore ChapterNo<\/code> \u00e8 in effetti applicato all’elemento padre del titolo della figura: section.chapter<\/code>. Il PDF Processor cercher\u00e0 progressivamente sempre pi\u00f9 avanti finch\u00e9 trova un’istanza del contatore specificato che si applica all’elemento in questione.<\/p>\n<\/div>\n
\n
Stringhe<\/h2>\n
Quasi ogni elemento pu\u00f2 essere convertito in una stringa che potete poi richiamare nel vostro CSS perch\u00e9 appaia in altri posti del vostro documento. Le intestazioni e i pi\u00e9 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\u00f2 pi\u00f9 avanti perch\u00e9 ho scelto invece di usare le stringhe.<\/p>\n
Usate string-set<\/code> su qualsiasi elemento per far s\u00ec che il contenuto dell’elemento sia riutilizzabile. Decidete un nome per questo e nominate il contenuto che volete includere:<\/p>\n
\ndiv.book > div.titlepage > div > div > h1.title {\n  string-set: Booktitle self;\n}\nsection.chapter > div.titlepage > div > div > h2.title {\n  string-set: Chapter self before;\n}\n<\/code><\/pre>\n
Nell’esempio di prima, il nome della stringa \u00e8 \u201cBooktitle\u201d e uso il semplicissimo \u201cself\u201d 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<\/code> (come ho fatto per aggiungere i numeri di capitolo nella sezione Contatori di cui sopra).<\/p>\n
Per richiamare le stringhe, fatevi riferimento nella propriet\u00e0 del contenuto:<\/p>\n
\n@page :left { \/* left page setup *\/\n  @bottom-left { \/* verso running footer *\/\n    content: counter(page)\" \"string(Booktitle);\n  }\n}\n@page :right { \/* right page setup *\/\n  @bottom-right { \/* recto running footer *\/\n    content: string(Chapter)\" \"counter(page);\n  }\n}\n<\/code><\/pre>\n
Le stringhe possono essere piuttosto potenti e possono includere svariati tipi di contenuto all’interno della propriet\u00e0 string-set<\/code>, 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\u00f9 stringhe all’interno di una propriet\u00e0 string-set<\/code>.<\/p>\n
CSS3-GCPM include in realt\u00e0 delle propriet\u00e0 speciali solo per gli elementi mobili: running()<\/code> e element()<\/code>. Usate insieme, queste propriet\u00e0 convertono qualsiasi elemento in un’intestazione o in un pi\u00e9 di pagina mobile. Tuttavia, il pericolo in questo caso \u00e8 che quando si converte cos\u00ec un elemento in un elemento mobile, questo non appare pi\u00f9 nella sua posizione originale: running()<\/code> agisce pi\u00f9 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.<\/p>\n<\/div>\n
\n
Riferimenti incrociati<\/h2>\n
La maggior parte dei documenti lunghi (come i libri) include i riferimenti incrociati, che di solito hanno questa forma: \u201cVedi pag. 127\u201d. 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 \u00e8 impaginato, \u00e8 difficile sapere a quale punto nel testo dovrebbero far riferimento. Non saprete il numero della pagina stampata finch\u00e9 il testo non passer\u00e0 attraverso il PDF processor e in ogni caso quel numero di pagina non sar\u00e0 accurato quando diventer\u00e0 un eBook che potr\u00e0 ridimensionarsi. La soluzione a questo problema consiste nell’usare un testo generato, che si basi su target-counter()<\/code> e target-text()<\/code>.<\/p>\n
Ad esempio, supponiamo che abbiate questo riferimento incrociato nel vostro HTML:<\/p>\n
<p>See <a class=\"xref\" href=\"#section25\" title=\"Working with Cross \nReferences\">Chapter 5, <em>Working with Cross References<\/em><\/a>.<\/p><\/code><\/pre>\n
Aggiungendo questo stile al CSS:<\/p>\n
\na.xref:after {\n  content: \" (pag. \" target-counter(attr(href, url), page) \")\";\n}\n<\/code><\/pre>\n
Otterrete:<\/p>\n
Vedi Capitolo 5, Lavorare con i riferimenti incrociati (pag.127)<\/a><\/p>\n
In questo CSS accadono alcune cose interessanti. Innanzitutto, abbiamo usato una stringa di testo statico che aggiunger\u00e0 uno spazio, una parentesi aperta, la parola \u201cpage \u201d e un altro spazio prima di qualsiasi contenuto generato. Il pezzo successivo, target-counter<\/code>, dice al renderer di richiamare il contatore specifico relativo all’elemento. Poi, all’interno delle parentesi, diciamo al renderer che abbiamo bisogno del contatore \u201cpage\u201d che si applica all’attributo href<\/code> 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\u00e0 aggiornato automaticamente.<\/p>\n
La propriet\u00e0 target-text()<\/code> spinge le cose un po’ pi\u00f9 in l\u00e0 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 \u201chard-coded\u201d per stampare un numero di pagina, come questo:<\/p>\n
<p>See <a class=\"xref\" href=\"#section25\" title=\"Working with Cross \nReferences\">page 110<\/a><\/p><\/code>\n\u2026\n<h2 class=\"title\" id=\"section25\">Working with Cross References<\/h2><\/code><\/pre>\n
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:<\/p>\n
\na.xref {\n  content: target-text(attr(href, url), content())\" (page \" target-counter\n  (attr(href, url), page) \")\";\n} \n<\/code><\/pre>\n
Ci dar\u00e0 questo:<\/p>\n
See Working with Cross References (page 127)<\/a><\/p>\n
La propriet\u00e0 target-text<\/code> funziona pi\u00f9 o meno come target-counter<\/code>: segue l’url alla sua sorgente e quando gli diamo il valore di content()<\/code>, 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\u00e0 impostato la numerazione automatica dei capitoli utilizzando i contatori, come abbiamo fatto in precedenza nella sezione Stringhe, allora possiamo tirare dentro anche quest’ultimo:<\/p>\n
\na.xref {\n  content: target-counter(attr(href, url), ChapterNo)\", \"target-text\n  (attr(href, url), content())\" (page \" target-counter(attr(href, url), \n  page) \")\";\n}\n<\/code><\/pre>\n
Per il nostro risultato finale desiderato:<\/p>\n
See Chapter 5, Working with Cross References (page 127)<\/a><\/p>\n
Un avvertimento importante: Antenna House non spezza il testo generato su pi\u00f9 righe. Se il testo importato \u00e8 troppo lungo per rientrare nell’area della pagina, semplicemente si allungher\u00e0 oltre il margine della pagina. Tuttavia, Antenna House spezzer\u00e0 le stringhe di testo statico che includete nella propriet\u00e0 del contenuto. Nell’esempio precedente, spezzer\u00e0 in un qualunque posto \u201cChapter \u201c, \u201c (page \u201c, and \u201c)\u201d<\/code>, ma non spezzer\u00e0 all’interno del titolo del capitolo o nei numeri di pagina o di capitolo (sebbene questi ultimi sono cos\u00ec 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”.<\/p>\n<\/div>\n
\n
Sommario<\/h2>\n
Un sommario pu\u00f2 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<\/code> per impostarlo:<\/p>\n
\ndiv.toc ul li.preface a:after { \n content: leader(dotted) \" \" target-counter(attr(href, url), page);\n}\n<\/code><\/pre>\n
La funzione leader(dotted)<\/code> aggiunge un tab leader tra la entry del testo del sommario e il numero di pagina generato, in questo modo:<\/p>\n
Working with Cross References\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026.. 127<\/p>\n
Ci sono tre stili predefiniti del leader: dotted, solid e space, oppure potete crearvi il vostro mediante una stringa. Ad esempio, leader(\"~\")<\/code> creer\u00e0 una linea di tilde.<\/p>\n<\/div>\n
\n
Layout multi-colonna<\/h2>\n
Un’altra nuova feature di CSS3 sono i multi-column layouts<\/a>: permettono di suddividere ogni div<\/code> in pi\u00f9 colonne usando column-count<\/code>. 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<\/code> al div<\/code> index:<\/p>\n
\ndiv.titlepage+div.indexnote+div.index {\ncolumn-count: 2;\ncolumn-gap: 12pt;\n}\n<\/code><\/pre>\n
La propriet\u00e0 column-count<\/code> imposta il numero di colonne e la propriet\u00e0 column-gap<\/code> imposta lo spazio tra le colonne. Potete anche aggiungere column-width<\/code> per specificare la larghezza di due (o pi\u00f9) colonne. Di default, le colonne si estendono per l’intera area della pagina a disposizione.<\/p>\n<\/div>\n
\n
Interruzioni<\/h2>\n
Se avete fatto produzione di libri digitali, allora le propriet\u00e0 di page break di CSS vi saranno probabilmente familiari: page-break-before<\/code>, page-break-after<\/code> e page-break-inside<\/code>.<\/p>\n
Cos\u00ec come \u00e8 stato definito in CSS2.1, page-break-before<\/code> e -after<\/code> accettano i seguenti valori: auto<\/code>, always<\/code>, avoid<\/code>, left<\/code>, right<\/code> e inherit<\/code>. Potete usarli per forzare le interruzioni attorno agli elementi o utilizzare page-break-inside<\/code> per evitare che le interruzioni avvengano all’interno degli elementi. (Ci\u00f2 \u00e8 ad esempio utile per tenere tutti i paragrafi di una barra laterale sulla stessa pagina). Assegnare un valore di left<\/code> o right<\/code> forzer\u00e0 un’interruzione fino a che non vi ritroverete con una pagina vuota rispettivamente sinistra o destra. Questo \u00e8 utile per i capitoli del libro, in cui volete che ogni capitolo inizi sulla pagina a destra. Definirete il div<\/code> del capitolo come segue:<\/p>\n
\nsection.chapter {\n  page-break-before: right;\n}\n<\/code><\/pre>\n
CSS3 aggiunge alcune altre propriet\u00e0 per i layout su pi\u00f9 colonne: break-before<\/code>, break-after<\/code> e break-inside<\/code>. Queste funzionano nello stesso modo delle regole page-break<\/code> ma a livello della colonna e aggiungono alcuni altri valori possibili: page<\/code> (forza un’interruzione di pagina), column<\/code> (forza un’interruzione di colonna), avoid-page<\/code> (evita un’interruzione di pagina) e avoid-column<\/code> (evita un’interruzione di colonna).<\/p>\n<\/div>\n
\n
Note a fondo pagina<\/h2>\n
CSS3-GCPM aggiunge una gestione speciale solo per le note a fondo pagina. Per prima cosa, abbiamo il selettore @footnote<\/code>, 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<\/code>, che \u00e8 dove accade la vera magia. Quando applicate un float footnote<\/code> a un elemento, l’intero contenuto dell’elemento viene spostato in basso, in fondo alla pagina, nell’area della pagina per @footnote<\/code>. 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 \u00e8 applicato il float. Potete assegnare uno stile in-text<\/code> al marker, chiamato footnote-call e il numero di nota a fondo pagina a cui \u00e8 applicato il float, chiamato il footnote-marker con due nuovi pseudo-elementi: ::footnote-call<\/code> e ::footnote-marker<\/code>.<\/p>\n
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\u00f2, 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 \u00e8 fallito perch\u00e9, come notato sopra, il testo generato in alcuni PDF processor non si interrompe tra le righe, ma al contrario finisce sotto il margine se \u00e8 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\u00ec. <\/a>[2]<\/a><\/p>\n
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<\/code> con class=\"footnote\"<\/code>. Ho scelto gli span principalmente perch\u00e9 avrebbe lasciato le note a fondo pagina come inline, senza aggiungere un’altra interruzione di paragrafo (come farebbero invece i div<\/code> o i p<\/code>).<\/p>\n
Ecco il nuovo html:<\/p>\n
<p>As you saw in the earlier section,<span class=\"footnote\"><p>If you \nwere paying attention, of course.<\/p><\/span> generated text doesn't break \nacross lines.<\/p><\/code><\/pre>\n
S\u00ec, avete visto giusto: abbiamo un p<\/code> all’interno di uno span<\/code> all’interno di un p<\/code>. Non \u00e8 XHTML perfettamente formato, ma funziona. E con questo semplice CSS:<\/p>\n
\nspan.footnote {\n  float: footnote;\n}\n<\/code><\/pre>\n
Otteniamo questo:<\/p>\n
As you saw in the earlier section,1<\/sup> generated text doesn\u2019t break across lines.<\/p>\n
1 If you were paying attention, of course.<\/p>\n
Un’altra parte dell’arsenale CSS3 per le note a fondo pagina \u00e8 il predefinito counter-footnote<\/code>, che si applica a tutti gli elementi con float: footnote<\/code>. 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\u00e9 ricominci all’inizio di ogni nuovo capitolo).<\/p>\n
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<\/code>. C’\u00e8 anche uno stile \u201cfootnote\u201d 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\u00ec:<\/p>\n
\n::footnote-call { \n  content: counter(footnote, lower-alpha); \n} \n::footnote-marker { \n  content: counter(footnote, lower-alpha); \n}\n<\/code><\/pre>\n
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.<\/p>\n<\/div>\n
\n
Segnalibri PDF<\/h2>\n
Il bookmarking \u00e8 irrilevante quando avete a che fare con i media stampati, ma \u00e8 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.<\/p>\n
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 \u00e8 aperto, li abbiamo impostati sullo stato \u201cclosed\u201d. 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:<\/p>\n
\nsection.chapter > div.titlepage > div > div > h2.title { \n  bookmark-level: 1; \n  bookmark-state: closed;\n}\ndiv.sect1 > div.titlepage > div > div > h2.title { \n  bookmark-level: 2; \n  bookmark-state: closed;\n}\n<\/code><\/pre>\n
I segnalibri includeranno automaticamente l’intero contenuto dell’elemento, incluso qualsiasi testo che abbiate aggiunto con i selettori :before<\/code> e :after<\/code>. Tuttavia, potete restringere il bookmark perch\u00e9 mostri solo un sottoinsieme dell’informazione dell’elemento usando la propriet\u00e0 bookmark-label<\/code>. Ad esempio:<\/p>\n
 \nsection.chapter > div.titlepage > div > div > h2.title { \n  bookmark-level: 1; \n  bookmark-state: closed;\n  bookmark-label: content();\n}\n<\/code><\/pre>\n
L’esempio precedente mostrer\u00e0 solo il testo attuale dell’elemento e ignorer\u00e0 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<\/code>.<\/p>\n
Potete anche scegliere di mostrare una stringa di testo specifica che sovrascriver\u00e0 il contenuto dell’elemento HTML. Ad esempio, se volte aggiungere un segnalibro alla pagina copyright, ma le parole \u201cCopyright Page\u201d effettivamente non appaiono da nessuna parte nel testo:<\/p>\n
\ndiv.copyrightpage { \n  bookmark-level: 1; \n  bookmark-state: closed;\n  bookmark-label: \"Copyright Page\"\n}\n<\/code><\/pre>\n<\/div>\n
\n
Font<\/h2>\n
Quando si tratta di aggiungere dei font personalizzati al proprio CSS, potreste essere sollevati dal sapere che \u00e8 lo stesso vecchio CSS a cui siete abituati: usate @font-face<\/code> per dichiarare il font e usate font-family<\/code> 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 \u00e8 lo stesso CSS che abbiamo usato per anni:<\/p>\n
\nfont-family: \"Gotham\", \"Arial Unicode\", sans-serif; \n<\/code><\/pre>\n
Arial Unicode include un numero impressionante di glifi, pertanto \u00e8 una scelta piuttosto sicura come fallback sans-serif.<\/p>\n
La maggior parte delle stampanti commerciali richiede che i font siano \u201cembedded\u201d nel file PDF. I metodi per fare ci\u00f2 variano a seconda del PDF processor, perci\u00f2 dovete leggere attentamente la documentazione se volete inserire dei font nel vostro workflow. Potreste anche inserire dei font dopo la conversione con PitStop<\/a> o con un altro tool di post-processing del PDF.<\/p>\n
Ci sono molte feature CSS3 carine per i font, ma sono ancora instabili e n\u00e9 Antenna House n\u00e9 Prince le supportano ancora (sebbene Antenna House e Prince in senso pi\u00f9 limitato hanno alcune estensioni carine per lavorare con i font). Guardate il Fonts module<\/a> per avere un’idea di quello che verr\u00e0. \u00c8 in corso lo sviluppo che migliora la formattazione del testo su larga scala, incluso specificare le word-break<\/code> e i line-break<\/code>, la spaziatura e cos\u00ec via. Prince e Antenna House hanno implementato alcune caratteristiche vari modi, come sono state definite al momento del rilascio. Potete controllare la specifica<\/a>, sebbene io vi incoraggi a controllare il manuale del vostro PDF processor prima di sperimentare, perch\u00e9 potrebbero esserci delle variazioni.<\/p>\n<\/div>\n
\n
I tocchi finali per la stampa<\/h2>\n
Ci sono alcuni tocchi finali da fare se state pianificando di stampare il vostro documento per la vendita.<\/p>\n
Risoluzione delle immagini<\/h3>\n
La risoluzione delle immagini \u00e8 cruciale per i media stampati. Una linea guida generale \u00e8 di impostare la risoluzione di ciascuna immagine tra i 200 e i 300 dpi (requisiti specifici dipendono dalle necessit\u00e0 di ciascun libro). La maggior parte dei PDF processo imposter\u00e0 la propria risoluzione di default sulle immagini durante la conversione, ma potete invece scegliere di preservare la risoluzione dei files sorgente.<\/p>\n
\nimg {\nimage-resolution: from-image;\n}\n<\/code><\/pre>\n
Potete anche impostare il valore a normal<\/code> per far s\u00ec che il processor scelga la risoluzione, oppure potete fornire un valore numerico specifico per il dpi. (Pasticciare con la risoluzione delle immagini \u00e8 una questione delicata, quindi prima fate i compiti!<\/a>).<\/p>\n
I colori CMYK<\/h3>\n
Dovreste pensare ai colori CMYK durante tutta la costruzione del foglio di stile. Li si specifica in maniera simile alla specifica dei colori RGB:<\/p>\n
\nhr {\ncolor: device-cmyk(0.0, 0.0, 0.0, 0.3);\n}\n<\/code><\/pre>\n
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\u00f9 presentazioni (web, carta, etc.).<\/p>\n
\nhr {\ncolor: #B3B3B3;\ncolor: device-cmyk(0.0, 0.0, 0.0, 0.3);\n}\n<\/code><\/pre>\n
Se il dispositivo che legge il codice non comprende CMYK, user\u00e0 la versione web-friendly.<\/p>\n
[QUI]<\/p>\n
Crocini e bleed per la stampa<\/h3>\n
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 \u00e8 solitamente piuttosto esatto ma pu\u00f2 variare di alcuni sedicesimi di pollice. Cos\u00ec, 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\u00ec che vadano un pochino oltre il limite della pagina, per ogni eventualit\u00e0, 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:<\/p>\n
\n@page {\n  bleed: 6pt;\n  marks: crop;\n}\n<\/code><\/pre>\n
\u00c8 davvero cos\u00ec semplice. Ovviamente, dovrete essere creativi con gli elementi bleed, utilizzando i margini negativi e il posizionamento per far s\u00ec che funzioni: il processor non aggiunger\u00e0 automaticamente dei colori o del contenuto oltre i limiti dell’elemento, mostrer\u00e0 solo il contenuto che gi\u00e0 esiste.<\/p>\n<\/div>\n
\n
Note finali e ulteriori approfondimenti<\/h2>\n
Potete leggere l’elenco completo delle propriet\u00e0 CSS supportate da Antenna House<\/a>, ma vi metto in guardia: la documentazione \u00e8 nel caso migliore limitata e non sempre chiara. Quella di Prince<\/a> \u00e8 leggermente migliore.<\/p>\n
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<\/a>. Le estensioni di Prince<\/a> sono elencate online con il supporto CSS regolare e sono meno robuste. Inoltre, se la documentazione CSS non vi \u00e8 di aiuto, potreste trovare utile leggere la documentazione della relativa propriet\u00e0 XSL-FO. Sono in uso da molto pi\u00f9 tempo e sono pi\u00f9 approfondite; inoltre, la funzionalit\u00e0 di solito \u00e8 la stessa o \u00e8 molto simile. Non sono riuscita a trovare la documentazione di Prince su questo argomento, ma qui trovate la documentazione di Antenna House<\/a>.<\/p>\n
Ricordatevi che CSS3 \u00e8 una specifica ancora in fase di sviluppo. CSS3.info<\/a> 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\u00e9 di pagina, i colori printer-friendly, le immagini e i bleed, ma CSS3 ha molto di pi\u00f9 da offrire quando si tratta di media impaginati e vi esorto a guardare quanto potreste fare (e ricordatevi che CSS2.1 funziona ancora).<\/p>\n<\/div>\n
\n
Riferimenti<\/h2>\n
<\/a>[1]<\/a>Se state partendo dai file sorgente in XML, vi sar\u00e0 pi\u00f9 facile convertirli prima in XHTML per poi aggiungervi gli stili con CSS. Per fortuna, Bob Stayton ha gi\u00e0 creato lo XSL per aiutarci:http:\/\/sourceforge.net\/projects\/docbook\/files\/epub3\/<\/a>.<\/p>\n
<\/a>[2]<\/a> Perch\u00e9 dov’\u00e8 il divertimento nelle note a fondo pagina se non si pu\u00f2 essere un po’ poetici?<\/p>\n
Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Sebbene storicamente sia stato difficile, nel caso migliore, creare dei libri in PDF di qualit\u00e0 pari a quella della stampa partendo dal solo markup, CSS3 ci mette ora a disposizione Paged Media Module, che ha come obiettivo la formattazione dei libri stampati. I media Paged esistono come pagine finite, come libri e riviste piuttosto che lunghi segmenti di testo su cui fare scrolling, come la maggior parte dei siti web. Con un solo foglio di stile CSS, gli editori possono prendere il contenuto sorgente XHTML e metterlo in un PDF sistemato e pronto per la stampa. Potete prendere il sorgente XHTML, bypassare i software di desktop page layout come Adobe InDesign e confezionarlo come un ePub Media. \u00c8 un workflow leggero e adattabile, che vi d\u00e0 dei libri bellissimi in maniera pi\u00f9 rapida. Nellie McKesson, eBook Operations Manager in O’Reilly Media, spiega come creare libri con CSS3.<\/p>\n","protected":false},"author":818,"featured_media":7000662,"comment_status":"open","ping_status":"open","template":"","categories":[244,69,275,278],"tags":[],"coauthors":[366],"class_list":["post-278","article","type-article","status-publish","has-post-thumbnail","hentry","category-css","category-numero-54-19-giugno-2012","category-tipografia-web-font","category-workflow-tools"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=278"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000662"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=278"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}