View Single Post
Old 03-26-2014, 05:28 PM   #12
arspr
Dead account. Bye
arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.
 
Posts: 587
Karma: 668244
Join Date: Mar 2011
Device: none
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 View Post
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...
Attached Thumbnails
Click image for larger version

Name:	Silencio-de-Blanca.jpg
Views:	268
Size:	211.3 KB
ID:	120847  
arspr is offline   Reply With Quote