Please – look at my example page first before tossing this post in the bin and moving on to less wonky topics… It’s a nice page and entirely built in Freeway Pro.
I’ve built this example page to try and show what I’m getting at. Basically, if I assign a percentage size to a font tag, I get a percent of the size defined in my body tag. Yet if I assign the font-size property to the containing element, I get a percentage of the size defined in the tag. Pardon my density, but I don’t get it – do you?
As I understand it, font-size in percentage always keys off of the body tag. If that tag includes a font-size declaration, then that gets used as the base, otherwise 16px is assumed. So that’s where it starts. Everything else beyond that level is applying percentages to percentages to percentages. As it was in grade school, this is deeply mysterious to me. A calculator that has a percentage feature is very useful in this case.
Walter
On Dec 31, 2012, at 9:08 PM, The Big Erns wrote:
Please – look at my example page first before tossing this post in the bin and moving on to less wonky topics… It’s a nice page and entirely built in Freeway Pro.
I’ve built this example page to try and show what I’m getting at. Basically, if I assign a percentage size to a font tag, I get a percent of the size defined in my body tag. Yet if I assign the font-size property to the containing element, I get a percentage of the size defined in the tag. Pardon my density, but I don’t get it – do you?
Reading up on this topic has led me to explore the concept of inheritance, itself a mysterious topic to unravel, and something else not generally understood… computed style.
So it seems more about the Cascade - and a little math - than mystery. This gives me some ideas, hopefully some will be interesting.
Unless you’ve changed your browser defaults, your body element has a font size of 10px (62.5% of 16px, the browser default). As far as I can see, all the elements that lead down to the text that’s smaller than you’re expecting are set to 100%, as defined in your meyer-reset stylesheet (again, 10px on a default setup). Your font120 class is then overriding the em font sizes applied to the h1, h2, h3, and p elements making each of those elements 12px (120% of 10px).
When it’s working, the font120 class that’s applied to the parent sets it to 12px. The em font sizes applied to the h1, h2, h3, and p elements each set their elements font size respectively (4.212, 3.612, 2.912, and 1.812).
Joe
On 3 Jan 2013, at 15:07, The Big Erns email@hidden wrote:
Reading up on this topic has led me to explore the concept of inheritance, itself a mysterious topic to unravel, and something else not generally understood… computed style.
So it seems more about the Cascade - and a little math - than mystery. This gives me some ideas, hopefully some will be interesting.
62.5% of default browser size is the same as 10px. So an h1 font-size of
3.6em effectively produces 36px when rendered. As explained in Bulletproof
Web Design, browsers that get stuck by pixel definitions are then better
equipped to handle font resizing, while leaving designers a way to handle
the different metric. Good reading.
What troubled me turned out to be my unclear understanding of the Cascade,
and how my ignorance of inheritance and computed style contributed to my
confusion. Here is a link to an article on the topic that was helpful and
enlightening…
So to illustrate, setting the font-size at the body tag to 62.5%
effectively sets the base font size to render at 10px in default browsers…
Then setting the h1 element with a font-size of 3.6em effectively renders
at 10 x 3.6, or 36px in default browsers…
Applying a font-size of 120% to the container of an h1 element then
computes as 10 (body) x 3.6 (h1) x 120% (div), or 43.2px in default
browsers.
When I applied the percentage font-size as a class to the h1, I wrongly
expected it to multiply against the h1 value of 3.6em - or 3.6 x 120% or
4.32em. Needless to say it didn’t work that way, so my initial confusion.
So, the Cascade order requires that styles applied to the h1 (and other
text) tags inherit directly from the body font-size, while styles applied
to containers of h1 apply to the computed style of the h1 tag. Or something
like that. Less mystery now, anyways.
–
Ernie Simpson
On Thu, Jan 3, 2013 at 11:41 AM, Joe Billings email@hidden wrote:
Hi Erns,
Unless you’ve changed your browser defaults, your body element has a font
size of 10px (62.5% of 16px, the browser default). As far as I can see, all
the elements that lead down to the text that’s smaller than you’re
expecting are set to 100%, as defined in your meyer-reset stylesheet
(again, 10px on a default setup). Your font120 class is then overriding the
em font sizes applied to the h1, h2, h3, and p elements making each of
those elements 12px (120% of 10px).
When it’s working, the font120 class that’s applied to the parent sets it
to 12px. The em font sizes applied to the h1, h2, h3, and p elements each
set their elements font size respectively (4.212, 3.612, 2.912, and
1.812).
Joe
On 3 Jan 2013, at 15:07, The Big Erns email@hidden wrote:
Reading up on this topic has led me to explore the concept of inheritance, itself a mysterious topic to unravel, and something else
not generally understood… computed style.
So it seems more about the Cascade - and a little math - than mystery.
This gives me some ideas, hopefully some will be interesting.
On 3 Jan 2013, at 19:09, Ernie Simpson email@hidden wrote:
So, the Cascade order requires that styles applied to the h1 (and other
text) tags inherit directly from the body font-size, while styles applied
to containers of h1 apply to the computed style of the h1 tag. Or something
like that.
Sort of, but it’s more logical than that. If an element (any element, it doesn’t matter if it’s text or not) has a percentage font size then the computed (pixel) value is taken from the parent element. If the parent has a percentage font size then that element is also used in the calculation. And on it goes, right up to the point a fixed font size or the body element is found (whichever is first).
1st example
body = 62.5% (16px *.625 = 10px)
div = 100%
div.font120 = 120%
h1 = 3.6em = 10 * 1 * 1.2 * 3.6 = 43.2 = 43px
2nd example
body = 62.5% (16px .625 = 10px)
div = 100%
div = 100%
h1.font120 = 120% = 10 * 1 * 1 1.2 = 12px
Example of fixed font size blocking cascade
body = 16px
div = 120%
div = 10px
h1 = 3.6em = 10 * 3.6 = 36px