|
Convenient web based access to our favorite web design Usenet groups
|
 |
This is Interesting: Free Magazines for Graphics designers and webmasters
| Author |
| Thread |
 |
|
|
|
|
|
|
|
|
|
|
 08-21-04 - 05: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>
|
|
|
| [
Post Follow-Up to this message ]
|
|
|
|
|
|
| All times are GMT. The time now is 03:55 PM. |
|
|
|
|
|
| |
|
