ahem er em

[fritz]

Whoa! There's a new idea in town. At least for me. The em, which I see
mentioned in a nearby post. The idea of using the em for text needs a
little explanation. But first, on my own I found out that the em came
from the idea of the size of a box that would enclose the Roman letter
"M". (it was all caps long ago).

Cutting to the chase: Is this right? By setting the basic font size to 1
em then you merely use the css properties of 'small', 'x-large', etc to
let the browser display it at it's best?

F.

 

[Els]

Whoa! There's a new idea in town. At least for me. The em, which I see
mentioned in a nearby post. The idea of using the em for text needs a
little explanation. But first, on my own I found out that the em came
from the idea of the size of a box that would enclose the Roman letter
"M". (it was all caps long ago).

Cutting to the chase: Is this right? By setting the basic font size to 1
em then you merely use the css properties of 'small', 'x-large', etc to
let the browser display it at it's best?

No, use percentage for the font-size itself, but use em if you need a
box to be wide enough for a certain piece of text, so that the box
grows with the font-size if visitors resize the text.

You could use em for the font-size as well, but IE does weird things
to the font-size on resizing if you do that. So, percentage is the way
to go for text.

 

[Beauregard T. Shagnasty]

Whoa! There's a new idea in town. At least for me. The em, which I
see mentioned in a nearby post. The idea of using the em for text
needs a little explanation. But first, on my own I found out that
the em came from the idea of the size of a box that would enclose
the Roman letter "M". (it was all caps long ago).

Cutting to the chase: Is this right? By setting the basic font size
to 1 em then you merely use the css properties of 'small',
'x-large', etc to let the browser display it at it's best?

To avoid a bug in Windows IE, use percentages instead of em.

body, th, td ( font-size: 100%; }
h1 { font-size: 150%; } /* season hx to taste */
h2 { font-size: 135%; }
..legalese { font-size: 85%; }

By using percentages, you won't need those "small" etc keywords that
some browsers may have a problem with. Then, set sizes of divs with
em, so when people change their font size, everything stays in order.

 

[fritz]

Thank you both very much for the comments and illumination! I'll try to
put it into practice. Meanwhile it seems that more reading is always
required.

thanks.

f.

 

[Andy Dingley]

Cutting to the chase: Is this right?
Yes.

By setting the basic font size to 1 em

Yes. body p { font-size: 1em; } is the only way to go. Anything that
isn't this default size should be marked up as different from the
default (in the HTML) Don;t mess with the user's own notions of a
usable size to read the text - you don't know what their screen is
about.

Actually there's a glitch to the above. IE (of course) gets confused.
Use this instead
body p { font-size: 100%; }

It means the same, but IE gets it right,


If you have a stylesheet specifically for printing, it's often
reasonable to use "physical" units in there, like points.

then you merely use the css properties of 'small', 'x-large', etc to
let the browser display it at it's best?

Personally I find these less than obvious and would prefer to use
font-size: 1.5; etc.

 

[Els]

Personally I find these less than obvious and would prefer to use
font-size: 1.5; etc.

1.5 what? Hobnobs? ;-)

 

[Beauregard T. Shagnasty]

1.5 what? Hobnobs? ;-)

Cheeseburgers!

 

[Els]

Cheeseburgers!

Not! Andy is British (afaik), so it'll be Hobnobs!

 

[Beauregard T. Shagnasty]

Not! Andy is British (afaik), so it'll be Hobnobs!

Oh ok ... hobnobs this time then ...

 

[fritz]

Oh ok ... hobnobs this time then ...

I really wish I could agree with you but my dictionary defines "hobnob"
as a verb, as in getting together to socialize with one of a *higher*
class. But then also one "hobnobs" (intransitive) or perhaps in the past
"hobnobbed". However, perhaps a new definition is now being cast for
Dynamic HTML?

1 em = 12 hobnobs? Or in the colonies:
12 hobnobs = 1 cheesburger = 1 em = 12pt at 12ppem?

f.

 

[Els]

I really wish I could agree with you but my dictionary defines "hobnob"
as a verb, as in getting together to socialize with one of a *higher*
class. But then also one "hobnobs" (intransitive) or perhaps in the past
"hobnobbed". However, perhaps a new definition is now being cast for
Dynamic HTML?

