View Single Post
Old 11-11-2016, 11:01 PM   #14
GeoffR
Wizard
GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.
 
GeoffR's Avatar
 
Posts: 3,821
Karma: 19162882
Join Date: Nov 2012
Location: Te Riu-a-Māui
Device: Kobo Glo
Quote:
Originally Posted by Gogolo View Post
Thx! Exporting with tablet setting did the trick. Now 2k books to convert...

I wonder if conversion could not be archieved without converting the whole book. Is it not only a setting somewhere in a css style?
Yes, the fact that changing the output profile caused the cover to change size on the page suggests that the books' stylesheets are not properly setting the image size. Probably all you need to do is change the image style to set the size using a percentage, so its size is relative to the size of the screen. The problem is that every publisher does things a little differently, makes slightly different mistakes, so it might take a lot of manual editing.

The two most common forms of cover page I've seen are roughly like these examples, but there are an infinite number of variations. Note the "100%" sizes to make the cover as big as will fit on the available screen.

Example using <img>
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Cover</title>
  <style type="text/css">@page {margin:0px;}</style>
</head>
<body style="margin:0px;">
  <div style="text-align:center;">
    <img style="height:100%;max-width:100%;" src="cover.jpg"/>
  </div>
</body>
Example using <svg>
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Cover</title>
  <style type="text/css">@page {margin:0px;}</style>
</head>
<body style="margin:0px;">
  <svg xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org 1999/xlink"
       width="100%" height="100%" version="1.1"
       viewBox="0 0 1080 1440" preserveAspectRatio="xMidYMid meet">
    <image width="1080" height="1440" xlink:href="cover.jpg"/>
  </svg>
</body>
GeoffR is offline   Reply With Quote