More Margin Questions

[enuddleyarbl]

Looking at the Calibre Editor's "Live CSS" panel for a book I was recently editing, I couldn't figure out why no margin-bottom was being set. I moved up through my various CSS styles all the way to those for the basic paragraph (<p>). Apparently, back at the dawn of time, I forgot to put a unit (em) on margin-bottom for my standard paragraph formatting:

p {
/* Basic paragraph styling */
	display: block;
	margin-top: 0;
	margin-bottom: 1; <-- note the lack of unit
	text-indent: 1.2em;

Several questions:

- First, is there a default unit? I saw one post where someone claimed that the default unit is px. But, I can't find anything official. If that's true, that would imply I'd set my default paragraph bottom margin to 1px (essentially, zero). But, it's odd that margin-bottom didn't show up in the Live CSS panel.

- If there's no default unit, do the various readers just throw up their hands and say there's no defined bottom margin? Do they then default to some default bottom margin amount? Or do they just say it's undefined?

I ask the above because I didn't notice the problem for a long time since most of the time it all looked fine. I noticed differences between the Calibre Editor's preview pane, the Calibre Viewer and my Kobo Forma, but I chalked them up to the viewers just being different.

- I severely doubt this, but is there some easy way to change that single line of my CSS stylesheets across all my books?

- On a more theoretical side, should I specify margins like this down through lower level classes? For instance, I have div classes for things like notes, letters, poems and songs. Unless I had a pressing need for individual paragraphs space differently, I didn't specify anything for top/bottom margin. That way, if I changed the margins in the base paragraph it would (I assume) trickle down to lower level paragraphs. But, maybe I should force the styling in each class?

- And, since this has been bothering me for a while, is it "better" to have paragraph top and bottom margins like I theoretically did (all the margin at the bottom) or to split that same margin evenly across both top and bottom margins (i.e., instead of 0/1, should it be 0.5/0.5?)?

[JSWolf]

If you are doing this on eBooks you plan to sell, you may want to not have paragraph spaces. Paragraph spaces can make it harder for some to read and 1em is rather large.

Here is what I put in and it works very well for <p>Some text.</p> It does not create paragraph spaces.

body {
  widows: 1;
  orphans: 1;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: justify;
}
p {
  margin-top: 0;
  margin-bottom: 0;
  text-indent: 1.2em;
}

If you are doing this for yourself, you may want to try a smaller bottom-margin such as 0.3em instead of 1em.

[Quoth]

Usually only special paragraphs have top, bottom or both margins non zero and usually not the same. The first paragraph/header style after a pagebreak might have the margin-top ignored and only padding-top rendered.

Only put 0 without units.

1px may not render as 1 physical pixel. Look up CSS /HTML rules to see why.
px are best only used with images.
Everything else should be em, but decent renderers will properly render pt using 12pt = 1em exactly.

% may be used with image width or height (not both and other set to auto), but it's not always % of screen (width or height), but may be the enclosing container (see how CSS/HTML works).

A body paragraph after a scene break with no print element might have no indent if first and a top margin. Never add blank lines, tabs or extra spaces to space elements.

Often there is no space between body paragraphs except in kids books or verses, and a first line indent. A zero first line indent on all centred paragraphs and first paragraph after a centred item. A list paragraph/item might have a larger left margin and a -1em to -1.5em first line indent. Right flushed text (Marginalia, Attributions etc) will have a zero first line indent and zero left margin, the right margin will be zero or whatever the right margin of last paragraph before was.

[Quoth]

Also note 0 should not be used with widows or orphans. 1 means don't do it and 2 or more sets it. Some people don't like the extra space at the bottom of a page that can occur with a setting of 2 or more, but others find an orphaned or widowed line of a paragraph awkward. Certainly it's a bigger issue on 6" and smaller screens.

[Turtle91]

Originally Posted by enuddleyarbl

Several questions:

- First, is there a default unit?

Not that I'm aware of... as a math guy you should ALWAYS specify your units (unless it is zero - zero is zero no matter the unit) Don't rely on some dubious default that can, and will, differ between devices/apps.

Originally Posted by enuddleyarbl

- If there's no default unit, do the various readers just throw up their hands and say there's no defined bottom margin? Do they then default to some default bottom margin amount? Or do they just say it's undefined?

Readers are supposed to degrade elegantly when it runs across css errors. What that means in practice depends on how lazy the programmer is...some readers ignore the entire css sheet if there is a single error, others just ignore that element. Still others flat out ignore any css sheet at all, regardless, and use their own styles...

Originally Posted by enuddleyarbl

- I severely doubt this, but is there some easy way to change that single line of my CSS stylesheets across all my books?

"Easy" is a strange term. You can use GREP to search multiple epubs in a directory.... but there will be a decent learning curve if you don't GREP often. Here is a quick example...there are other programs that might make this easier, such as PowerGREP. Here's a video tutorial for Linux & Unix...might give you ideas for other OS's

Originally Posted by enuddleyarbl

- On a more theoretical side, should I specify margins like this down through lower level classes?

As mentioned above, you should leave all standard paragraphs alone, with no indent or margin. The user can set these to their liking on their own device. For special paragraphs/divs/blocks/tables/etc. I would put the margins/indents/font-size/font-family/etc. to your liking.

Originally Posted by enuddleyarbl

- And, since this has been bothering me for a while, is it "better" to have paragraph top and bottom margins like I theoretically did (all the margin at the bottom) or to split that same margin evenly across both top and bottom margins (i.e., instead of 0/1, should it be 0.5/0.5?)?

Leave it undefined and let the user determine paragraph spacing and/or indent. In general, for my own books, I would only put spacing on the p/div that needs it, rather than split them.

I see books that put a large bottom margin on the paragraph before something special, and then a large top margin on the paragraph following the special item. That is a huge waste of effort... just imagine putting special classes on 3 paragraphs instead of just one... Put a top and bottom margin on just the special item.

[Turtle91]

Originally Posted by Quoth

Also note 0 should not be used with widows or orphans. 1 means don't do it and 2 or more sets it. Some people don't like the extra space at the bottom of a page that can occur with a setting of 2 or more, but others find an orphaned or widowed line of a paragraph awkward. Certainly it's a bigger issue on 6" and smaller screens.

I also get yelled at by ePubCheck if I use widows/orphans on an ePub3....I ignore ePubCheck at that point, but it makes me think that they are no longer supported in ePub3.

[JSWolf]

delete post

[enuddleyarbl]

Originally Posted by Turtle91

I also get yelled at by ePubCheck if I use widows/orphans on an ePub3....I ignore ePubCheck at that point, but it makes me think that they are no longer supported in ePub3.

ePubCheck doesn't yell at me about Widows/Orphans set to 1 in my epub3 books. I assume you mean you're setting it to more than 1 and that's what it's complaining about?

Regarding your "don't set indent/margins" in standard paragraphs, my Kobo Forma has controls for only font, font size, line spacing, margins and justification. So, I strip anything out of the epub for those. But, I don't think line spacing is the same as paragraph spacing, and there's no control for indentation. If I don't set a standard paragraph top/bottom margin and don't set a paragraph indent, won't the paragraphs all run together into a solid wall of text?

[enuddleyarbl]

I also found mention of the "lobotomized owl selector" from way back in 2014 that looks like a neat alternative to changing the top/bottom margins in the <p> class:

https://alistapart.com/article/axiom...otomized-owls/

I haven't seen anything yet indicating that's been OOBE, so I might look into moving my margin change out of <p> and into:

* + * {
	margin-top: 1em;
}

I don't know if 1em is too big or not (ala JSWolfe), but I guess that construct would make it easier to experiment with different sizes.

[enuddleyarbl]

Originally Posted by enuddleyarbl

...Regarding your "don't set indent/margins" in standard paragraphs, my Kobo Forma has controls for only font, font size, line spacing, margins and justification. So, I strip anything out of the epub for those. But, I don't think line spacing is the same as paragraph spacing, and there's no control for indentation. If I don't set a standard paragraph top/bottom margin and don't set a paragraph indent, won't the paragraphs all run together into a solid wall of text?

OTOH, since I effectively had set both top and bottom margin to 0 with my boo-boo up above, maybe the ereaders are smart enough to differentiate between a paragraph and a line on their own and that's what I've actually been seeing.

[JSWolf]

Originally Posted by enuddleyarbl

I also found mention of the "lobotomized owl selector" from way back in 2014 that looks like a neat alternative to changing the top/bottom margins in the <p> class:

https://alistapart.com/article/axiom...otomized-owls/

I haven't seen anything yet indicating that's been OOBE, so I might look into moving my margin change out of <p> and into:

* + * {
	margin-top: 1em;
}

I don't know if 1em is too big or not (ala JSWolfe), but I guess that construct would make it easier to experiment with different sizes.

Don't bother with the owl. It may not work as it's not standard ePub code.

[Quoth]

I remove line-height entirely during conversions.

Also I agree, best to have 0 top & bottom on body text and only top & bottom on any special paragraph, such as a scene break, preamble, marginalia, headings, maybe list items, etc.

[enuddleyarbl]

On the book I'm currently messing with, I added in that owl selector with a 0.6 top margin:

* + *	{
  /* Lobotomized Owl Selector - what to do any time two objects follow each other - limit to margin-top */
  margin-top:	0.6em;
}

and pulled out all my bottom- and top- margins elsewhere. It worked without problem.

In the Calibre editor viewer, I could see the changes to object spacing as I changed the top margin value. Unfortunately, on my Forma, I have to connect/copy/disconnect/open before I can see changes. So, nothing any different really leaped out at me one way or another.

I also removed my top and bottom margin settings in all but my special cases and looked at that. In the Calibre editor preview (i.e., realtime changes), it looks fine without any t/b margins set. Though, the paragraph spacing looks like it might be a bit bigger than what I'd previously had it manually set for. On my Forma, it also looks fine. And, similarly, the paragraph spacing looks like it might be bigger than I had before (my Forma's line-spacing is set all the way down to 0).

Based on the above, I'd probably agree with everyone here and just remove the top/bottom margins from everywhere in my CSS except where I specifically want some different spacing. But, I think I might keep that owl construct in there and play with it some more. Without the top/bottom margin settings, the default spacing seems a tad big for me. I might just use the owl to make it smaller all around.

[enuddleyarbl]

I've been playing around some more with changing the spacing between objects using that owl construct. I don't know if I'm seeing things (or going blind), but it looks to me that increasing the margin shows up noticeably in the ereader viewers. But, decreasing it below 1em doesn't seem to do much. I'm wondering if these ereader viewers have floors on their paragraph margins built in.

[JSWolf]

Originally Posted by Quoth

I remove line-height entirely during conversions.

Also I agree, best to have 0 top & bottom on body text and only top & bottom on any special paragraph, such as a scene break, preamble, marginalia, headings, maybe list items, etc.

If you are doing a scenebreak that's just blank space, don't use margins. Use padding as margins can get lost at the top/bottom of the screen and the padding does not get lost.

padding-top: 2em;