Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 12-11-2012, 07:02 AM   #1
dasboeh
Junior Member
dasboeh is on a distinguished road
 
Posts: 9
Karma: 50
Join Date: Oct 2009
Device: Bokeen Cybook Opus; Sony PRS-300; Amazon Kindle 3rd
Calibre breaks image/div margins

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:
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:
Code:
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
dasboeh is offline   Reply With Quote
Old 12-11-2012, 08:10 AM   #2
DSpider
Evangelist
DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.
 
DSpider's Avatar
 
Posts: 413
Karma: 326969
Join Date: Nov 2009
Location: Romania
Device: iPod touch 2G (16 GB)
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.
DSpider is offline   Reply With Quote
Old 12-12-2012, 02:12 AM   #3
dasboeh
Junior Member
dasboeh is on a distinguished road
 
Posts: 9
Karma: 50
Join Date: Oct 2009
Device: Bokeen Cybook Opus; Sony PRS-300; Amazon Kindle 3rd
Quote:
Originally Posted by DSpider View Post
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.
dasboeh is offline   Reply With Quote
Old 12-12-2012, 03:14 AM   #4
DSpider
Evangelist
DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.
 
DSpider's Avatar
 
Posts: 413
Karma: 326969
Join Date: Nov 2009
Location: Romania
Device: iPod touch 2G (16 GB)
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.
DSpider is offline   Reply With Quote
Old 12-12-2012, 04:26 AM   #5
Doitsu
Wizard
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 1,939
Karma: 4633610
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by DSpider View Post
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.

Last edited by Doitsu; 12-12-2012 at 04:32 AM.
Doitsu is offline   Reply With Quote
Old 12-12-2012, 03:55 PM   #6
AlPe
Digital Amanuensis
AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.
 
AlPe's Avatar
 
Posts: 594
Karma: 1281565
Join Date: Dec 2011
Location: Padova, Italy
Device: Kindle3, Odyssey, eDGe, A60, PRS-T1, iPad3, KoboGlo
If you are working on a EPUB 3 eBook, CSS (3) property border-radius should be supported.
AlPe is offline   Reply With Quote
Old 12-12-2012, 10:14 PM   #7
Aerys
Connoisseur
Aerys is faster than slow light.Aerys is faster than slow light.Aerys is faster than slow light.Aerys is faster than slow light.Aerys is faster than slow light.Aerys is faster than slow light.Aerys is faster than slow light.Aerys is faster than slow light.Aerys is faster than slow light.Aerys is faster than slow light.Aerys is faster than slow light.
 
Aerys's Avatar
 
Posts: 51
Karma: 29994
Join Date: Nov 2011
Location: Manila, Philippines
Device: iPad 2 & Nexus 7
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.
Aerys is offline   Reply With Quote
Old 12-14-2012, 02:28 AM   #8
dasboeh
Junior Member
dasboeh is on a distinguished road
 
Posts: 9
Karma: 50
Join Date: Oct 2009
Device: Bokeen Cybook Opus; Sony PRS-300; Amazon Kindle 3rd
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
dasboeh is offline   Reply With Quote
Old 12-19-2012, 05:08 PM   #9
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 277
Karma: 556004
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
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.

Last edited by dgatwood; 12-22-2012 at 01:02 PM.
dgatwood is offline   Reply With Quote
Old 12-21-2012, 01:15 PM   #10
Agama
Guru
Agama ought to be getting tired of karma fortunes by now.Agama ought to be getting tired of karma fortunes by now.Agama ought to be getting tired of karma fortunes by now.Agama ought to be getting tired of karma fortunes by now.Agama ought to be getting tired of karma fortunes by now.Agama ought to be getting tired of karma fortunes by now.Agama ought to be getting tired of karma fortunes by now.Agama ought to be getting tired of karma fortunes by now.Agama ought to be getting tired of karma fortunes by now.Agama ought to be getting tired of karma fortunes by now.Agama ought to be getting tired of karma fortunes by now.
 
Agama's Avatar
 
Posts: 651
Karma: 436517
Join Date: Jul 2010
Location: UK
Device: PRS-300, PW2
Quote:
Originally Posted by dasboeh View Post
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.
Agama is offline   Reply With Quote
Reply

Tags
ade, calibre, css

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Paragraph breaks when removing margins Canorka Conversion 3 03-30-2012 02:00 AM
Image height in div soparch ePub 5 03-29-2012 01:18 PM
Image margins marcelo2605 ePub 10 05-21-2011 01:16 PM
image and white margins Copycat Sigil 5 04-15-2011 05:10 AM
Adding page breaks in Calibre breaks ePubcheck validation bookraft Conversion 16 03-01-2011 01:23 PM


All times are GMT -4. The time now is 08:27 AM.


MobileRead.com is a privately owned, operated and funded community.