1 em = 12 hobnobs? Or in the colonies:
12 hobnobs = 1 cheesburger = 1 em = 12pt at 12ppem?

No! One Hobnob is worth much more than one cheeseburger!
It's the Hobnob that's the higher class! Ever seen a cheeseburger
wrapped in glossy paper with pictures of chocolate coated cookies on
it? <g>

 

[fritz]

fritz wrote:




No! One Hobnob is worth much more than one cheeseburger!
It's the Hobnob that's the higher class! Ever seen a cheeseburger
wrapped in glossy paper with pictures of chocolate coated cookies on
it? <g>

Did you really have to give me that image just as I go off for lunch?

f.

 

[Els]

Did you really have to give me that image just as I go off for lunch?

Lunch? Hobnobs are great for lunch!

Well, I thought they were one summer in London... great for lunch and
breakfast too.

 

[David Dorward]

Cutting to the chase: Is this right? By setting the basic font size to 1
em then you merely use the css properties of 'small', 'x-large', etc to
let the browser display it at it's best?

No.

Setting the font size with the em unit sets the font size as a proportion of
the font size in the parent element. If the element is the <body>[1], then
it is a proportion of the user's preference instead.

The font size keywords are absolute sizes (although, IIRC, also based on the
user's choice of font size). Setting the font size of an element with a
keyword will be the same size no matter what font size you have specified
for its ancestors.

http://css-discuss.incutio.com/?page=FontSize might be useful.


[1] or <html> depending on browser, content-type and possibly Doctype.

 

[fritz]

Lunch? Hobnobs are great for lunch!

Well, I thought they were one summer in London... great for lunch and
breakfast too.

One summer in Scotland I tried "hagis" and thought it was great. But
then I had it without a significant number of beers first and revised my
opinion.

Sort of like in the eastern part of the state of Pennsylvania in the US
where they eat something called "Scrapple".

However, I just got 12 squaks from my $8.00 gen-u-ine, alpine, made in
SE asia, squaking bird clock which means it's time for lunch. Without
hobnobs, hagis, or scrapple.

TA

f.

 

[Beauregard T. Shagnasty]

Sort of like in the eastern part of the state of Pennsylvania in
the US where they eat something called "Scrapple".

I *love* scrapple!

Put a bit of maple syrup on it...

(I'm originally from Harrisburg. <g>)

 

[fritz]

Setting the font size with the em unit sets the font size as a proportion of
the font size in the parent element. If the element is the <body>[1], then
it is a proportion of the user's preference instead.

The font size keywords are absolute sizes (although, IIRC, also based on the
user's choice of font size). Setting the font size of an element with a
keyword will be the same size no matter what font size you have specified
for its ancestors.

http://css-discuss.incutio.com/?page=FontSize might be useful.


[1] or <html> depending on browser, content-type and possibly Doctype.

Thanks. In other words the default (medium) font is the reference.
So - font-size: 1.5 em = font-size: 150%

So in the very beginning at the body tag one could just set the fontsize
to 100% and then use percentages to express your desired relational size
of the text at any particular moment. Even setting the H1,H2, etc as a
percentage of the norm and then using the H tags where appropriate and
font-size: percentage for other than H sizes. Is this getting to what
you mean?

f.

 

[David Dorward]

Thanks. In other words the default (medium) font is the reference.

Only Internet Explorer, AFAIK, uses keywords to reference font sizes in its
UI - and in Quirks mode, I seem to recall that its "medium" is CSSs
"smaller".

The reference is the font size of the parent element though - so you get a
multiplication effect with relative font sizes.

So - font-size: 1.5 em = font-size: 150%

"1.5em", not "1.5 em"

So in the very beginning at the body tag one could just set the fontsize
to 100%

Which is the default

and then use percentages to express your desired relational size
of the text at any particular moment. Even setting the H1,H2, etc as a
percentage of the norm and then using the H tags where appropriate and
font-size: percentage for other than H sizes. Is this getting to what
you mean?

Yes.

 

[kchayka]

12 hobnobs = 1 cheesburger

Hmmm... is that based on total weight or some nutritional value?

 

[Beauregard T. Shagnasty]

So in the very beginning at the body tag one could just set the
fontsize to 100% and then use percentages to express your desired
relational size of the text at any particular moment.

No, not in the body tag (element).

You set those in your style sheet. CSS.
http://htmldog.com/guides/cssbeginner/