[DISPLAY_ULTIMATE_SOCIAL_ICONS]

Rientri multipli per tutti i device

Liz Castro

8 Febbraio 2012

[Tempo di lettura: 4 muniti]

Talvolta ho paura di non dare un’idea precisa di che cosa significa produrre un ebook. Così quando qualcuno pone un quesito interessante su #eprdctn, mi piace approfondire.

Oggi @ebookartisans ha posto il problema dei rientri multipli sui vecchi Kindle, i nuovi Kindle, ADE, Nook e iBooks attraverso un unico file ePub (passandolo ovviamente dentro KindleGen per convertirlo in .mobi). A questo scopo ha usato una combinazione di codice preso da Joshua Tallent e da me. Il mio codice funziona su Kindle soltanto per il primo livello di rientro. Gli altri livelli sono ignorati. Sfortunatamente Rick Gordon (un altro abitudinario di #eprdctn) ci informa che il Nook non prende proprio in considerazione media query e codice collegato (con l’introduzione dei CSS3 sono stati introdotte le media query, una funzione che permette di associare un determinato foglio di stile a un determinato device, e anche di impostare altri parametri del device come dimensioni, orientamento, colori, tipologia monitor – NdR).

Non vi tornano alla mente i problemi del CSS con Internet Explorer? Bene, è la stessa minestra molti anni dopo. Se ve li ricordate, gli anni sono passati anche per voi.

Fortunatamente a questo giro abbiamo qualche arma in più: abbiamo le media query che ho iniziato a spiegare qualche settimana fa.

Il problema con i rientri è che Kindle ha dei comportamenti bizzarri. Così, se state lavorando solo per i vecchi Kindle (non per il Fire) dovreste usare questo codice:

<stile type=”text/css” media=”amzn-mobi”>

. level1 {text-align:left; text-indent: -30px;}

. level2 {text-align:left; text-indent: -60px;}

. level3 {text-align:left; text-indent: -90px;}

</style>

Dovreste aggiungere anche uno spazio in più di fronte a level2 e level3 (e livelli successivi) per dare un margine sinistro alla prima riga. Questa è la soluzione di Joshua Tallent (in verità egli ha usato &#xa0, ma @ebookartisans ci dice che non funziona su Nook).

<p><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>•&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The mean aunt had her own traumatic childhood, deserving of treatment in a Roald Dahl novel.</p>

Rendo omaggio alla soluzione di Joshua, ma devo ammettere che odio gli spazi, e userei questa astuzia solo in casi estremi. Piuttosto suggerirei di evitare i rientri multipli, ma se proprio c’è necessità, allora facciamolo pure!

Dal momento che Nook ignora completamente la “not amzn-mobi” media query e qualsiasi CSS che le preveda, l’astuzia sta nel mettere il NOOK (o codice relativo ad altri e-reader) in un foglio stile che non abbia una media query e prima del sopracitato foglio stile dei vecchi Kindle. En passant, aggiungerò del codice che nasconda gli spazi in più a tutti i media che non siano i vecchi Kindle.

<style type=”text/css”>

.level1 {margin:0 0 0 2em; text-indent: -2em;}

.level2 {margin:0 0 0 4em; text-indent: -2em;}

.level3 {margin:0 0 0 6em; text-indent: -2em;}

.spaces {display:none}

</style>

<style type=”text/css” media=”amzn-mobi”>

.level1 {text-align:left; text-indent: -30px; }

.level2 {text-align: left; text-indent: -60px; }

.level3 {text-align: left; text-indent: -90px; }

.spaces {display:inline}

</style>

Ecco qua dove occorre tenere traccia delle regole dell’ereditarietà del CSS. Bisogna tenere in mente che i CSS più recenti sovrascrivono i CSS più remoti dello stesso livello di importanza. Così, il rientro di testo nei vecchi Kindle annullerà i CSS anteriori. Ciò è quello che vogliamo per il rientro di testo, ma non per il margine sinistro. Allora nel CSS occorre fare così: “margin-left: 0;” per ciascun stile nel foglio stile di Kindle.

<style type=”text/css”>

.level1 {margin:0 0 0 2em; text-indent: -2em;}

.level2 {margin:0 0 0 4em; text-indent: -2em;}

.level3 {margin:0 0 0 6em; text-indent: -2em;}

.spaces {display:none}

</style>

<style type=”text/css” media=”amzn-mobi”>

.level1 {margin-left:0;text-align:left; text-indent: -30px; }

.level2 {margin-left:0;text-align: left; text-indent: -60px; }

.level3 {margin-left:0;text-align: left; text-indent: -90px; }

.spaces {display:inline}

</style>

Questo codice funziona con i vecchi Kindle, il Kindle Fire, Nook, ADE e iBooks:

Non ci vuole un occhio d’aquila per vedere che la prima riga non è allineata con la seconda e con quelle che seguono. Un fenomeno che differisce da ereader a ereader. Non ci sono tabulazioni in ePub (o HTML) e ciascun ereader gestisce gli spazi a modo proprio. Se vogliamo le righe perfettamente allineate dobbiamo utilizzare il buon vecchio “list”. È stupendo a patto che si sia disposti ad accettare il bullet di default, poiché i vecchi Kindle non consentono alternative.

Qualcuno penserà “Ma che casino questo ePub!”. In effetti c’è da rimboccarsi parecchio le maniche.

Ecco qua sia il file ePub sia il file .mobi che ho generato con Kindle Previewer 3.

da Pigs, Gourds, and Wikis | 8 febbraio 2012

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *