Headings have default margins of 0.67em. Why?

[Phlawm53]

By default, for all heading styles ("Hn"), Flare 7 / 8 assigns a "ghost" value of 0.67em. Why and where is this coming from?

In the CSS, the margin for body is set to 0.

Code: Select all

body
{
	margin: 0em;
	font-family: Garamond;
	font-size: 1.0em;
	mc-hyphenate: never;
}

And my heading styles do not explicitly specify any margin values:

Code: Select all

h1, h2, h3,h4, h5, h6
{
  color: #336699;
	font-weight: bold;
	font-family: Verdana;
	page-break-before: avoid;
}

But per the following screenshot, each and every new Flare project assigns all headings, for all Mediums, a "ghost" default margin of .67em.

Flare8DefaultHnMargins.png

I call these values "ghost" margins because they are nowhere to be found in the CSS, either as margin or 67.em. And the only way I can suppress their appearance is to explicitly define margin: 0 for my grouped Hn selectors.

Does anybody have any idea where these "ghost" margins are coming from? I'd just as soon not have them; or need to manually make them go away every time I create a new Flare project…

Cheers & thanks,
Riley
SFO

[LTinker68]

They could either be the W3C's recommended value for the heading tags or they could be coming from one of the Flare-generated stylesheets. I'm more inclined to think it's the W3C's recommendation, so to override it you'd have to explicitly set a value. And if it is the W3C's recommended value, then that may or may not be the value that the browsers use, since the browser manufacturers decide which of the recommendations they implement.

[Phlawm53]

Lisa: Thanks as always.

However, I explored this a bit more and found that in a default unedited instance of Flare 7/8 basic.css, all heading styles by default receive "ghost" margins, BUT the values differ in an illogical way. As such, I don't at this point believe they're conforming to a standard.

Here's a list of the 6 heading styles and their "ghost" margin values:

Code: Select all

Heading 1
 margin: .67em 0;   margin-top: .67em;   margin-right: 0em;   margin-bottom: .67em;   margin-left: 0em;

Heading 2
margin: .75em 0;   margin-top: .75em;   margin-right: 0em;   margin-bottom: .75em;   margin-left: 0em;

Heading 3
margin: .83em 0;   margin-top: .83em;   margin-right: 0em;   margin-bottom: .83em;   margin-left: 0em;

Heading 4
margin: 1.12em 0;  margin-top: 1.12em;  margin-right: 0em;   margin-bottom: 1.12em;  margin-left: 0em;

Heading 5
margin: 1.5em 0;   margin-top: 1.5em;   margin-right: 0em;   margin-bottom: 1.5em;   margin-left: 0em;

Heading 6
margin: 1.67em 0;  margin-top: 1.67em;  margin-right: 0em;   margin-bottom: 1.67em;  margin-left: 0em;

I'm goint to submit a bug to Madcap that requests that they either (a) make these things go away, or (b) document their existence and explain the reasoning behind their values.

Cheers, thanks 'gain, & to be continued,
Riley
SFO

[LTinker68]

... BUT the values differ in an illogical way.

I'm not positive about this, but it might be that it looks illogical because the values appear to increase, but I think it's because 1) they're using relative units of measure (ems) instead of fixed units (px), and 2) the headings inherit from the heading one level up. For example, h2 inherits from h1, h3 inherits from h2, etc. (I think) If h2 had been set to 1.0em, then the margin-bottom for h2 would have been equal to the margin-bottom for h1, but generally the margin-bottom value decreases as you go down the headings. If you were using fixed values then it might be h1=16px, h2=14px, h3=12px, and so on. When you're using relative units of measure, you have to be a bit tricky, because .83em for h3 isn't .83em relative to the body tag, it's .83em relative to the h2 tag which is .75em relative to the h1 tag, which is .67em relative to the body tag. I think that's why it's set up that way. Things seem kind of bassackwards when you're dealing with relative sizes. If you think of the ems as percentages (.67em=67%) and remember that values cascade down, then it's a bit easier, but you really have to know the structure of your content and how things cascade.

All that said, I agree that those ghost values shouldn't appear in the Stylesheet Editor -- I think it should only show what's actually been set in the stylesheet file, or what's inherited within the stylesheet file. For example, p.note could show the margin-bottom value of the base <p> tag if it's inheriting that value, although I'd still prefer it to say something like Inheriting (8px) where 8px is the value set on the base <p> tag, or better yet, Inheriting from <p>.

[NorthEast]

and 2) the headings inherit from the heading one level up. For example, h2 inherits from h1, h3 inherits from h2, etc.

Nope, heading levels don't inherit any properties from each other.


I think the 'ghost' properties are just trying to represent the default properties used by most browsers.
These 'ghost' styles don't actually exist in your output stylesheet or Flare's generated output stylesheet (MadCap.css).

It's also worth noting some other default properties you see in the editor do exist in Flare's ouput stylesheet (MadCap.css), but these tend to be default properties just for MadCap|... styles.


