<body>, stylesheet views, and font relationships

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
tbean
Propeller Head
Posts: 48
Joined: Wed Jan 16, 2008 1:59 pm
Location: SE Pennsylvania

<body>, stylesheet views, and font relationships

Post by tbean »

I keep tripping up on styles. For some reason, I'm having difficulty understanding how Flare defines and uses styles, and how the properties defined in one style relate to properties defined (or not defined) in other styles.

Here are a few questions for all you learned Flarers --

#1 -- In order to see a pristine "Styles.css", I created a new project and opened the Stylesheet Editor. In the Simplified View, the font-family column for body is blank. In the Advanced View, font-family for body is defined as Arial. Why don't I see "Arial" for body in the Simplified View? I can see how a "simplified" view would contain less information, but wouldn't that mean it would display fewer columns, rather than displaying columns but no values?

#2 -- My understanding about the relationships between style definitions and various tags includes these shaky beliefs:
-- the style properties that are closest to an element "win"
-- a property defined in the parent element(s) is (usually) inherited by the child elements
-- "body" is the biggest container element in a topic file (not counting <html>) and all the content in the topic is within elements that are children of <body>

So: does this mean that if I set font-family for body to be "Tahoma" and font-size to be 9 pt, then I only need to set a font-family or size elsewhere when I need it stray from that?

#3 -- If I want to use a relative font sizing -- such as ems -- in various styles, do I first need to establish an absolute size for body? If you don't establish an absolute size for body, then what are the relative sizes basing themselves on? I notice that when I select font-size for body in the Advanced View, the help box (what is it really called?) at the bottom of the Stylesheet Editor includes this: "default: 12 pt". Does that mean that if font-size is left blank, that it will default to 12 pt? (that certainly seems to make sense, but ... ) Is 12 pt an HTML, XML, CSS, or MadCap standard?

#4 -- What is the difference between font and font-family? Why should I use one as opposed to the other?

