[DISPLAY_ULTIMATE_SOCIAL_ICONS]

Ridimensionare immagini in ePub

Liz Castro

19 Aprile 2011

Qualche tempo fa un lettore mi ha scritto per dirmi che avevo utilizzato il codice sbagliato per ridimensionare le immagini nel mio libro EPUB Straight to the Point. All’inizio ho pensato che avesse ragione, ma al secondo e terzo sguardo ho capito che non l’aveva.

Il problema è che l’iPad non riconosce le informazioni sulla larghezza che aggiungi direttamente a un elemento “img”. Questa cosa non dovrebbe succedere (leggi: un bug) e dovrebbe essere risolta.

Prima di tutto, diamo un’occhiata a come il CSS gestisce le immagini. Un’immagine ha una dimensione stabilita in pixel. Se non imposti la larghezza o l’altezza dell’immagine, nell’HTML o nel CSS, questa comparirà nella sua dimensione originale. Il CSS ti permette di impostare l’altezza e la larghezza di un’immagine direttamente in pixel o come percentuale di un elemento “parent”. Questo significa che se imposti la larghezza di un’immagine al 50%, essa verrà mostrata al 50% della larghezza dell’elemento in cui l’immagine è contenuta, non al 50% della larghezza originale dell’immagine.

Ecco come appare su Firefox. L’immagine occupa metà della larghezza della finestra, dal momento che il suo elemento d’origine è l’elemento “body”. Fin qui tutto bene.

Entriamo su iBooks. Sfortunatamente iBooks ha un bug che ignora una larghezza esplicitamente impostata per un elemento “img”. Semplicemente, la ignora del tutto:

La prima parte della soluzione, come ho descritto in EPUB Straight to the Point, è racchiudere l’elemento “img” in un “div” e poi impostare la larghezza del “div” a quanto vogliamo, in pixel o come percentuale.

Ma osservate cosa succede se rimuovete la proprietà “width” dall’elemento “img” e la applicate al “div” che contiene l’elemento “img”. In iBooks funziona come si vuole che funzioni:

Ma iBooks, come abbiamo visto, non segue le specifiche del CSS. Tuttavia, e questo è un grosso “tuttavia”, Firefox, Safari, Adobe Digital Editions e tutti quegli ereader che hanno come software integrato ADE, come il Sony Reader e il Nook di Barnes & Noble le seguono, le specifiche.

Le specifiche dicono che, di default, se un elemento sostituito, come un’immagine, è troppo grande per il suo contenitore (cioè un “div” che hai ridotto a metà), allora l’immagine fuoriesce dal contenitore. Cioè viene visualizza lo stesso per intero. Quello che la parte fuoriuscita non fa è adattarsi al layout. Questo significa che qualsiasi testo intorno va sopra l’immagine come se non ci fosse. E non è carino.

Come potete vedere, il “div” è stato ridotto al 50% della larghezza della finestra, ma l’immagine non viene toccata. Di default, la parte in più è visibile ma non interessa il flusso della pagina, dato che il testo va semplicemente sopra. ‘-.-

La seconda parte della soluzione (contenuta anche in EPUB Straight to the Point) è di impostare la larghezza dell’elemento “img” al 100% del suo elemento “parent”, in questo caso il “div”. Dal momento che il “div” è al 50% della larghezza della finestra e l’elemento “img” è al 100% del “div”, anche l’elemento “img” dovrà essere impostato al 50% della finestra. Questo vale sia per i iBooks che per altri ereader:

A un certo punto avevo pensato di usare “max-width” invece di “width”, ma questo funziona solo su iBooks, non sugli altri ereader. In altre parole, non è la soluzione.

da Pigs, Gourds, and Wikis | 19 aprile 2011

Lascia un commento

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