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

Go Back   MobileRead Forums > E-Book Software > Calibre > Conversion

Notices

Reply
 
Thread Tools Search this Thread
Old 02-15-2011, 07:03 PM   #1
cybmole
Wizard
cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.
 
Posts: 3,720
Karma: 1759970
Join Date: Sep 2010
Device: none
margin top, bottom, additive or not ?

I am a little puzzled as to how these margin top, margin bottom values work, when set in CSS

I have experimented with altering definitons for the calibre css that applies to p tags ( in sigil) & then viewing the results in calibre viewer

i find that non=zero values generate blank lines as per the table below (values in ems)

top = 0, bottom = 0 : no blank lines
top = 1, bottom = 0 : 1 blank line
top = 0, bottom = 1 : 1 blank line

all that makes sense

then comes top= 1, bottom= 1 - I expect to see 2 blank lines but I only see 1 ???

continuing top =n>1, bottom = 0: n blank lines OK

I've not done top=n, bottom=m (n,m>1) to see if I get n+m blanks, or something different. I would have expected n+m blanks but the 1+1 result has thrown me

it is only the 1+1 that is an apparent anomaly

what am I not understanding correctly here please ?

PS I forgot , in this test, to check what happens when both margin top & margin bottom explicit definitions are both removed - I think from past experience that causes p tags to default to just 1 blank line - above or below - not sure which ?

once I get this straight in my mind, I'm thinking of having some global extra css code to hand ( for my default preferences) that lets me easily flip between the various look n feel options currently begin debated & polled elsewhere i.e. indent + no blanks, indent+ blanks, no indent + blanks.

the existing calibre options do some of that already, but not all of it.

AM I right in thinking that can all be done with calibre overrides rather than having to open book & edit CSS ? if so, than I guess this is headint toward suggesting an enhancement to C. look n feel options - where you tick one of 3 ( or more ) predetermined layout styles ( indent + blanks settings) and the book is converted to that presentation for you.

Ultimately it could be a buttom on the e-reader device that enables this. (Kindle already has line spacing, font spacing & words per line user settings )
cybmole is offline   Reply With Quote
Old 02-15-2011, 08:07 PM   #2
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,703
Karma: 54369092
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
Quote:
Originally Posted by cybmole View Post
I am a little puzzled as to how these margin top, margin bottom values work, when set in CSS

I have experimented with altering definitons for the calibre css that applies to p tags ( in sigil) & then viewing the results in calibre viewer

i find that non=zero values generate blank lines as per the table below (values in ems)

top = 0, bottom = 0 : no blank lines
top = 1, bottom = 0 : 1 blank line
top = 0, bottom = 1 : 1 blank line

all that makes sense

then comes top= 1, bottom= 1 - I expect to see 2 blank lines but I only see 1 ???

continuing top =n>1, bottom = 0: n blank lines OK

I've not done top=n, bottom=m (n,m>1) to see if I get n+m blanks, or something different. I would have expected n+m blanks but the 1+1 result has thrown me

it is only the 1+1 that is an apparent anomaly

what am I not understanding correctly here please ?

PS I forgot , in this test, to check what happens when both margin top & margin bottom explicit definitions are both removed - I think from past experience that causes p tags to default to just 1 blank line - above or below - not sure which ?

once I get this straight in my mind, I'm thinking of having some global extra css code to hand ( for my default preferences) that lets me easily flip between the various look n feel options currently begin debated & polled elsewhere i.e. indent + no blanks, indent+ blanks, no indent + blanks.

the existing calibre options do some of that already, but not all of it.

AM I right in thinking that can all be done with calibre overrides rather than having to open book & edit CSS ? if so, than I guess this is headint toward suggesting an enhancement to C. look n feel options - where you tick one of 3 ( or more ) predetermined layout styles ( indent + blanks settings) and the book is converted to that presentation for you.

Ultimately it could be a buttom on the e-reader device that enables this. (Kindle already has line spacing, font spacing & words per line user settings )
No 0 values need UNITS. I use EM, which scales with Zoom (at least, within EPUB)

