Measuring em units

Hello

I've started using CSS more in the last couple of weeks and in the last
week I've started using em units. Are there any rulers I download that
can show measurements in em units or is there another way of showing a
graphical representation of em units in a simple manner.

I know that an em unit is based on the size of the default font in the
body of the web page and I've been placing temporary coloured borders in
containers to get a visual representation of what they look like with
different em measurements but I'm wasting a lot of time with trial and
error doing it that way.

My main inspiration in using em units is the book "More Eric Meyer on
CSS" by Eric Meyer (particularly the chapter on "css dropdown menus")
and Mulder's stylesheet tutorial at Web Monkey.

Thanks

Peter Mount
info (AT) petermount (DOT) au.com

Peter Mount wrote:

Hello

I've started using CSS more in the last couple of weeks and in the last
week I've started using em units. Are there any rulers I download that
can show measurements in em units or is there another way of showing a
graphical representation of em units in a simple manner.

I know that an em unit is based on the size of the default font in the
body of the web page

"The 'em' unit is equal to the computed value of the 'font-size'
property of the element on which it is used."

from:

http://www.w3.org/TR/CSS21/syndata.h...lue-def-length

Peter Mount <info (AT) petermount (DOT) au.com> wrote:

I've started using CSS more in the last couple of weeks and in the
last week I've started using em units.

You're making great progress. Many people reach that enlightenment only
after years, or never!

Are there any rulers I
download that can show measurements in em units or is there another
way of showing a graphical representation of em units in a simple
manner.

You can set the dimensions of an element in em units and use a border to
make the dimensions visible. You might also set background color. The
following shows a 1em by 1em square (the famous em square - but to be
exact, the borders are not part of the square, only the content is):
<div style=
"width: 1em; height: 1em; line-height: 1; border: solid black 1px"></div>

I know that an em unit is based on the size of the default font in
the body of the web page

No, the em unit means the font size of the _current_ font, the font used
in the element for which you use the unit - except for the font-size
property, where the em unit means the font size of the enclosing (parent)
element. (There would be little point in using the em unit for the
font-size property otherwise!)

and I've been placing temporary coloured
borders in containers to get a visual representation of what they
look like with different em measurements but I'm wasting a lot of
time with trial and error doing it that way.

I'm not sure I see why you consider that as waste. It might be waste if
you tried to make em sized things match some preconceived layout in
pixels, instead of simply designing in terms of the em unit - as
typographers have traditionally done even in the printing world, where
the em unit is not at all as flexibly settable as in the WWW.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

"Jukka K. Korpela" <jkorpela (AT) cs (DOT) tut.fi> writes:

Peter Mount <info (AT) petermount (DOT) au.com> wrote:
Are there any rulers I download that can show measurements in em
units or is there another way of showing a graphical
representation of em units in a simple manner.

You can set the dimensions of an element in em units and use a border to
make the dimensions visible. You might also set background color. The
following shows a 1em by 1em square (the famous em square - but to be
exact, the borders are not part of the square, only the content is):
div style=
"width: 1em; height: 1em; line-height: 1; border: solid black 1px"></div

outline: solid black 1px; would put the visual edge in the right
place, I think. Not sure about browser support - Opera supports it, I
don't known if Mozilla does yet or not.

--
Chris

"Peter Mount" <info (AT) petermount (DOT) au.com> wrote in
comp.infosystems.www.authoring.stylesheets:

I've started using CSS more in the last couple of weeks and in the last
week I've started using em units.

Excellent!

Are there any rulers I download that
can show measurements in em units or is there another way of showing a
graphical representation of em units in a simple manner.

Not em units as such, but the DOM Inspector in Mozilla lets you
flash a border around any selected element so you can see how tall
and wide it is.

I know that an em unit is based on the size of the default font in the
body of the web page

Now quite, no. "em" varies from element to element: an em is equal
to the font size of that element.

