"em" font sizes driving me crazy

[OsakaWebbie]

I obviously still don't understand CSS. I want to allow the user to change the font size in his browser if he wants - from what I understand, that means I have to use "em" as the unit of measure everywhere. But what it uses as the basis (i.e. the "parent") is baffling. Take a look at the top page of this Joomla site I'm building:

http://budounoki.org/joomla

(sorry much of it is Japanese, but reading comprehension is not necessary). The elements I'm currently fighting are the Read More links. The structure is "<p><a class=readon>..." but the relative font-size I set for a.readon seems to follow not the <p> (which is what I would have assumed is the parent) but whatever comes before it, in this case another <p> in the first case and <h2> in the other two. So the size of the class=readon links isn't consistent. Questions:
[ol][li]Why isn't the size basis in this case the <p> that directly surrounds the link?[/li]
[li]Is there some other unit of measure I can use that isn't so dependent on everything around it, but still flexes when the user changes the browser's font size setting?[/li][/ol]
It would be great if my font sizes were relative only to some master somewhere (and also if my line-height values were relative to the size of the font they directly apply to, e.g. if it's single spacing, I should just be able to say 1.0em or 100% or something and it would work no matter what the size of the font - that one is also giving me trouble).

 

[Foamcow]

You don't HAVE to use ems just a relative font size, so this could be expressed as a percentage. An em is a relative unit equivalent to the point size.

Set a base font size on the body element using pixels.

Then alter that font size by using either ems or, if you find it easer, percentages.

Don't forget that the relative font size is relative to it's parent element.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[OsakaWebbie]

Set a base font size on the body element using pixels. Then alter that font size by using either ems or, if you find it easer, percentages.

I had always assumed that a font size set in points or pixels would not be affected by the browser's settings - I'm pretty sure it used to be true, at least for points. But just now I tried it, and at least in Firefox 2 it works (I'll try other browsers later - it's past my bedtime!). So actually, since the relative size thing is problematic in this situation, I think I'll just abandon em's for most things and just use pixels or points. I'll make the changes tomorrow and let you know if it works.

Don't forget that the relative font size is relative to it's parent element.

That's exactly the reason I wrote my question, and I still want to know the answer for general learning of CSS. I apparently don't understand what the "parent" is for the font-size specification. I just now discovered that I had a bit of malformed HTML (the Joomla article editor had placed the ReadMore tag before the closing </h2>, causing the closing tag to not appear on the top page), but even before I fixed that, I would have thought that the parent of the <a> would be <p> even in this malformed snippet: "<h2>something<p><a class=readon href=somewhere>something</a></p>..." Firefox's Web Developer Tools' "Element Information" said that the parent of the link was the <p>, and <h2> was the "grandparent". Shouldn't that make the <a>'s font-size relative to the <p>? I know you'll say, "Don't allow malformed HTML in your code and you'll be okay," but this is a CMS - others will be writing articles without looking at the source code - things like font sizes of elements outside the articles should work right no matter what.

And I have an additional related question: The Joomla template I'm using as a starting point sets the body element's font-size to 76% and the line-height to 1.8em, with this comment:

/* we set the font size to 76% to compensate for different browsers and operating systems. 76% tends to look like 12px on most screens and we set the line height equal to the height of an uppercase "M" character */

What would that 76% be a percentage of (and the 1.8em be relative to)? Is there an internally determined starting point for each browser or something? When I thought that pixels and points would be too inflexible, I just accepted the explanation without understanding it. But now that I know that even pixels and points vary with the browser settings, I thought again about that 76% and realized that I have no idea what the antecedent for the percentage is. Anyone know how that works?

 

[BillyRayPreachersSon]

Take a read of faq215-6624 - it was put together from just such a frustration.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

P.S. Apart from your base font size (see the FAQ in my previous post), don't specify your font sizes in px as this will render them unscalable in IE6 but every other browser will scale them.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[OsakaWebbie]

Thanks for the link. But now I'm really confused. The comment I found in my template's CSS file now makes a little sense - if 100% on older browsers means 16px on newer ones, then 76% would be roughly 12px. But I still don't understand what changes globally (apparently equalizing the OS difference) by stating "font-size: 100%". 100% of some invisible parent (I have no idea what the parent of <body> is... <html>?) is the same as the parent, no?

In addition, the FAQ states that if you use that code, you can then state the rest of your font sizes in whatever units you want (including points or pixels) and it will work, but I don't understand how. If I try to set the font size for general things like p, h1, td, etc., none of them will have any effect in newer browsers because basic elements have lower specificity than "html>body". If I make sure my declarations are all higher specificity, like "#mypage p", "#mypage h1", etc., the new rules would cancel out the carefully constructed code from the FAQ, no? I don't see how it would work. Pardon my ignorance, but can Dan or someone else explain a little more or point me in the direction of a page with more about this?

 

[BillyRayPreachersSon]

Personally, I'd completely ignore the comment in your CSS file, remove anything to do with it, and use the code in that FAQ. It's been working 100% for us on Windows & Mac OS for years now on all sites we work on.

It's also based on known knowns, rather than known unknowns (i.e. we know why the FAQ does what it does, but we cannot be sure why your CSS file is the way it is)

Elements inside the body (e.g. H1, P, etc) can have their font-sizes specified in EMs without their rules being more specific, as EMs are a relative unit of measurement (i.e. relative to the next font-size up the chain).

So, for example, if you use the FAQ to set your base font size to 16px (and 100% on IE6), then any font sizes you specify in EMs after that will be relative to 16px, so for example:

h1 {
   font-size: 1em;
}

p {
   font-size: 0.75em;
}

Would produce H1s with text equivalent to 16px (16 * 1 == 16) and Ps with text equivalent to 12px (16 * 0.75 == 12).

If you're not seeing this, then I'd suggest you have a font -size specified somewhere that isn't using a relative unit.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[OsakaWebbie]

You keep talking about EMs, as if I want to use them but am having trouble. The opposite is true - I'm trying to move away from using EMs and %, because Joomla is sufficiently complex that I cannot predict accurately what the parent will be in every case. I want, for example, a <p> to be a certain size all the time, not relative to whatever it happens to be inside of. If I want to vary it for a certain situation, I'll make a more specific rule. And since I noticed that sometimes an element is rendered based on what looks to me like the grandparent instead of the parent (the case of the "<h2><p><a href=link>link</a></p>" that ended up with an h2-sized link instead of a p-sized one), I really don't trust the browser to always build the family tree the way I expect.

You said that PX doesn't respond to IE6's font size settings, but you implied by silence that PT would be okay (and that PX would work in IE7). And I had already noticed that both worked fine in Firefox (as I said in my response to Foamcow earlier in this thread). But I just now made two test files (try them yourself: PT version and PX version) matching the doctype of my Joomla template, using the FAQ's code, and then some definitions of my own to test different situations. Then I tested them in various browsers (in WinXP - I don't have a Mac). The text scaled with the browser's settings in Firefox, Safari for Windows, and Opera (technically zoom rather than text size), but in both IE6 nor IE7, the only text that scaled was what was outside the elements I defined, i.e. text defined only by the <body> def from the FAQ. It's really mysterious, because when using IE7 on my PX test, you'd think "html>body{font-size:16px;}" would not be handled any differently than "p{font-size:12px;}", but it is.

