Sizing Question: versus margin: 1em

**Steve Pugh** · Jul 21 '05, 12:59 AM

Re: Sizing Question: versus margin: 1em

"Axel Dahmen" <NO_SPAM@NoOneK nows.invalid> wrote:
[color=blue]
>I always thought that "1em" equals one line height.[/color]

No, it equals the height of the font. The line-height is normally a
little bit larger, typically about 1.15 times larger.
[color=blue]
>But if I replace
> <hr> 
>by
> <hr style="margin: 1em 0;">
>
>tables above and below the <hr> get closer in IE as well as FF.[/color]

Of course as there are no lines of text to be broken by the s the
first example it's possible that some browsers will ignore the s
and hence the second example will create larger spaces. There's also
the possibility of different default margin sizes for <hr> in
different browsers. So you're not really comparing like with like.
[color=blue]
>This brings me to the question: What's a , expressed in CSS*?[/color]

Nothing. is a line break. There's CSS to control where an element
can insert line breaks but line breaks by definition have no size or
anything else that could be styled.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

**Jan Roland Eriksson** · Jul 21 '05, 12:59 AM

Re: Sizing Question: versus margin: 1em

On Mon, 31 Jan 2005 00:18:15 +0100, "Axel Dahmen"
<NO_SPAM@NoOneK nows.invalid> wrote:
[color=blue]
>I always thought that "1em" equals one line height.[/color]

No; that's wrong.

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

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

[color=blue]
>But if I replace
> <hr> 
>by
> <hr style="margin: 1em 0;">
>tables above and below the <hr> get closer in IE as well as FF.[/color]

Yea; whatever "happens" is probably correct depending on various value
assignments to properties.
[color=blue]
>This brings me to the question: What's a , expressed in CSS*?[/color]

markup as e.g.

HelloW orld

style rule...

p>span:before { content: "\A" }

suggestst rendering of the text as...

Hello
World

Generated content, automatic numbering, and lists

http://www.w3.org/TR/CSS21/generate.html#propdef-content

There is no box generated for the empty BR element, following that there
is nothing to suggest a style for. A BR element merely breaks a line at
it's location in markup, in exactly the same way as the line would have
been broken anyway had it been long enough not to fit in its containing
element.
[color=blue]
>PS: Here's the sample code I've been using to test the effect:[/color]

You are supposed to produce a URL for us where you have your test case.

--
Rex

**Jukka K. Korpela** · Jul 21 '05, 12:59 AM

Re: Sizing Question: versus margin: 1em

Steve Pugh <steve@pugh.net > wrote:
[color=blue][color=green]
>>I always thought that "1em" equals one line height.[/color]
>
> No, it equals the height of the font.[/color]

Indeed. What's difficult here is what the height of the font means, but we
can hopefully skip that in this discussion.
[color=blue]
> The line-height is normally a
> little bit larger, typically about 1.15 times larger.[/color]

I would say 1.2 is closer to typical browser defaults. CSS 1 recommends 1.1
in its default style sheet for HTML, CSS 2 says 1.33, CSS 2.1 draft used to
say 1.12em (which is not the same as 1.12, really) but was then fixed to
1.12. Confusing, is it not? And for most fonts commonly used, 1.12 is too
small.

There's unfortunately no way to make line-height depend on the browser's
actual choice of font (which can be affected, but not controlled, by an
author style sheet). This makes me think line-height: 1.25 is generally the
least of evils.

But when setting the spacing between two consecutive tables, such
considerations don't need to play any role. Just set a suitable bottom
margin for the first table, or a suitable top margin for the second table.
If you absolutely must do your best to create _some_ space between the two
tables in non-CSS browsing situations, putting   is probably
the simplest way. (By HTML specifications, browsers are required to ignore
that attempt - assuming we interpret the construct as an empty paragraph,
which is a little debatable - but we know they don't do anything that
sophisticated.)

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