They are adjacent ('boxes', in the box model): Bottom: 1em (para#1), top: 1em (para#2) get added for a total of 2em between paras 1 and 2.
You play 'stack the blocks'
Link to w3schools box model
http://www.w3schools.com/css/css_boxmodel.asp
theducks is offline   Reply With Quote
Old 02-15-2011, 08:31 PM   #3
DMSmillie
Enquiring Mind
DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'
 
DMSmillie's Avatar
 
Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
The "stack the blocks" concept works for the different sections of a "block" - margin, border, padding. However in CSS2, the default behaviour is for the vertical margins of "blocks" that adjoin each other (e.g. two paragraphs, one after the other) to "collapse" together, resulting in a shared margin which is equal in size to whichever individual margin is larger, rather than adding the two margins together.

So if the top paragraph has "margin-bottom:2em" and the bottom paragraph has "margin-top:1em", the result would be a 2em space between the paragraphs, not a 3em space.

(For a detailed description of this behaviour, in all its glory and with all the technicalese and minutiae and exceptions see http://www.w3.org/TR/CSS21/box.html#collapsing-margins).
DMSmillie is offline   Reply With Quote
Old 02-16-2011, 02:13 AM   #4
cybmole
Wizard
cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.cybmole ought to be getting tired of karma fortunes by now.
 
Posts: 3,720
Karma: 1759970
Join Date: Sep 2010
Device: none
Quote:
Originally Posted by DMSmillie View Post
The "stack the blocks" concept works for the different sections of a "block" - margin, border, padding. However in CSS2, the default behaviour is for the vertical margins of "blocks" that adjoin each other (e.g. two paragraphs, one after the other) to "collapse" together, resulting in a shared margin which is equal in size to whichever individual margin is larger, rather than adding the two margins together.

So if the top paragraph has "margin-bottom:2em" and the bottom paragraph has "margin-top:1em", the result would be a 2em space between the paragraphs, not a 3em space.

(For a detailed description of this behaviour, in all its glory and with all the technicalese and minutiae and exceptions see http://www.w3.org/TR/CSS21/box.html#collapsing-margins).
OK thanks. I wonder why some sources have top & bottom both set to 1em then - maybe the authors did not know the above ?

so , from your explanation, e.g. top = 2 em bottom = 3em leads to a total margin of 3em, not 5em
- but is that positioned above the text or below ? ( i tried reading your link but it was too early in th morning to face off of that detail :-)
cybmole is offline   Reply With Quote
Old 02-16-2011, 06:13 AM   #5
DMSmillie
Enquiring Mind
DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'
 
DMSmillie's Avatar
 
Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
Heh! I really don't blame you for putting off wading through the technical spec - it's the kind of thing you only want to tackle if you really really have to.

I've attached a JPG showing a diagram of how the margin-collapse property works, which might make it a bit clearer. The image is in three sections. The first section shows the margins set up in the CSS stylesheet for H1, H2 and P. The second section shows how these margins interact when these elements are next to each other in the HTML code, using the default setting for margin-collapse (which is to have adjoining vertical margins collapse together). The third section, simply for illustration, shows how the margins would interact if you were to set the margin-collapse property to "none" - the margins interact cumulatively rather than collapsing together. (However I haven't a clue if e-readers pay any attention to the margin-collapse property if it's set to "none" CSS stylesheet - this is simply illustrating how things would work if they did).

"I wonder why some sources have top & bottom both set to 1em then...?"

With "margin-collapse" functioning on its default setting, your top and bottom margin settings can be considered "minimum desired" values. So if you always want a blank line before or after a standard paragraph of text, you could set both margin-top and margin-bottom to 1em (or whatever value you are using for the default separation between paragraphs), knowing that it won't result in a double size space between paragraphs - the margin at the bottom of one paragraph will collapse into the margin at the top of the following paragraph, leaving just the desired single line of space between them.

Edit to add: At least, that's how it will work if the device or application interpreting the CSS is doing it properly! (end of edit)

Hope that all made some sort of sense!
Attached Thumbnails
Click image for larger version

Name:	css-margin-collapse.jpg
Views:	893
Size:	68.7 KB
ID:	66771  

Last edited by DMSmillie; 02-16-2011 at 06:15 AM.
DMSmillie is offline   Reply With Quote
Old 02-16-2011, 12:33 PM   #6
DMSmillie
Enquiring Mind
DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'
 
DMSmillie's Avatar
 
Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
Just an additional comment on what I wrote above about CSS margins and the "margin-collapse" default.

In ebook terms, this will only apply to EPUB based ebooks.

Because the MOBI format doesn't actually use CSS internally, but instead, for vertical margins, uses a proprietary "height" attribute which sets a top margin, you do need to think about how the margins will interact between one element and the next. The overall result from the conversion from CSS to "MOBI HTML" could result in margins being added to each other, with over-large gaps between text elements as a result. So if you intend to convert your HTML or EPUB to MOBI format, you need to think a bit more about how you set your margins, so that you don't end up with bigger gaps between some elements than you intended.

For example, Kindlegen will translate the following HTML:
Code:
<p style="margin-top: 12px; margin-bottom: 12px">Paragraph text here.</p>
<p style="margin-top: 12px; margin-bottom: 12px">Paragraph text here.</p>
into:
Code:
<p height="12">Paragraph text here.</p>
<div height="12"></div>
<p height="12">Paragraph text here.</p>
<div height="12"></div>
The result of which will be a double height margin between the two paragraphs. An EPUB using the original HTML code, on the other hand, is most likely to collapse the vertical margins between the two paragraphs, leaving a single height blank space.
DMSmillie is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; } cybmole Conversion 15 02-12-2011 11:57 AM
anyway to change Kindle top/bottom margin? cdpango Kindle Developer's Corner 2 11-28-2010 08:20 PM
little issue converting from odt to epub (top and bottom margin) superanima Calibre 1 02-15-2010 04:15 PM
Can't get rid of bottom margin in epubs ShellShock Sony Reader 3 02-11-2010 04:15 PM
calibre ignore margin-top and margin-bottom bender Calibre 2 12-11-2009 06:58 AM


All times are GMT -4. The time now is 10:02 AM.


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