Calibre breaks image/div margins

[dasboeh]

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. :-)





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):





Has anybody any suggestions, how to fix this?

Thanks a lot in advance!

Stefan

[DSpider]

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]

Originally Posted by DSpider

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]

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]

Originally Posted by DSpider

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]

If you are working on a EPUB 3 eBook, CSS (3) property border-radius should be supported.

[Aerys]

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]

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]

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]

Originally Posted by dasboeh

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.