Hi everyone,
I have been trying define font sizing as relative sizing to allow the user to use the text size feature in browsers view option. All the Flare porjects I have seen tend to use pt size which fixes the size. I have tried to set the font size in em's (having set the body to 62.5% in the html style) but it doesnt preview in flare at the correct size. You only see the correct size upon export to webhelp. So very difficult to see what you are working with!
Has anyone setup a stylesheet properly to allow font resize that they could send me?
William Rowsell
william@rowsell.co.uk
Scalable text
Re: Scalable text
It doesn't display properly in the XML Editor because the XML Editor isn't a full browser set. It's close, but you don't see all the effects you'd see in the web output, like drop-down text or togglers, or appropriate font sizing when using relative fonts.
I use ems, as well. I have the body tag set to 1.0em and the <p> tag set to .8ems, which is the size I have for most body text. Headings are 1.6em, 1.4em, etc., depending on what other attributes I set on the heading tag (background color, bottom border, etc.).
When I first set up the project, I get the main styles font sizes set and frequently build the output to see how it looks, testing in both Firefox and Internet Explorer, because (of course) they don't match on everything. And any time I add a new class or modify a tag I hadn't used yet, I test.
One thing to keep in mind with using relative fonts (not a problem with fixed font sizes), but you're really a "victim" of the cascading part of the cascading stylesheet. If you use relative font sizes, then you're going to have to set up several complex selectors, such as td p and ul li p and others. Using my example, if my <td> and <p> tags are both set to .8em, but then I put a <p> tag inside a <td> tag, then the size of the <p> tag is relative to the size of the <td> tag, so .8em * .8em = .64em for the size of the <p> tag. Since I don't want a <p> tag inside a <td> tag to be smaller than a regular paragraph, I have a complex selector set up (td p) that specifies that the font-size of a <p> tag inside a <td> tag is 1.0em. It's not really 1.0em like the <body> tag, it's actually saying that it's the same size as the parent tag.
I use ems, as well. I have the body tag set to 1.0em and the <p> tag set to .8ems, which is the size I have for most body text. Headings are 1.6em, 1.4em, etc., depending on what other attributes I set on the heading tag (background color, bottom border, etc.).
When I first set up the project, I get the main styles font sizes set and frequently build the output to see how it looks, testing in both Firefox and Internet Explorer, because (of course) they don't match on everything. And any time I add a new class or modify a tag I hadn't used yet, I test.
One thing to keep in mind with using relative fonts (not a problem with fixed font sizes), but you're really a "victim" of the cascading part of the cascading stylesheet. If you use relative font sizes, then you're going to have to set up several complex selectors, such as td p and ul li p and others. Using my example, if my <td> and <p> tags are both set to .8em, but then I put a <p> tag inside a <td> tag, then the size of the <p> tag is relative to the size of the <td> tag, so .8em * .8em = .64em for the size of the <p> tag. Since I don't want a <p> tag inside a <td> tag to be smaller than a regular paragraph, I have a complex selector set up (td p) that specifies that the font-size of a <p> tag inside a <td> tag is 1.0em. It's not really 1.0em like the <body> tag, it's actually saying that it's the same size as the parent tag.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Re: Scalable text
You're making it sound a whole lot more difficult than it actually needs to be - you don't need to use complex selectors.LTinker68 wrote:One thing to keep in mind with using relative fonts (not a problem with fixed font sizes), but you're really a "victim" of the cascading part of the cascading stylesheet. If you use relative font sizes, then you're going to have to set up several complex selectors, such as td p and ul li p and others.
You're using complex selectors because your p/li/td tags are 0.8 em, so when you use one tag within another you get a relative sizing problem that you need to correct by using a complex selector.
If you just want to use one font size for most of your text (i.e. in paragraphs, lists and tables), then use a font size of 1em.
For example, set your body font size to say 69% (this is your '1em' font size), then set your p/li/td tags to 1em.
That's it, no complex selectors required!
Re: Scalable text
I use Verdana as the first font in the font family, and a font size of 1.0em seems too big to me for that font for content, which is why I use .8em for content. If Arial was the first font in the font family then I'd probably go with 1.0em. Using .8em does cause problems, but I prefer Verdana for web output. You can go down a lot smaller in Verdana and still be legible.Dave Lee wrote:...You're using complex selectors because your p/li/td tags are 0.8 em... then use a font size of 1em.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Re: Scalable text
Yep, but you can control what size 1em represents by setting the body font size as a percentage.
Instead of setting your body tag to 1em, set it as a percentage - I use Verdana too and I find that 69% works ok.
So you'd have:
Just tweak the percentage up or down to get the right size that you want.
Instead of setting your body tag to 1em, set it as a percentage - I use Verdana too and I find that 69% works ok.
So you'd have:
Code: Select all
body
{
font-family: Verdana;
font-size: 69%;
}
p
{
font-size: 1em;
}
Re: Scalable text
I'll give that a try. Thanks.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.