Quote:
Originally Posted by DNSB
I use Sigil for most epub editing tasks but the calibre editor will work much the same.
Basically, copy and paste everything from the "<style type="text/css">" to the "/div>" which are bolded in the code box. Locate the image size, modify the SVG wrapper with the image size and image file name. I've attached a sample of a page displaying a single image. The <h3 class="hidden">Chapter Title</h3> allows a title for the page in the ToC without having the text visible. You can leave it out if you are not using a ToC to jump between chapters.
Since you mention the images are the same size, you can modify one file and then use that as the source to copy/paste leaving only the image file name needing to be changed.
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<meta charset="utf-8"/>
<title>Cardinal PNG</title>
<link href="../Styles/stylesheet.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
@page {padding: 0; margin:0}
body { text-align: center; padding:0; margin: 0; }
</style>
</head>
<body>
<h3 class="hidden">Cardinal PNG</h3>
<div>
<svg height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1500 2000" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="2000" width="1500" xlink:href="../Images/cardinal.png"/></svg>
</div>
</body>
</html>
CSS stylesheet:
Code:
body {
display: block;
font-size: 1em;
margin: 0 0 0 0;
padding: 0 0 0 0;
widows: 1;
orphans: 1;
}
.hidden {
display: none;
}
|
Thanks so much for the detailed info and clear steps, I appreciate it!