**Steve Pugh** · Jul 21 '05, 12:59 AM

Re: Sizing Question: versus margin: 1em

"Jukka K. Korpela" <jkorpela@cs.tu t.fi> wrote:[color=blue]
>Steve Pugh <steve@pugh.net > wrote:
>[color=green]
>> The line-height is normally a
>> little bit larger, typically about 1.15 times larger.[/color]
>
>I would say 1.2 is closer to typical browser defaults.[/color]

I set a font-size of 60px and took screenshots in IE6, FF1 and Opera
7.54. The distance between adjacent baselines was 67px in IE6 and
Opera and 69px in Firefox. That's a default line-height of (approx)
1.12 for IE and Opera and (exactly) 1.15 for Firefox.

(For the record: the font was Arial in each case, the page triggered
Standards mode, all three browsers were running on WinXP, no user
stylesheets that could affect line-height were in use, the top of
ascender to bottom of descender (using h and p) distance was 55px in
all three browsers.)

The last point may be important. If font-size: 60px gives text where
most characters fit inside a box 55px tall then the line-height will
_appear_ to be about 1.2

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

**Jukka K. Korpela** · Jul 21 '05, 12:59 AM

Re: Sizing Question: versus margin: 1em

Steve Pugh <steve@pugh.net > wrote:
[color=blue][color=green][color=darkred]
>>> The line-height is normally a little bit larger, typically about 1.15
>>> times larger.[/color]
>>
>>I would say 1.2 is closer to typical browser defaults.[/color]
>
> I set a font-size of 60px and took screenshots in IE6, FF1 and Opera
> 7.54. The distance between adjacent baselines was 67px in IE6 and
> Opera and 69px in Firefox.[/color]

How did you measure the distance between baselines? I played a little with
testing the behavior of unstyled text with respect to the same text styled
with line-height.
[color=blue]
> That's a default line-height of (approx)
> 1.12 for IE and Opera and (exactly) 1.15 for Firefox.[/color]

I did a simple test with a paragraph of text, duplicated in two p elements,
with the style sheet
p { width: 40%; float: left; border: solid red 1px}
and with line-height set for the second p element explicitly. For 60px
Arial, on IE6, the paragraphs are identical when the setting for the second
paragraph is line-height: 1.12. But, for example,
- for Arial Unicode MS at 12pt size, line-height: 1.3 makes the paragraphs
appear similarly to each other
- for Times New Roman at 12pt size, line-height: 1.2 creates a match (and
so does 1.16).
So the situation really varies, by font family among other things.

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

**Steve Pugh** · Jul 21 '05, 12:59 AM

Re: Sizing Question: versus margin: 1em

"Jukka K. Korpela" <jkorpela@cs.tu t.fi> wrote:[color=blue]
>Steve Pugh <steve@pugh.net > wrote:
>[color=green][color=darkred]
>>>> The line-height is normally a little bit larger, typically about 1.15
>>>> times larger.
>>>
>>>I would say 1.2 is closer to typical browser defaults.[/color]
>>
>> I set a font-size of 60px and took screenshots in IE6, FF1 and Opera
>> 7.54. The distance between adjacent baselines was 67px in IE6 and
>> Opera and 69px in Firefox.[/color]
>
>How did you measure the distance between baselines?[/color]

I took screenshots and measured the distance in PhotoShop.
[color=blue][color=green]
>> That's a default line-height of (approx)
>> 1.12 for IE and Opera and (exactly) 1.15 for Firefox.[/color]
>
>I did a simple test with a paragraph of text, duplicated in two p elements,
>with the style sheet
>p { width: 40%; float: left; border: solid red 1px}
>and with line-height set for the second p element explicitly. For 60px
>Arial, on IE6, the paragraphs are identical when the setting for the second
>paragraph is line-height: 1.12. But, for example,
>- for Arial Unicode MS at 12pt size, line-height: 1.3 makes the paragraphs
> appear similarly to each other[/color]