I agree the whole thing is confusing; the hide inherited option in the stylesheet editor hides styles that aren't in your stylesheet, but there should also be a way to hide the properties that aren't in your stylesheet.

[LTinker68]

Nope, heading levels don't inherit any properties from each other.

I wondered about that even as I was typing it because they're not children of each other but they're kind of a related in a way. I was too lazy to go to W3C.org to review their inheritance, or lack thereof.

[Phlawm53]

Thanks to all who have responded so far.

I agree the whole thing is confusing; the hide inherited option in the stylesheet editor hides styles that aren't in your stylesheet, but there should also be a way to hide the properties that aren't in your stylesheet.

Pretty much every Flare user must at some point troubleshoot a project's layout and output. When I'm doing that, the unexplained appearance of "weird" and wholly undocumented values in the Stylesheet Editor is not helpful: "I never entered those values. Are *they* what's messing up my vertical spacing / pagination / what have you?"

The second part of that is the construction of the margin: property as NNem 0, where NN is one of the "ghost" h1-h6 values I enumerated in an earlier post. At a minimum, the extra 0 at the end of the statement doesn't add clarity: Is it meant to specify the right-left margins in a two-value pair? (http://www.htmldog.com/reference/cssproperties/margin/) In any event, it's not a helpful discovery if I happen to have opened the Stylesheet Editor to manage a given project's output via CSS…(?)

To repeat myself a bit, I have carefully documented this question / issue and submitted is to Madcap as a bug. The essence of the bug submission is that "ghost" margins should go away; or barring that, be explained in the product documentation.

I'll note in closing that the four default complex selectors ol ol, ol ul, ul ol, and ul ul also come with "ghost" margins. These are seemingly even more irrational in that ol ol and ul ol mix em and px units. I didn't include these in my bug report, but will communicate them to Madcap when I get a case number…

Cheers & thanks 'gain to all,
Riley
SFO

[crdmerge]

I'll probably be sorry I jumped into this, but...

I ran a search for "0.67" in every CSS file under this Program Folder:

C:\Program Files\MadCap Software\MadCap Flare V8

The only instance I found was in Flare.app\Resources\English\Templates\Projects\Sample Book.flprj\Content\Resources\Stylesheets\Styles.css

This was the element and its attributes:

p
{
font-size: 12.0pt;
margin-top: 0.67em;
margin-bottom: 0.67em;
}

For "0.75" I got caption, h2, and h3
For "0.83" I got nothing
For "1.12" I got p.Question, hr { /* MadCap */, etc. (these seem like either print styles or styles for TOC, Index, etc.)

As to basic.css, there are several instances of the file, but all within the TableStyles folders.

Soooooooo............where did the styles you're talking about come from? Perhaps an imported Word document, another help project (not necessarily a Flare project), etc.?


Good luck,
Leon

[Phlawm53]

@Leon:

I believe you've identified the source of these "ghost" margins. That is, they appear to be some "assumptions" on the part of Flare about default margin values.

…where did the styles you're talking about come from?…

Here are the steps one can perform to see some "ghost" margins (you can easily remove the example stylesheet from the project at the end of this procedure):

1. In an existing Flare project, add an unedited instance of basic.css to the project.

In the Flare 8 ribbon, click Project —> New —> Stylesheet to display the Add File dialog, then in the File Name text entry area type Default Basic Stylesheet. (If you're using a different version of Flare, or aren't using the Flare 8 Ribbon, the essential idea is the same: add a "clean" instance of basic.css to a Flare project…)

Flare displays the unedited stylesheet in the Stylesheet editor.

2. In the Stylesheet Editor, select h1, then in the Properties area click Box to view the h1 selector's "ghost" margins. See my original post for a screenshot of the h1 selector…

You can do the same thing for any of the heading styles; or the complex list selectors I enumerated in an earlier comment. (In Content Explorer —> Resources —> Stylesheets, right-click the example stylesheet and choose Delete to send the stylesheet file to the recycling bin.)

A key point is that a new, unedited instance of basic.css isn't getting values from, say, an imported Word document or the like…

Cheers & thanks,
Riley
SFO

[crdmerge]

Yuck! Who knew?

All the more reason to create your own (we had already done that in RoboHelp, and it carried over to the Flare conversion). That's why it all looked unfamiliar!

Flare's got some 'splaining to do!


Leon

[Phlawm53]

FYI:

Thank you for contacting MadCap Technical Support.

The margin values along with all other non-MadCap CSS values are inherited from the recommended CSS2.1 stylesheet for HTML4, which XHTML is built upon and Flare utilizes in its output.

You can view the full default stylesheet here:
http://www.w3.org/TR/CSS21/sample.html

I've put in a request to our documentation team to note where these defaults are being sourced from.

So now we know…

Cheers & thanks 'gain to all,
Riley
SFO