Profile cover photo
Profile photo
viola supernova
155 followers -
Pirati dell'Agglomerato, siete pronti?
Pirati dell'Agglomerato, siete pronti?

155 followers
About
Posts

Post is pinned.
  Un CSS trick per violasupernova.epub

    Inserire un’immagine raster (jpg, png, gif) all’interno di un eBook, e fare in modo che sia scalabile in base alla risoluzione del dispositivo in uso, non dà troppe difficoltà.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img src="/directory/image.jpg" />
<p>Nulla tempor sapien at nisl suscipit vulputate.</p>

    Per fare in modo che l’immagine sia “responsive” bisogna utilizzare una direttiva via CSS. Ad esempio:

img{
max-width: 100%;
height: auto;
}

    Variando la finestra del browser, l’immagine raster si adatta alle nuove dimensioni mantenendo l’aspect-ratio. Le immagini vettoriali con estensione .svg non si comportano nella stessa maniera. Variando la finestra del browser, l’immagine raster si adatta alle nuove dimensioni mantenendo l’aspect-ratio. Le immagini vettoriali con estensione .svg non si comportano nella stessa maniera. A seconda di com’è impostato l’attributo “preserveAspectRatio” compaiono bande bianche o sopra, o sotto, o sopra e sotto l’immagine.
    Per rendere responsive un’immagine .svg si deve fare ricorso a un CSS trick, vale a dire un imbroglio, una forzatura del sorgente, che consente di visualizzare correttamente il file. Il primo passaggio consiste nell’inserire il file .svg all’interno di un contenitore, ad esempio:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="svg-container" style="padding-bottom: 95%;">
<object class="svg-content" data="../images/image.svg" type="image/svg+xml"></object>
</div>
<p>Nulla tempor sapien at nisl suscipit vulputate.</p>

    La proprietà “padding-bottom” definisce la distanza tra il lato inferiore dell'immagine .svg e l’elemento che segue, il paragrafo, ed è espressa in percentuale in quanto calcolata dal bordo superiore del container.
Il CSS relativo all’istruzione è questo:

.svg-container{
 position: relative;
 width: 100%;
}
.svg-content {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

    Gli attributi position:absolute; top:0; left:0 permettono di togliere l'immagine dal flow di default e posizionarlo in relazione al conteiner. Il CSS trick consiste nel mettere l’attributo “padding-bottom” nel container. Lo scopo è tarare la distanza (padding-bottom) tra gli elementi; in questo caso image.svg e il paragrafo <p>.
    Ogni grafica vettoriale di VIOLA SUPERNOVA ha una sua propria dimensione percentuale relativa al container. Questo consente di eliminare gli spazi bianchi intorno all’immagine e controllarne il dimensionamento in relazione alla grandezza del dispositivo di lettura.
Il CSS trick funziona per ogni tipo di browser (Firefox, Explorer, Chrome ecc). Tra gli EPUB3 Reader per Android, solo ASTRI-Bee e GITDEN Reader, per ora, lo interpretano correttamente, benché il sorgente sia semanticamente corretto e validato dal W3C Validator.
    L’implementazione delle eReader app per quanto riguarda la capacità di interpretare l’estensione .svg è incompleta per un solo motivo: la grafica vettoriale scalabile integrata è usata quasi esclusivamente per realizzare elementi d’interfaccia grafica, icone e bottoni. Eppure i vantaggi che offre sono notevoli: massima resa su dispositivi di ogni dimensione, basso peso e possibilità di incorporare font, molto utile se l’immagine vettoriale è una pagina a fumetti.
Add a comment...

Post has attachment
Photo
Add a comment...

Post has attachment
Add a comment...

Post has shared content
È possibile scrivere un romanzo... leggendo una Visual Novel?
Con "The Deadline" sì! Prova anche tu l'innovativo progetto che ci ha tenuti impegnati per un anno con la DEMO GRATUITA:
- Per PC/Max/Linux: bit.ly/DemoVN
- Per Android su Play Store: bit.ly/DemoVNG
Riuscirai ad aiutare il povero Ramfis a pubblicare il suo romanzo e a trovare un accordo con i suoi... personaggi?!
Photo
Add a comment...

Post has shared content
DAMIEN HIRST: il magnifico pataccaro

Grande artista o sofisticato marketer, quella di #DamienHirst a Venezia è una mostra da non perdere. C'è tempo fino al 3 dicembre per partecipare a una narrazione tra sorpresa, ironia e irritazione. Su #JustBaked racconto perché ne vale la pena.
Add a comment...

Post has attachment
Ho disegnato la locandina per un film in concorso alla Biennale Cinema di Venezia. Un turbante conturbante. Ciak, si gira!
Photo
Add a comment...

Post has attachment
Everyone's always under construction.
Photo
Add a comment...

Post has shared content

Post has attachment
Ho tenuto botta.
Che botta, ho detto cazzo, che botta!
@ Reload Torino.
Photo
Add a comment...

Post has attachment
Photo
Add a comment...
Wait while more posts are being loaded