One could hazard a guess that Arial Unicode, having a larger repetoire
of characters, has some glyphs that are "larger".

That implies that when the spec talks about line-height thus: "The
used value of the property is this number multiplied by the element's
font size" it is deliberately being vague when it says font size
(note, not font-size).

Which I think brings us back to the very good point you made about
1.12 and 1.12em not being the same.
[color=blue]
>- for Times New Roman at 12pt size, line-height: 1.2 creates a match (and
> so does 1.16).[/color]

Assuming you're using a browser where 12pt = 16px then 1.2 = 19.2 and
1.16 = 18.56, so one would hope that they would both round off to
19px. That's one of the reasons I used a large font size for my tests.
[color=blue]
>So the situation really varies, by font family among other things.[/color]

So we can conclude that fonts vary. Who'd have guessed? ;-)

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

**Jan Roland Eriksson** · Jul 21 '05, 12:59 AM

Re: Sizing Question: versus margin: 1em

On Mon, 31 Jan 2005 13:33:30 +0000, Steve Pugh <steve@pugh.net > wrote:
[color=blue]
>"Jukka K. Korpela" <jkorpela@cs.tu t.fi> wrote:[/color]
[color=blue][color=green]
>>Steve Pugh <steve@pugh.net > wrote:[color=darkred]
>>> The line-height is normally a
>>> little bit larger, typically about 1.15 times larger.[/color][/color][/color]
[color=blue][color=green]
>>I would say 1.2 is closer to typical browser defaults.[/color][/color]
[color=blue]
>I set a font-size of 60px and took screenshots in IE6, FF1 and Opera
>7.54. The distance between adjacent baselines was 67px in IE6 and
>Opera and 69px in Firefox. That's a default line-height of (approx)
>1.12 for IE and Opera and (exactly) 1.15 for Firefox.[/color]
[...][color=blue]
>...the top of ascender to bottom of descender (using h and p)
>distance was 55px in all three browsers.[/color]

Maybe it should be noted that western typographical conventions calls
for the use of the char sequence Ép to determine the size of a font.
[color=blue]
>The last point may be important. If font-size: 60px gives text where
>most characters fit inside a box 55px tall then the line-height will
>_appear_ to be about 1.2[/color]

Does this following article have any influx on your studies?

http://www.css.nu/articles/line-height.html

--
Rex

**Steve Pugh** · Jul 21 '05, 01:00 AM

Re: Sizing Question: versus margin: 1em

Jan Roland Eriksson <jrexon@newsguy .com> wrote:[color=blue]
>On Mon, 31 Jan 2005 13:33:30 +0000, Steve Pugh <steve@pugh.net > wrote:[color=green]
>>
>>I set a font-size of 60px and took screenshots in IE6, FF1 and Opera
>>7.54. The distance between adjacent baselines was 67px in IE6 and
>>Opera and 69px in Firefox. That's a default line-height of (approx)
>>1.12 for IE and Opera and (exactly) 1.15 for Firefox.[/color]
>[...][color=green]
>>...the top of ascender to bottom of descender (using h and p)
>>distance was 55px in all three browsers.[/color]
>
>Maybe it should be noted that western typographical conventions calls
>for the use of the char sequence Ép to determine the size of a font.[/color]

Indeed. I measured that value as well and for font-size: 60px it was
66px in all three browsers.
[color=blue][color=green]
>>The last point may be important. If font-size: 60px gives text where
>>most characters fit inside a box 55px tall then the line-height will
>>_appear_ to be about 1.2[/color]
>
>Does this following article have any influx on your studies?
>
> http://www.css.nu/articles/line-height.html[/color]

It's something that I've read in the past (and Eric Meyer's much more
in depth study that it links to). I don't think anything there dirctly
adds to or contradicts what I stated but is good background material
on the subject of line-height in general.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

**Axel Dahmen** · Jul 21 '05, 01:00 AM

