Unearthing an old thread because as nearly always Kobo DO HAVE BUGS. And this time with the <svg> + <image> procedure.
Quote:
Originally Posted by davidfor
The usual suggestion for coding the cover is something like the following.
Code:
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 476 714" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="714" width="476" xlink:href="../Images/cover.jpeg"></image>
</svg>
</div>
|
- Grab the attached image. It's a real cover from a real book.
- Use the following code for the first cover html page:
Code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Silencio_de_blanca</title>
<style type="text/css">
body {
background-color: #000;
margin: 0;
text-align: center;
}
img {
max-width: 100%;
height: 100%;
}
</style>
</head>
<body id="Silencio_de_blanca" xml:lang="es-ES">
<!-- <div><img alt="" src="../Images/Silencio-de-Blanca.jpg"/></div> -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="99%" version="1.1" viewBox="0 0 970 1360" width="99%">
<image height="1360" transform="translate(0 0)" width="970" xlink:href="../Images/Silencio-de-Blanca.jpg"/>
</svg>
</body>
</html>
- As you can see I've commented out the original <img> tag and I've used the <svg>+<image> pair.
- Do you see the strange 99% setting in width and height? Reason: try the obvious 100% and you'll see it. You will get a second page on the cover (completely empty but a "line" in the upper part of the screen).
Just another more bug, I fear...