View Full Version : Calibre breaks image/div margins


dasboeh
12-11-2012, 07:02 AM
I'm currently working on a publishers project, who wishes to add special "stick-out" sites to the E-Book. Which means a grey background with round borders at the start and the ending.

I accomplished this with DIVs and a starting and ending image.

Here's the XHTML-Code:
<div class="REDbgUpper"><img alt="" src="../Images/UpperGrey.png" width="100%" /></div>

<div class="REDbgText">
<p class="REDheading">Er prägte diesen Satz</p>

<p class="REDbodyfirst">Vielleicht kennen Sie ihn als einen der erfolgreichsten Politiker, der jemals auf der Weltbühne stand oder als einen der angesehensten Staatsmänner aller Zeiten, doch wissen Sie auch, was der ehemalige britische Premierminister Winston Churchill durchgemacht hat, bevor er zu einer derartigen Größe wurde?</p>
.
.
.
<p class="REDbodytextENDE">Ich ermutige Sie heute genau so, wie Churchill 1941 die Schüler ermahnte: »Was Sie auch tun, geben Sie nicht nach und geben Sie niemals, niemals, niemals auf.«</p>
</div>

<div class="REDbgLower"><img alt="" src="../Images/LowerGrey.png" width="100%" /></div>


And here's the according CSS:
p.REDheading {
font-size : 1.4em;
font-weight : bold;
text-align : center;
margin : -1px 2em 0.8em 2em;
page-break-after:avoid;
background: #e6e6e6;
}

p.REDbodyfirst {
text-indent : 0px;
margin: 0 2em 0 2em;
background: #e6e6e6;
}

p.REDbodytext {
text-indent : 1.5em;
margin: 0 2em 0 2em;
background: #e6e6e6;
}

p.REDbodytextENDE {
text-indent : 1.5em;
margin: 0 2em -1px 2em;
background: #e6e6e6;
}
div.REDbgText {
width: 100%;
background: #e6e6e6;
margin: 0;
}

div.REDbgUpper {
margin: 0 0 -1px 0;
padding-bottom: 0;
}

div.REDbgLower {
margin: 0 0 0 0;
}

With ADE and iBooks, everything looks just fine as I wanted it to be. :-)

http://ewort.de/download/ade1.jpg

http://ewort.de/download/ade2.jpg

But Calibre shows an awkward white spacing at the bottom of the upper image (I colored the borders of the DIVs for better hilighting the mess):

http://ewort.de/download/calibre1.jpg

http://ewort.de/download/calibre2.jpg

Has anybody any suggestions, how to fix this?

Thanks a lot in advance!

Stefan

DSpider
12-11-2012, 08:10 AM
I said this before; with ePub we're back in 1999 where the same webpage looked differently in every browser. Personally, I don't see Calibre as a reading program. Think of it more as an e-book manager, metadada editor, converter, etc. It even has some BS about transferring to various e-readers (useless feature, IMO).

Try using SVG instead of styling it in CSS - which some e-readers could very well ignore. Create those frames in Inkscape, add the text, and add them to the ePub.

dasboeh
12-12-2012, 02:12 AM
I said this before; with ePub we're back in 1999 where the same webpage looked differently in every browser. Personally, I don't see Calibre as a reading program. Think of it more as an e-book manager, metadada editor, converter, etc. It even has some BS about transferring to various e-readers (useless feature, IMO).

Try using SVG instead of styling it in CSS - which some e-readers could very well ignore. Create those frames in Inkscape, add the text, and add them to the ePub.

I'm definetely on your side! Testing ePubs on different devices, programs, platforms etc. gives me lots of headaches. To be shure to run on every available device, keep CSS and HTML to an absolute minimum... but to what price? We didn't get hundreds of years developing good rational book-typography for this?!?! But let's end the rant now...

I will give your SVG suggestion a definite try and see how it will work. Do you know anything about SVG support on various devices, or do you have any link?

Thanks.

DSpider
12-12-2012, 03:14 AM
They should. SVG is part of the ePub spec. However, converting the ePub to Mobi will render them as PNG (which won't be search-able or highlight-able, because well, they're images). Kindles don't do SVG. Only the KF8 format does, but I hear it's not that good.

Doitsu
12-12-2012, 04:26 AM
Try using SVG instead of styling it in CSS - which some e-readers could very well ignore. Create those frames in Inkscape, add the text, and add them to the ePub.

IMHO, this is a bad idea. SVG images containing text are treated like any other image. I.e. they cannot be searched and they won't resize if the text is resized.
And SVG images of just the box are also no solution, because superimposed text is often displayed differently by different readers.

@dasboeh:
Just forget about Calibre and focus on ADE and iBooks compatibility, because those who use Calibre as their main ebook reader most likely won't have the money to buy your client's books anyway.

AlPe
12-12-2012, 03:55 PM
If you are working on a EPUB 3 eBook, CSS (3) property border-radius should be supported.

Aerys
12-12-2012, 10:14 PM
Personally if its works for ADE or iBooks then it should be just fine.

Calibre is primarily a "library/conversion" utility hence the "viewer" development/update is not as a priority by Developers to fix.

dasboeh
12-14-2012, 02:28 AM
Hello everyone! Thanks for your replies.

I managed to solve the issue, although Calibre's viewing mode is no primary testing device. But it still made me wonder.

So I added a class to the upper image and made it "vertical-align: bottom". Et voilá! And it still does work in ADE and iBooks... :-)

Stefan

dgatwood
12-19-2012, 05:08 PM
SVG may or may not be searchable, depending on how it is included. If you use an <img> tag, apparently, it isn't (much to my disappointment). If you use an <object> tag, it should be searchable. (Or at least it is searchable in WebKit, which covers many readers, either directly or indirectly.) If it isn't searchable, I would call that a bug in your reader.

Edit: It's also searchable if you drop the <svg> tag in the middle of the HTML content.

Agama
12-21-2012, 01:15 PM
So I added a class to the upper image and made it "vertical-align: bottom". Et voilá! And it still does work in ADE and iBooks... :-)


A nice, simple fix. Thanks for posting your solution.