Best way for reflowable cover without svg

Wlan · 06-08-2018, 12:32 PM

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>

RbnJrg · 06-08-2018, 02:46 PM

Quote:

Originally Posted by Wlan

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

Wlan · 06-08-2018, 04:03 PM

Quote:

Originally Posted by RbnJrg

Read this post:

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

Regards

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%;}

RbnJrg · 06-08-2018, 04:51 PM

Quote:

Originally Posted by Wlan

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

06-08-2018, 12:32 PM	#1
Wlan Enthusiast Posts: 25 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>

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

Advert