Consider:
p { font-size: 100% }
h2 { font-zise: 150% }

An "em" inside a <h2>...</h2> element is 1.5 times as large as an
"em" in paragraph text.

The great benefit of ems (or percents) is that you don't set font
size, but adjust all your measurements in proportion to the user's
selected font size.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/

Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

This is a misleading statement requiring clarification.

Well, that's true in a sense - but as applies to your own statements.

The EM is not a "unit"

By CSS specifications, it is a unit in CSS.

Generally, the EM (or EM "space") is the width and height of the
capital M

We've seen such disinformation here several times, and also correct
information. Do we really go through this again? See e.g.
http://home2.swipnet.se/%7Ew-20547/s...graph1-en.html
(I guess there's a newer version somewhere. And I think this might be
eligible for inclusion into the FAQ. Although the CSS specifications make
clear that the em is a unit, they don't define it very clearly.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/

On Sun, 15 Aug 2004 20:48:44 +0000 (UTC), "Jukka K. Korpela"
<jkorpela (AT) cs (DOT) tut.fi> wrote:

Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:
[...]
Generally, the EM (or EM "space") is the width and
height of the capital M

We've seen such disinformation here several times, and
also correct information. Do we really go through this
again? See e.g.
http://home2.swipnet.se/%7Ew-20547/s...graph1-en.html
(I guess there's a newer version somewhere.

There is, here...

<http://www.css.nu/articles/typograph1-en.html>

And I think this might be eligible for inclusion into
the FAQ...

I'm working on it.

--
Rex

Jukka K. Korpela wrote:

Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:


This is a misleading statement requiring clarification.


Well, that's true in a sense - but as applies to your own statements.

Thank you very much. :-\

The EM is not a "unit"


By CSS specifications, it is a unit in CSS.

An unfortunate use of the term which did not consider the Unit "space".
I suppose it would then be called a Unit unit? Bad choice of word. W3C
is not infallible. I therefore call it a "value" which it actually is,
although I understand what is meant here when using "unit".

Generally, the EM (or EM "space") is the width and height of the
capital M


We've seen such disinformation here several times, and also correct
information. Do we really go through this again? See e.g.
http://home2.swipnet.se/%7Ew-20547/s...graph1-en.html
(I guess there's a newer version somewhere. And I think this might be
eligible for inclusion into the FAQ. Although the CSS specifications make
clear that the em is a unit, they don't define it very clearly.)

Disinformation? The cap M has no relationship to the EM space?
You failed to notice the word "Generally". I also mentioned reserved
space top, bottom and right. I did not get into character design details
regarding ascender, descender and inter-character space, but left it at
"Generally". I even gave an example showing the effect on width by the
inter-character space and that it is not a fixed constant such as 1.5 as
suggested in this thread. The link is to a fine piece of work.

--
Gus

Jan Roland Eriksson wrote:

http://www.css.nu/articles/typograph1-en.html

And I think this might be eligible for inclusion into
the FAQ...

I'm working on it.

Nice work, although I think that for leading probably many things handy
may have been used as well as brass in hand type. Lead was used for hot
type and hence the term leading.

--
Gus

On Sun, 15 Aug 2004, Gus Richter wrote:

By CSS specifications, it is a unit in CSS.

An unfortunate use of the term

Not really. It's a unit of measurement. Any number followed by a
term is considered to be a "value" followed by a "unit", whether the
unit be a microparsec, a module of 90cm, a "medium egg", a pack of 10
woggles, or whatever is relevant in the context.

which did not consider the Unit "space".

I've no doubt you have a mental picture of something which you're
trying to communicate, but unfortunately it doesn't seem to be
compatible with the terms of the present discourse.

I therefore call it a "value" which it actually is,

You'd best stop doing that, since in the expression "1.2em", the
"value" is 1.2 and the "unit" is em.

Disinformation? The cap M has no relationship to the EM space?

Oh, go away and read some background. This is too tiresome.

Good night.