Hello,
I am trying to convert some Cbz or Cbr comics into Epub with Calibre and I am facing one problem: with the converted Epub the comic pages (= pictures) do not show up in full scale on the e-readers, even though the resolution of my comic pictures are very big (1536 pixels by 2048 pixels). I would like the pages/images to always show up in the original image resolution (in this case 1536 pixels by 2048 pixels) independently of the e-readers screen resolution. Only like this it is possible to effectively read the texts in the images. With smaller screen resolution e-readers the pages (images) should also show up in their full resolution so that the reader will need to scroll to see the whole page. Very important is also that the pages should not "split" or "break" into several pages.
I have the feeling that many comic lovers dislike the whole idea of epub but I really would like to try to produce an acceptable epub version of comics since it is the only way to be able to distribute them on Amazon and iTunes for example. Please see one attached public domain comic as example the epub result. I tried to also upload the cbz file but it seems this forum doesn't accept uploading cbz files? Anyway it is only 12 pictures in the size of 1536 pixels by 2048 pixels. I have also uploaded a detailed PDF showing the settings I used with Calibre.
I have researched the internet for finding solutions to the 2 problems: not to split images into several pages ("nobreak") and how to display the pictures in their original resolution, but haven't found any convincing solution. I hope this could be possible to do with Calibre, since it is an excellent program and maybe I just don't know how to determine the right settings? The conversion is otherwise great and creates a TOC with all the pages numbered.
If it is not possible to resolve this problem with Calibre settings then I would very much appreciate if somebody has an alternative solution to how I could modify the code in Sigil in order to make the pages (pictures) show up in their original size always (even if the e-readers screen resolution is smaller than the picture resolution) and not split or break into several pages.
For the "nobreak" of pictures I have found one indication online:
to include in the CSS stylesheet:
.nobreak {
page-break-inside: avoid;
}
AND to embed each page/picture with the code:
<body class="calibre">
<div class="nobreak"><img alt="comic page #8" class="calibre2" src="../Images/7_0.jpg" /></div>
</body>
For the problem of how to make pictures show up in their original resolution independently of the e-readers screen resolution I found the following indication for SVG encapsulating but I am not sure how to apply it and if it will be accepted by all e-readers and stores:
From:
http://denis.papathanasiou.org/?p=592
Quoted:
For some types of books (such as manga, comics, or graphic novels),
epub doesn’t seem to be able to handle large images that should fill
the screen.
Apple has gone so far as to create its own fixed layout format for such ebooks.
It is possible, though, to stick with epub and get perfect results for
illustrated ebooks, using the forgotten (or perhaps simply overlooked)
svg image element.
Here’s a peek under the hood of how we do it at eBookBurn.com, as part
of our new illustrated ebook publishing feature.
This is an example of the markup to use in your epub’s xhtml files for
each image:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
viewBox="0 0 1536 2048" preserveAspectRatio="xMidYMid meet">
<image width="1536" height="2048" xlink:href="images/page01.jpeg" />
</svg>
What this markup does is take a JPEG image sized 1536 pixels wide by
2048 pixels tall, and frame it in the center of a 1536×2048 svg
element.
So why use svg at all?
Wouldn’t it be simpler to define it with the plain img tag (as this
epub template does), like this?
<img src="images/page01.jpeg" width="592" height="900" alt="Page 1"/>
Many devices, such as the iPad and the Nook Color, have screens larger
than six inches: so on those devices, using the plain img tag in your
epub’s xhtml files leaves an embarrassing whitespace gap, from where
the image stops to where the actual screen ends.
The svg element shown earlier, though, is different: it stretches the
image to fill the entire screen, while preserving the aspect ratio.
It’s also important to note that width and height specified within the
svg and image elements should not be thought of as pixel sizes, since
no units are defined, but as a width-to-height ratio.
For most devices, that’s enough, but some e-readers insist on adding
margins and other padding to each page, so it’s helpful to define this
in the xhtml file’s head block:
<style type="text/css">
@page { margin: 0.000000pt; padding: 0.000000pt; }
</style>
And these css classes in the stylesheet:
.svg_outer {
display: block;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
text-align: left;
}
.svg_inner {
display: block;
text-align: center;
}
So the final xhtml for each page image looks like this:
<div class="svg_outer">
<div class="svg_inner">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
viewBox="0 0 592 900" preserveAspectRatio="xMidYMid meet">
<image width="1536" height="2048" xlink:href="images/0_0.jpg"></image>
</svg>
</div>
</div>
</body>
Just repeat that pattern for every image in book, for every chapter
that contains full-page illustrations.
Thanks very much in case you did read until here :-)
All comments and indications are very much appreciated!
Cristofer