MobileRead Forums - View Single Post - Touch Cover not filling entire screen since 1.9.9

Nigol · 09-11-2011, 02:41 PM

I have finally figured it out. To have your image fit your screen here are what you need to modify inside your cover html file. (with firmware 1.9.10)

First remove any style that are present in your file that could affect it, that means under the <head> element any <link> element that refers to a css and xgpt file. I also remove the <style> element under <head> just to be sure.
And as a precaution I added the following style (note that putting that into sigil will add a style tag inside the head, it does the same thing):

Code:

<body style="margin:0; padding: 0; border-width: 0">

Now the important part, I have only been able to have it work when the file is svg, so if it is not I convert it. To change the svg that calibre generates, just change the width and height (inside the <svg> tag, not <image>) to 600 & 800 (it usually puts 100%, this is what creates the problem, even with the ratio to none) and preserveAspectRatio="none" (the case is important).

So my finished product looks like this:

Code:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="true" name="calibre:cover" />
    <title>Cover</title>
  </head>
  <body style="margin:0; padding: 0; border-width: 0">
    <svg xmlns="http://www.w3.org/2000/svg" height="800" 
preserveAspectRatio="none" version="1.1" viewBox="0 0 889 1186" 
width="600" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="1186" width="889" xlink:href="../Images/cover.jpeg"></image>
    </svg>
  </body>
</html>

Just change the values in Red with your image size.

Now when you load your book inside your Kobo it will process it and the cover created will fit nicely.

P.S. I have automated all this in my app, I will do some more testing and release a new version soon with this (should be v1.5.0), but note that I also resized the image to a ratio of 0.75 (600/800) just to be sure. Source is available right now.

Update : Even with the FULL file, there is still margins in the book I created, the above methods seems to work, no matter what.

09-11-2011, 02:41 PM	#8
Nigol Groupie Posts: 184 Karma: 363616 Join Date: Dec 2010 Location: Montreal, Canada Device: Kobo Original, Kobo Touch	I have finally figured it out. To have your image fit your screen here are what you need to modify inside your cover html file. (with firmware 1.9.10) First remove any style that are present in your file that could affect it, that means under the <head> element any <link> element that refers to a css and xgpt file. I also remove the <style> element under <head> just to be sure. And as a precaution I added the following style (note that putting that into sigil will add a style tag inside the head, it does the same thing): Code: <body style="margin:0; padding: 0; border-width: 0"> Now the important part, I have only been able to have it work when the file is svg, so if it is not I convert it. To change the svg that calibre generates, just change the width and height (inside the <svg> tag, not <image>) to 600 & 800 (it usually puts 100%, this is what creates the problem, even with the ratio to none) and preserveAspectRatio="none" (the case is important). So my finished product looks like this: Code: <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="true" name="calibre:cover" /> <title>Cover</title> </head> <body style="margin:0; padding: 0; border-width: 0"> <svg xmlns="http://www.w3.org/2000/svg" height="800" preserveAspectRatio="none" version="1.1" viewBox="0 0 889 1186" width="600" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="1186" width="889" xlink:href="../Images/cover.jpeg"></image> </svg> </body> </html> Just change the values in Red with your image size. Now when you load your book inside your Kobo it will process it and the cover created will fit nicely. P.S. I have automated all this in my app, I will do some more testing and release a new version soon with this (should be v1.5.0), but note that I also resized the image to a ratio of 0.75 (600/800) just to be sure. Source is available right now. Update : Even with the FULL file, there is still margins in the book I created, the above methods seems to work, no matter what. Last edited by Nigol; 09-11-2011 at 05:02 PM.