12-11-2012, 07:02 AM | #1 |
Junior Member
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> 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; } 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 |
12-11-2012, 08:10 AM | #2 |
Evangelist
Posts: 450
Karma: 343115
Join Date: Nov 2009
Location: Romania
Device: PW2 2014
|
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. |
12-12-2012, 02:12 AM | #3 | |
Junior Member
Posts: 9
Karma: 50
Join Date: Oct 2009
Device: Bokeen Cybook Opus; Sony PRS-300; Amazon Kindle 3rd
|
Quote:
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. |
|
12-12-2012, 03:14 AM | #4 |
Evangelist
Posts: 450
Karma: 343115
Join Date: Nov 2009
Location: Romania
Device: PW2 2014
|
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.
|
12-12-2012, 04:26 AM | #5 | |
Grand Sorcerer
Posts: 5,584
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
Quote:
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. |
|
12-12-2012, 03:55 PM | #6 |
Digital Amanuensis
Posts: 727
Karma: 1446357
Join Date: Dec 2011
Location: Turin, Italy
Device: Several eReaders and tablets
|
If you are working on a EPUB 3 eBook, CSS (3) property border-radius should be supported.
|
12-12-2012, 10:14 PM | #7 |
Connoisseur
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. |
12-14-2012, 02:28 AM | #8 |
Junior Member
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 |
12-19-2012, 05:08 PM | #9 |
Curmudgeon
Posts: 629
Karma: 1623086
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. |
12-21-2012, 01:15 PM | #10 |
Guru
Posts: 776
Karma: 2751519
Join Date: Jul 2010
Location: UK
Device: PW2, Nexus7
|
|
Tags |
ade, calibre, css |
|
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 |