Thanks for rescuing me from my state of muddlement,
Tracey
Tracey
SteveS
Senior Propellus Maximus
Posts: 2087
Joined: Tue Mar 07, 2006 5:06 pm
Location: Adelaide, far side of the world ( 34°56'0.78\"S 138°46'44.28\"E).
Contact:

Re: <body>, stylesheet views, and font relationships

Post by SteveS »

tbean wrote: #1 -- In order to see a pristine "Styles.css", I created a new project and opened the Stylesheet Editor. In the Simplified View, the font-family column for body is blank. In the Advanced View, font-family for body is defined as Arial. Why don't I see "Arial" for body in the Simplified View? I can see how a "simplified" view would contain less information, but wouldn't that mean it would display fewer columns, rather than displaying columns but no values?
Not sure why you are seeing Arial when you haven't set a font - my guess it's a bug because its showing the "first" font. I don't have Flare available so I can't check at the moment. If you open your pristine style sheet in a text editor you can check to see if the font is being set.
tbean wrote:#2 -- My understanding about the relationships between style definitions and various tags includes these shaky beliefs:
-- the style properties that are closest to an element "win"
-- a property defined in the parent element(s) is (usually) inherited by the child elements
-- "body" is the biggest container element in a topic file (not counting <html>) and all the content in the topic is within elements that are children of <body>

So: does this mean that if I set font-family for body to be "Tahoma" and font-size to be 9 pt, then I only need to set a font-family or size elsewhere when I need it stray from that?
Bascially correct. Cascading style sheet is a descriptive name! When you set a style it remains in effect until the style is ovwerwritten. Body is the element in a html document where you put the content.
tbean wrote:#3 -- If I want to use a relative font sizing -- such as ems -- in various styles, do I first need to establish an absolute size for body? If you don't establish an absolute size for body, then what are the relative sizes basing themselves on? I notice that when I select font-size for body in the Advanced View, the help box (what is it really called?) at the bottom of the Stylesheet Editor includes this: "default: 12 pt". Does that mean that if font-size is left blank, that it will default to 12 pt? (that certainly seems to make sense, but ... ) Is 12 pt an HTML, XML, CSS, or MadCap standard?
I'm not sure what print will default to if you don't set a font size, but online will default to your browser's inbuilt style sheet. The easiest way (I find) to use proportionate font sizes is to set my default font size in the body (as you suggest) and then apply the proportioning when declaring the individual styles (eg for H1 I use 2 ems).
tbean wrote:#4 -- What is the difference between font and font-family? Why should I use one as opposed to the other?
When you specify the font you are saying "use this font". If the users PC doesn't have that font it has to improvise. By declaring a font family you are giving the host PC a clue as to what font style you're after. A lot of desigbers will specify a couple of fonts in order of preference followed by a font family, just in case the user;s PC is running a very basic font set.
tbean wrote:Thanks for rescuing me from my state of muddlement,
Tracey
:D
Image
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: <body>, stylesheet views, and font relationships

Post by LTinker68 »

To add to some of Steve's comments..
tbean wrote:#1 -- In order to see a pristine "Styles.css", I created a new project and opened the Stylesheet Editor. In the Simplified View, the font-family column for body is blank. In the Advanced View, font-family for body is defined as Arial. Why don't I see "Arial" for body in the Simplified View? I can see how a "simplified" view would contain less information, but wouldn't that mean it would display fewer columns, rather than displaying columns but no values?
To really be sure what options have been set in the stylesheet, right-click on the Styles.css file and select Open with > Internal Text Editor. You'll see the stylesheet "code", so to speak. The Stylesheet Editor is a kind of reference list of all the styles you can add to a stylesheet, but until you actually modify a style, it doesn't get added to the stylesheet file (Styles.css). So even if you see something written in a style in the Stylesheet Editor, it doesn't necessary mean that it's been added to the stylesheet, which is why I open my stylesheet in the Internal Text Editor a lot.
tbean wrote:-- "body" is the biggest container element in a topic file (not counting <html>) and all the content in the topic is within elements that are children of <body>
I don't know if this is a bug with Flare or if it's defined behavior in the browsers, but I've found that sometimes specifying a font in the <body> tag doesn't always cascade down to all levels. Lists come to mind for some reason. It seems like in the past I've had to specify the same font-family in the ol/ul tags as I specified in the body tag. So if something doesn't look right in your topic, check first that you don't have an inline style in the topic itself, then check that you have the correct font on the body tag, then - if all else fails - set the same font family on the tag that doesn't look right. I might be remembering that incorrectly, but it seems like it's happened to me before.
tbean wrote:#4 -- What is the difference between font and font-family? Why should I use one as opposed to the other?
You should use fonts that are standard on computers. If you want to specify a special (i.e., not standard) font, then list it first, followed by several standard fonts. A common font family (of standard fonts) is "Verdana, Arial, Helvetica, sans-serif". The browser will first check for Verdana on the user's computer, and if it's present, then it'll render the web pages using that font. If it can't find Verdana, then it'll go to Arial. If it's a Mac and the first two fonts aren't present, then it'll use Helvetica. If none of the fonts are present, then it'll go with the default sans-serif font on the computer.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: <body>, stylesheet views, and font relationships

Post by NorthEast »

tbean wrote:#3 -- If I want to use a relative font sizing -- such as ems -- in various styles, do I first need to establish an absolute size for body? If you don't establish an absolute size for body, then what are the relative sizes basing themselves on? I notice that when I select font-size for body in the Advanced View, the help box (what is it really called?) at the bottom of the Stylesheet Editor includes this: "default: 12 pt". Does that mean that if font-size is left blank, that it will default to 12 pt? (that certainly seems to make sense, but ... ) Is 12 pt an HTML, XML, CSS, or MadCap standard?
No, you don't need to set an absolute font size. Also, if you do use an absolute font size, then font resizing won't work in IE6.

What I do...

In my body style, I set font-size: 69%.

The default medium font size in most browsers (Internet Explorer and Firefox) is set to 16px.
So, by setting the font-size to 69%, I'm saying that I want my default size to be 69% of 16px = 11px.

As my default font size is now 11px, that means that 1em = 11px.

Then in the rest of my stylesheet I set my font sizes in ems, e.g.:

p - font-size: 1em
h1 - font-size: 1.72em (1.72*11 = about 19px)
h2 - font-size: 1.27em (1.27*11 = about 14px)
...

Generally, I find it easier to keep the majority of my styles set to 1em, and I only use different values for things like headings. I do this because it can get very complicated using relative sizes with styles that can be nested, e.g. if you use paragraphs in lists and your p font size is different to your li/ol/ul font size.

You would use an absolute size for print outputs. To do this, change the stylesheet medium to print and set your body size in points. The rest of your font sizes are ok as ems, but you can tweak them in the print medium as appropriate.
KevinDAmery
Propellus Maximus
Posts: 1985
Joined: Tue Jan 23, 2007 8:18 am
Location: Darn, I knew I was around here somewhere...

Re: <body>, stylesheet views, and font relationships

Post by KevinDAmery »

LTinker68 wrote: You should use fonts that are standard on computers. If you want to specify a special (i.e., not standard) font, then list it first, followed by several standard fonts. A common font family (of standard fonts) is "Verdana, Arial, Helvetica, sans-serif". The browser will first check for Verdana on the user's computer, and if it's present, then it'll render the web pages using that font. If it can't find Verdana, then it'll go to Arial. If it's a Mac and the first two fonts aren't present, then it'll use Helvetica. If none of the fonts are present, then it'll go with the default sans-serif font on the computer.
This is true for online output like CHM and WebHelp. For print output, you can use whatever font you wish since the output will be put on paper rather than rendered by the user's system. Note that this is also the case if you are making PDF output PROVIDED that you enable the option to embed fonts in the PDF in your Acrobat settings.
Until next time....
Image
Kevin Amery
Certified MAD for Flare
tbean
Propeller Head
Posts: 48
Joined: Wed Jan 16, 2008 1:59 pm
Location: SE Pennsylvania

Re: <body>, stylesheet views, and font relationships

Post by tbean »

Thanks for all the responses :P

I have a few follow-ups...

#1 --
The Stylesheet Editor is a kind of reference list of all the styles you can add to a stylesheet, but until you actually modify a style, it doesn't get added to the stylesheet file (Styles.css).
ahh. ohh. I thought that the SE was a UI aid to viewing the contents of an actual stylesheet. That is both interesting and useful to know.

#2 --
What is the difference between font and font-family? Why should I use one as opposed to the other?
I may have found the answer to my confusion: I was wondering why the Advanced View, in the Font property group, had one line for "font" and another line for "font-family". I just read about the shorthand version of the font property, where you can list all the properties in a single declaration, such as this: p {font: italic bold 1.2em serif;}

I'm guessing now that the "font" line represents this shorthand declaration. If so, I don't plan to use it. In fact, I think I'll just ignore that line regardless. :wink:

#3 --
No, you don't need to set an absolute font size. Also, if you do use an absolute font size, then font resizing won't work in IE6.
Very good to know!

Thanks, everyone --
Tracey
Tracey
KevinDAmery
Propellus Maximus
Posts: 1985
Joined: Tue Jan 23, 2007 8:18 am
Location: Darn, I knew I was around here somewhere...

Re: <body>, stylesheet views, and font relationships

Post by KevinDAmery »

#1 - you're correct, it is a way to view the content of the actual stylesheet, BUT it also shows inherited settings. As a really broad example, if you had set the Body tag to use Times as its font, then all styles would show Times in the font setting, even if the stylesheet didn't contain any font code for that style: the only exceptions would be styles that explicitly had code telling them to use a different font.

This behaviour can result in some confusion, because the SE sez on screen that a setting is there when in fact there is no setting at all. (Personally, I think Madcap should change it so that inherited settings are displayed differently than actual settings so that users can tell them apart - something like making actual settings bold or making inherited settings italic, for example.)
Until next time....
Image
Kevin Amery
Certified MAD for Flare
Post Reply