Re: Sizing Question: versus margin: 1em

Hi, Steve,

thanks for helping me!! :)

So there is no unit representing line-height? This brings me then to some
curious thought: How can a paragraph's margin possibly be defined to give a
straight layout in a two column text like:

asdjfök ajks öjklö
dsf dfs gaerh sadfas
fffd fd
dfas dfr jkgfh hjjkfg
fasf df fasdfdfasf

without such unit?

Axel

---------------------------------------
"Steve Pugh" <steve@pugh.net > schrieb im Newsbeitrag
news:i9rqv01ccg 0i5m8lmi15k327p 9alk2fmdp@4ax.c om...[color=blue]
> "Axel Dahmen" <NO_SPAM@NoOneK nows.invalid> wrote:
>[color=green]
> >I always thought that "1em" equals one line height.[/color]
>
> No, it equals the height of the font. The line-height is normally a
> little bit larger, typically about 1.15 times larger.
>[color=green]
> >But if I replace
> > <hr> 
> >by
> > <hr style="margin: 1em 0;">
> >
> >tables above and below the <hr> get closer in IE as well as FF.[/color]
>
> Of course as there are no lines of text to be broken by the s the
> first example it's possible that some browsers will ignore the s
> and hence the second example will create larger spaces. There's also
> the possibility of different default margin sizes for <hr> in
> different browsers. So you're not really comparing like with like.
>[color=green]
> >This brings me to the question: What's a , expressed in CSS*?[/color]
>
> Nothing. is a line break. There's CSS to control where an element
> can insert line breaks but line breaks by definition have no size or
> anything else that could be styled.
>
> Steve
>
> --
> "My theories appal you, my heresies outrage you,
> I never answer letters and you don't like my tie." - The Doctor
>
> Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>[/color]

**Jonathan N. Little** · Jul 21 '05, 01:01 AM

Re: Sizing Question: versus margin: 1em

Steve Pugh wrote:
[color=blue]
> "Axel Dahmen" <NO_SPAM@NoOneK nows.invalid> wrote:
>
>[color=green]
>>I always thought that "1em" equals one line height.[/color]
>
>
> No, it equals the height of the font. The line-height is normally a
> little bit larger, typically about 1.15 times larger.
>
>[/color]

Well it's a fine point, but no 'em' does not equal the 'line-height' of
a font, but the 'width' of the font's capital 'M'. This can vary among
fonts of the same size depending on the font's characteristics . 1em for
a 12pt 'Wide Latin' will be different than a compressed font like 1em of
12pt 'Impact'.

em=width of 'M' character
en=width of 'N' character
px=1 pixel dependent on device resolution
pt=approx 1/72 of an inch, computers use 1/72 I believe***
cm=1 centimeters...

***Unfortunatel y at present I have found different OS's and browsers can
wildly 'disagree' on the size of the same font displayed at the same
resolution when specified in points! We can only hope in time... ;-)

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

Little Works Studio Site Maintainance

http://www.LittleWorksStudio.com

**Andreas Prilop** · Jul 21 '05, 01:01 AM

Re: Sizing Question: versus margin: 1em

On Thu, 3 Feb 2005, Jonathan N. Little wrote:
[color=blue]
> Well it's a fine point, but no 'em' does not equal the 'line-height' of
> a font, but the 'width' of the font's capital 'M'. This can vary among
> fonts of the same size depending on the font's characteristics . 1em for
> a 12pt 'Wide Latin' will be different than a compressed font like 1em of
> 12pt 'Impact'.
> em=width of 'M' character
> en=width of 'N' character[/color]

Sorry, but this is nonsense. It's only a *historical* explanation of
the terms "em" and "en". Today, em = font size and en = half font size.

Please refer to <news:comp.font s> .

--
Mars, unlike Earth, has no atmosphere.
The Chicago manual of style, 15th ed., p. 362

**Steve Pugh** · Jul 21 '05, 01:01 AM

