Stylesheets - Measuring em units

Author

Measuring em units

Peter Mount

2004-08-21, 12:22 pm

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@petermount.au.com

Gus Richter

2004-08-21, 12:22 pm

Peter Mount wrote:

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

This is a misleading statement requiring clarification.

The EM is not a "unit", but a "value" such as in inches or centimeters.
The UNIT is another "value" such as in inches, centimeters, EM, EN, and
THIN (1EM=2EN=4THIN=8UNIT for width, whereas the height for each is the
same) which all take up, or provide, an amount of "space".

Generally, the EM (or EM "space") is the width and height of the capital
M including the reserved space on the top, bottom and on the right of
the character, in a given given font and in a given size. The EM "value"
(i.e. 2em refers to two times the size of the EM (both/either width and
height) in the current font and in the current size) as used on a web
page for sizing has the same flexible relationship when used within the
context of a given font and in a given size.

The EM is "initially" based only on the size of the default font in the
body until another size is declared.
Each browser has a default font in a different default size (current
font and size) which will cause the EM value to relate to it until a new
font and/or size is declared (new current font and size) and the EM will
then relate to it. So, a web page may have several fonts and these each
in different sizes at different points in the document. For font-size,
the "value" for EM will render different size depending on current size
and the width or height "value" in EM will render different available
"space" depending on current size. The width/height, will be
representative (somewhat flexibly greater) of the number of cap M
characters, in the given font and in the given size, that could fit therein.

Below are some examples which you can evaluate and hopefully will not
make things more confusing. ;-)
--
Gus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>EM "Space"</title>
<style type="text/css">
body {margin-left:3em;}
div.one {width:1em;height:1em;border:1px solid green;}
div.two {font-size:3em;width:1em;height:1em;border:1px solid blue;}
div.threeandfour {font-family:sans-serif;border:1px solid red;}
div.five {font-size:3em;width:5em;height:1em;border:1px solid blue;}
div.six {font-size:5em;border:1px solid orange;}
</style>
</head>
<body>
<p>This shows the the left margin of 3em based on your browser's default
font size.<br>
This also shows the cap M in your browser's default font and default
size.</p>
<div class="one">
M
</div>
<p>This shows the cap M in your browser's default font and three times
(3em) the default font-size.</p>
<div class="two">
M
</div>
<p>Notice the white space above, below and to the right of the cap M.</p>
<p>The next is in a sans-serif font.<br>
Note that the 1em box is the same size whereas the width and height of
the cap M has changed.<br>
The designing of the font (typeface) is within the EM box. The height
and width of the character depends on the design.</p>
<div class="two threeandfour">
M
</div>
<p>Now look at the next example where the 1em box remains the same.<br>
Note that the 2<sup>nd</sup> cap M is within the 1em box.<br>
This "overlapping" portion is the excess which accumulates for every EM
value in the subsequent two examples.</p>
<div class="two threeandfour">
MMMMM
</div>
<p>And this example where the box is 5em with 5 cap M's.<br>
Note that the extended value of em width over the equal amount of cap
M's.</p>
<div class="five threeandfour">
MMMMM
</div>
<p>The same 5em box with 5 cap M's in the default font:</p>
<div class="five">
MMMMM
</div>
<p>What this all shows is that the em value for width (as well as for
height) is fixed as to the size, roughly equal to the number of cap M's,
but somewhat greater depending on the font.</p>
<p>One final one with with 5 cap M's font-size:5em; and the same width
of 5em and the same height of 1em.</p>
<div class="five six">
MMMMM
</div>
</body>
</html>

Jukka K. Korpela

2004-08-21, 12:22 pm

Gus Richter <gusrichter@netscape.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/...ograph1-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/

Uncle Pirate

2004-08-21, 12:22 pm

Jukka K. Korpela wrote:

> Peter Mount <info@petermount.au.com> wrote:
>
>
>
>
> You're making great progress. Many people reach that enlightenment only
> after years, or never!

It's taken me years. Now I'm trying to redo old pages and create all
new pages validating to HTML 4.01 and CSS as I go.

Even teaching a beginner's HTML course this Fall semester. I'll be
using the validator to help grade the assignments.

--
Stan McCann "Uncle Pirate"
Webmaster/Computer Center Manager, NMSU at Alamogordo
Cooordinator, Tularosa Basin Chapter, ABATE of NM AMA#758681
'94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein

Brian

2004-08-21, 12:22 pm

Harlan Messinger wrote:

> The problem comes when the newcomer says something that is correct in
> the field in which he is coming (for example, an assertion about the
> relationship between the em and the dimensions of the letter M in
> some font)

That appears to be untrue even in the printing field, according to this:

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

In any case, this is ciwas, not misc.industry.printing or
free.uk.trade.printing.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Harlan Messinger

2004-08-21, 11:15 pm

Brian <usenet3@julietremblay.com.invalid> wrote:

>Harlan Messinger wrote:
>
>
>That's not my conclusion.

You haven't left room for any other possibilities.

>Whether you consider that logical or not is up
>to you.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

Jan Roland Eriksson

2004-08-22, 7:17 pm

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

>Gus Richter <gusrichter@netscape.net> wrote:
[...]
>
>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/...ograph1-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

Harlan Messinger

2004-08-22, 7:17 pm

"Brian" <usenet3@julietremblay.com.invalid> wrote in message
news:10i061vgsrpcj19@corp.supernews.com...
> Gus Richter wrote:
>
> Welcome to usenet!
>
>
> (insert usual blather about how this is not a helpdesk)
>
>
> You'd have to accept that others know more than you to learn something
> from them.

The problem comes when the newcomer says something that is correct in the
field in which he is coming (for example, an assertion about the
relationship between the em and the dimensions of the letter M in some
font), and the person who know the particulars in the WWW context flatly
contradicts him and then dares him to defend that which he knows to be true,
rather than acknowledging, "The definition of the term 'em' in the WWW
context differs from its etymological sense." This is not informing, it's
pure snarkiness.

Harlan Messinger

2004-08-22, 7:17 pm

"Brian" <usenet3@julietremblay.com.invalid> wrote in message
news:10i1n8b17ahv3b3@corp.supernews.com...
> Harlan Messinger wrote:
>
>
> That appears to be untrue even in the printing field, according to this:
>
> http://css.nu/articles/typograph1-en.html
>
> In any case, this is ciwas, not misc.industry.printing or
> free.uk.trade.printing.

And therefore nobody who posts here should ever have previous knowledge from
another field that he doesn't happen to realize is different in this one?
The logical conclusion is that no one should ever have the nerve to post
here unless he is either an expert or a blank slate.

Brian

2004-08-22, 7:17 pm

Harlan Messinger wrote:

> The logical conclusion is that no one should ever have the nerve to
> post here unless he is either an expert or a blank slate.

That's not my conclusion. Whether you consider that logical or not is up
to you.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/