I'm starting to see why many Joomla templates include little icons and Javascript code to change the font size rather than trusting the browser to provide that capability. The template I'm working from does not have that kind of code, and when I tried to copy it from another template, it was sufficiently messy (intertwined with variables that only appeared in the template I was copying from) that I couldn't port it in a reasonable amount of time and gave up, at least for now.

Any suggestions? Is there a different doctype that will make PT-defined text scale in IE? Or if I have no choice but to use EM for everything, how can I make sure, for a simple example, that a <p> is always a particular size no matter what is around it?

Addendum: I did a little research before uploading this post, originally looking for an explanation of the "html>body" expression. I did find that explanation, but also more about the quest for sizing techniques that allow browser scaling.

For starters, I think I found the idea that the writer of the template I'm using seems to have used - see this page, written in 2002 but pretty comprehensive for what was available at the time (264 screenshots - wow!). His "real.css" file looks very much like the CSS that came with my template, including the mysterious 76% and even the line height variations.

In the same year, a different person (see this page) was thinking like me that he wanted the accessibility of browser settings but didn't want the inheritance problems of EMs, so he opted for font-size keywords instead of numbers altogether. Again, he used lots of hacks for older browsers, but most of those I don't care about, and perhaps newer browsers are more similar...? Hmmm...

 

[OsakaWebbie]

Okay, I'm really trying to get used to using em's, but they still mystify me. Here's a simple (I hope) question about two elements. Take a look at

http://www.budounoki.org/joomla/index.php/events/44-alpha-wed

as an example - I'll leave both elements visible together there to make it easier to compare. As far as I can understand, h1 (purple) and h2 (green) should both be the same font family, should both be bold, and h1 should be a little bigger than h2 (1.4em vs. 1.3em). But it would appear that h2 is slightly bigger, and not bold. If h2 is a link (see the Home page for example) it becomes bold (due to my general purpose link specification), and even bigger than before (why that is, I haven't a clue). I want both h1 and h2 to be bold all the time, and h1 to be a bit bigger than h2. Can anyone tell me why that's not the result I see?

 

[OsakaWebbie]

Never mind. I couldn't leave double titles up there forever, and I eventually found the inconsistencies in my CSS... I think...