Re: Sizing Question: versus margin: 1em

"Jonathan N. Little" <lws4art@centra lva.net> wrote:[color=blue]
>Steve Pugh wrote:[color=green]
>> "Axel Dahmen" <NO_SPAM@NoOneK nows.invalid> wrote:
>>[color=darkred]
>>>I always thought that "1em" equals one line height.[/color]
>>
>> No, it equals the height of the font. The line-height is normally a
>> little bit larger, typically about 1.15 times larger.[/color]
>
>Well it's a fine point, but no 'em' does not equal the 'line-height' of
>a font,[/color]

I already said that it didn't. It equals the height of the font.
[color=blue]
> but the 'width' of the font's capital 'M'.[/color]

Not any more it doesn't. It originally did 2000 years ago but it
hasn't done so for some time.
[color=blue]
> This can vary among
>fonts of the same size depending on the font's characteristics . 1em for
>a 12pt 'Wide Latin' will be different than a compressed font like 1em of
>12pt 'Impact'.[/color]

No, the em is dependent on the height of the font, not on the width of
any particular character (think of all the fonts that don't contain a
glyph for M).

The CSS definitions for the various length units can be found at
<http://www.w3.org/TR/CSS21/syndata.html#le ngth-units>

For a more general explanation of what the em is in modern typography
see, for example, <http://en.wikipedia.or g/wiki/Em_(typography) >
[color=blue]
>en=width of 'N' character[/color]

No such unit in CSS.
[color=blue]
>px=1 pixel dependent on device resolution[/color]

In CSS the px unit is defined differently but browsers ignore this and
treat 1px as one screen pixel.
[color=blue]
>pt=approx 1/72 of an inch, computers use 1/72 I believe***[/color]

In CSS 1pt is exactly 1/72 of an inch. Computers have different ways
of working out how many pixels 1 inch equals.
[color=blue]
>***Unfortunate ly at present I have found different OS's and browsers can
>wildly 'disagree' on the size of the same font displayed at the same
>resolution when specified in points! We can only hope in time... ;-)[/color]

Most browsers don't bother to work out what the resolution is and then
to work out how many pixels and inch should be. Instead they assume
that a fixed number of pixels equals one inch. Most modern browsers
say that 96px = 1 inch, so 12pt = 96/72 * 12 = 16 pixels, the default
in most browsers. Some older Mac browsers use 72px = 1 inch. Other
values are also used.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

**Axel Dahmen** · Jul 21 '05, 01:02 AM

**Darin McGrew** · Jul 21 '05, 01:02 AM

Re: Sizing Question: versus margin: 1em

Axel Dahmen <NO_SPAM@NoOneK nows.invalid> wrote:[color=blue]
> But if there is no such unit representing line-height then, how can a
> paragraph's margin possibly be defined to give a straight layout in a multi
> column text like it's used in print media like magazines:
>
> -------------------------------
> | asdjfök | ajks öjklö |
> | dsf dfs | gaerh sadfas |
> | fffd fd | |
> | dfas dfr | jkgfh hjjkfg |
> | fasf df | fasdfdfasf |
> -------------------------------
>
> ?[/color]

I'm assuming that you want the space between the paragraphs on the right to
match the line-height of the paragraph on the left, so the lines of text on
the left stay aligned with the lines of text on the right.

If you set the line-height to a ratio (e.g., "line-height: 1.25") or to an
em-based value (e.g., "line-height: 1.25em"), then you can use an em-based
value for the margins/padding between the paragraphs (e.g., 1.25em).
--
Darin McGrew, mcgrew@stanford alumni.org, http://www.rahul.net/mcgrew/
Web Design Group, darin@htmlhelp. com, http://www.HTMLHelp.com/

"Cheaters never win; they just finish first." - Johhny Hart

Sizing Question: <br> versus margin: 1em

Sizing Question: <br> versus margin: 1em

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment