Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 06-08-2018, 12:32 PM   #1
Wlan
Junior Member
Wlan began at the beginning.
 
Wlan's Avatar
 
Posts: 6
Karma: 10
Join Date: Jun 2018
Device: none
Best way for reflowable cover without svg

I created a method for reflowable cover without svg since Apple advise not to use images wrapped in svg.

I hope it helps someone!

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="us" lang="us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Cover</title>
<style type="text/css" title="override_css">
@page{padding: 0pt; margin: 0pt}
body{height: 100%; padding: 0pt; margin: 0pt;}
#cover{width: 100%; height: 100%;}
#cover img{max-height: 100%; max-width: 100%; height: auto; width: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
</style>
</head>
<body>
<div id="cover">
<img src="cover.jpg" alt="Cover" />
</div>
</body>
</html>
Wlan is offline   Reply With Quote
Advert
Old 06-08-2018, 02:46 PM   #2
RbnJrg
Guru
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 837
Karma: 3222221
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Wlan View Post
I created a method for reflowable cover without svg since Apple advise not to use images wrapped in svg.

I hope it helps someone!

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="us" lang="us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Cover</title>
<style type="text/css" title="override_css">
@page{padding: 0pt; margin: 0pt}
body{height: 100%; padding: 0pt; margin: 0pt;}
#cover{width: 100%; height: 100%;}
#cover img{max-height: 100%; max-width: 100%; height: auto; width: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
</style>
</head>
<body>
<div id="cover">
<img src="cover.jpg" alt="Cover" />
</div>
</body>
</html>
Read this post:

https://www.mobileread.com/forums/sh...54&postcount=3

Regards
RbnJrg is offline   Reply With Quote
Old 06-08-2018, 04:03 PM   #3
Wlan
Junior Member
Wlan began at the beginning.
 
Wlan's Avatar
 
Posts: 6
Karma: 10
Join Date: Jun 2018
Device: none
Quote:
Originally Posted by RbnJrg View Post
RbnJrg,

Its also a good technique, I use like this on one of my websites.

*{margin:0;padding:0;}
html{height:100%;background:url(cover.jpg) no-repeat center center fixed;background-size:contain;}
body{height:100%;}
Wlan is offline   Reply With Quote
Old 06-08-2018, 04:51 PM   #4
RbnJrg
Guru
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 837
Karma: 3222221
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Wlan View Post
RbnJrg,

Its also a good technique, I use like this on one of my websites.

*{margin:0;padding:0;}
html{height:100%;background:url(cover.jpg) no-repeat center center fixed;background-size:contain;}
body{height:100%;}
In a website, those css properties work fine. But ebooks (and mainly ereaders) don't support quite well some of them. In this case, we can have issues with:

Code:
html, body {
     height: 100%;
}
I tell you I use those properties without troubles when I'm building an ebook for modern Kindle devices (those ones what support the .kf8 format) but some ereaders (Sony for example) that are based on a not very modern version of RMSDK, have troubles to handle especially "html {height: 100%;}".

But I think your code would work fine without "html, body {height: 100%;}". With those properties, under ADE , the cover won't reflow. Do the try

Regards
Rubén
RbnJrg is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
How to change SVG cover options jvorzimmer Conversion 2 11-17-2017 01:18 AM
Can't add cover in Calibre -- get "svg-error" (the property 'svg' should be declared) Just some guy Editor 7 04-11-2017 09:54 PM
Generic SVG Cover Zentaurus Workshop 2 05-11-2016 11:21 PM
iPad SVG Cover thumbnail on iBook Viridovix Apple Devices 7 05-01-2013 01:03 AM
Validation error: svg cover graycyn Sigil 2 07-24-2011 07:34 PM


All times are GMT -4. The time now is 11:30 AM.


MobileRead.com is a privately owned, operated and funded community.