Paragraph. Em and Px

In article <hbgrdb$ksa$1 (AT) news (DOT) eternal-september.org>,
C A Upsdell <cupsdell (AT) nospam (DOT) not> wrote:

dorayme wrote:
There is a view that ex units should be used instead of em units. I
have recently found that using ex instead of em fixed some cross-browser
issues. See:

http://kb.mozillazine.org/Em_units_versus_ex_units

It is all precious nonsense. It does not matter about small variations
and if it concerns anyone, they are obsessing about the wrong things.

What I was "obsessing about", which I solved by switching a particular
dimension from em to ex units, was a problem with a CSS-based dropdown
menu: with Opera, when the user pointed to a menu item, then moved the
cursor down to the associated dropdown menu, the dropdown menu sometimes
disappeared. IMO such a problem in a website is not unimportant.

I agree that in the area of dropdown menus, one sometimes needs all the
help one can get, they can be tricky beasts and it cannot hurt to keep
in mind your thought to use ex if one runs into cross browser problems.

But without a specific case, it is hard to know in advance. One of the
things you tend to run into in dropdown menus is wrap and height
problems and using the ex might simply be a more reliable way just for
these problems. I have no idea how it might affect or generate other
problems though?

--
dorayme

Jukka K. Korpela wrote:

C A Upsdell wrote:

I was more interested in fixing the problem than in determining
exactly why the switch to ex units worked, but my suspicion is this:
In the CSS used to implement the dropdown menu, a mixture of em and
ex units was used,

Stop right there. There you have the problem, fix it. Don't assume that
em and ex units have some specific relationship to each other. They
don't. We know that some browsers use ex = 0.5em whereas some browsers
correctly treat ex as the x-height. This can make a considerable
difference.

This is far more important than some assumed bugs in rounding.

I do not assume a bug in rounding. I *suspect* a difference in how
Opera handles ex and em units.

dorayme wrote:

In article <hbgrdb$ksa$1 (AT) news (DOT) eternal-september.org>,
C A Upsdell <cupsdell (AT) nospam (DOT) not> wrote:

dorayme wrote:
There is a view that ex units should be used instead of em units. I
have recently found that using ex instead of em fixed some cross-browser
issues. See:

http://kb.mozillazine.org/Em_units_versus_ex_units
It is all precious nonsense. It does not matter about small variations
and if it concerns anyone, they are obsessing about the wrong things.
What I was "obsessing about", which I solved by switching a particular
dimension from em to ex units, was a problem with a CSS-based dropdown
menu: with Opera, when the user pointed to a menu item, then moved the
cursor down to the associated dropdown menu, the dropdown menu sometimes
disappeared. IMO such a problem in a website is not unimportant.

I agree that in the area of dropdown menus, one sometimes needs all the
help one can get, they can be tricky beasts and it cannot hurt to keep
in mind your thought to use ex if one runs into cross browser problems.

But without a specific case, it is hard to know in advance. One of the
things you tend to run into in dropdown menus is wrap and height
problems and using the ex might simply be a more reliable way just for
these problems. I have no idea how it might affect or generate other
problems though?

I will both strengthen and weaken my suspicions:

1. Applying the same solution -- actually a refinement of my original
solution, using only multiples of 0.5ex units for dimensions -- fixed a
perplexing problem in another site's dropdown menu: the menu worked,
but there were visual anomalies with some browsers, and applying the
refined solution *completely* eliminated the anomalies.

2. I applied the same solution to yet another menu -- as an experiment
because the menu worked just fine as it was, albeit with a few
unimportant visual anomalies-- using only multiples of 0.5ex units, or
only multiples of 1ex units: but applying the same solution was not
helpful.

I have not formed any definite conclusion except that, if I have
problems with a vertical menu, I should at least *try* the same
solution, and see what happens.

On 19 oct, 00:54, C A Upsdell <cupsd... (AT) nospam (DOT) not> wrote:

dorayme wrote:
There is a view that ex units should be used instead of em units. *I
have recently found that using ex instead of em fixed some cross-browser
issues. *See:

* * *http://kb.mozillazine.org/Em_units_versus_ex_units

{
At "normal" font sizes (the defaults on Windows systems, and possibly
Linux and others), 1 em is 10.06667 pixels, and 1 ex is 6 pixels.
}

That's not true. In IE (all versions), the "normal" default font size
is 16px. And if 1em is 16px, then 1ex exact font-size expressed in
pixels depends on the font family in use:

x-height of a font
http://www.cs.tut.fi/~jkorpela/x-height.html

x-height, font aspect value, font-size-adjust
http://brunildo.org/test/xheight.pl

Aspect values for web fonts: Some results
http://www.barrypearson.co.uk/articles/text/aspect_values.htm

It is all precious nonsense. It does not matter about small variations
and if it concerns anyone, they are obsessing about the wrong things.

What I was "obsessing about", which I solved by switching a particular
dimension from em to ex units, was a problem with a CSS-based dropdown
menu: *with Opera, when the user pointed to a menu item, then moved the
cursor down to the associated dropdown menu, the dropdown menu sometimes
disappeared. *IMO such a problem in a website is not unimportant.

I was more interested in fixing the problem than in determining exactly
why the switch to ex units worked, but my suspicion is this: *In the CSS
used to implement the dropdown menu, a mixture of em and ex units was
used, and Opera likely handles the relationship between em and ex units
differently from other browsers, which sometimes resulted in a small
vertical gap between the menu item and its associated dropdown menu. A
small gap would normally not be important, but it was important here
because, when the cursor fell into the gap, the cursor no longer
:hovered over the menu item or dropdown menu, and so the dropdown menu
naturally disappeared. *Switching completely to ex units renders
irrelevant any difference in the relationship between em and ex units.

Correct support for ex unit (and vertical-align) in browsers, in
particular Opera 9+ and IE7, is very buggy.

http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/VerticalAlignMiddleBug.html

http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/VerticalAlignMiddleBug-3.html

http://www.gtalbot.org/BrowserBugsSection/css21testsuite/background-position-001.html

http://www.gtalbot.org/BrowserBugsSection/css21testsuite/background-position-002.html


IE 8 still has a bug with ex unit.

http://www.gtalbot.org/BrowserBugsSection/css21testsuite/font-size-001.html

Webkit has a bug report on ex:

Incorrect implementation of 'ex' unit
https://bugs.webkit.org/show_bug.cgi?id=16362


I don't recommend to use ex unit for all those reasons.

regards, Gérard
--
Internet Explorer 8 bugs: 57 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
Internet Explorer 7 bugs: 183 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

GTalbot wrote:

On 19 oct, 00:54, C A Upsdell <cupsd... (AT) nospam (DOT) not> wrote:
dorayme wrote:
There is a view that ex units should be used instead of em units. I
have recently found that using ex instead of em fixed some cross-browser
issues. See:
http://kb.mozillazine.org/Em_units_versus_ex_units

{
At "normal" font sizes (the defaults on Windows systems, and possibly
Linux and others), 1 em is 10.06667 pixels, and 1 ex is 6 pixels.
}

That's not true. In IE (all versions), the "normal" default font size
is 16px. And if 1em is 16px, then 1ex exact font-size expressed in
pixels depends on the font family in use:

Confirmed. I created a test page earlier today which computes em and ex
values, and I found these interesting results:

With FF 3.5 running on Windows XP, when an em is 16px, the ex sizes for
Arial, Tahoma, Times New Roman, and Verdana are:

9px 9px 7px 9px

When the size is reduced using font-size:small, the em size is 13px, and
the ex sizes are:

7px 7px 6px 7px

With IE 7, also running on Windows XP, when an em is 16px, the ex sizes are:

8px 8px 8px 8px

When the size is reduced using font-size:small, the em size is 13.33px,
and the ex sizes are:

6.67px 6.67px 6.67px 6.67px

With Opera 10, also running on Windows XP, when an em is 16px, the ex
sizes are:

8px 8px 8px 8px

When the size is reduced using font-size:small, the em size is 13px, and
the ex sizes are:

6.5px 6.5px 6.5px 6.5px

Clearly FF, IE, and Opera use different methods of calculating ex
values, and different methods of calculating the small font size. I
don't like to generalize based on only 4 fonts on one platform, but it
would *appear* that:

1. IE and Opera set the ex value to half the em value.

2. FF sets the ex value to different fractions of the em value,
depending on the font (which is probably more correct).

3. IE makes no attempt to make the ex value an integer, nor does it
make any attempt to make the em value for small fonts an integer.

4. FF and Opera *may* be trying to set the em value for small fonts and
integer, though this is scarcely certain.

In article <hbqonf$79u$1 (AT) news (DOT) eternal-september.org>,
C A Upsdell <cupsdell (AT) nospam (DOT) not> wrote:

GTalbot wrote:
On 19 oct, 00:54, C A Upsdell <cupsd... (AT) nospam (DOT) not> wrote:
dorayme wrote:
There is a view that ex units should be used instead of em units. I
have recently found that using ex instead of em fixed some cross-browser
issues. See:
http://kb.mozillazine.org/Em_units_versus_ex_units

{
At "normal" font sizes (the defaults on Windows systems, and possibly
Linux and others), 1 em is 10.06667 pixels, and 1 ex is 6 pixels.
}

That's not true. In IE (all versions), the "normal" default font size
is 16px. And if 1em is 16px, then 1ex exact font-size expressed in
pixels depends on the font family in use:

Confirmed.

So, when I earlier said in this thread:

"Just try this to see how wrong this sounds:

..pixelSet {font-size:10px;}
..emSet {font-size:1em;}

with

<p class="pixelSet">This is font-size: 10px</p>
<p class="emSet">This is font-size: 1em</p>"

it is more than merely sounding wrong to me on my silly Mac.

--
dorayme

On 22 Oct, 22:08, GTalbot <newsgr... (AT) gtalbot (DOT) org> wrote:

That's not true. In IE (all versions), the "normal" default font size
is 16px.

Doesn't that depend on the Windows desktop too, and the font scaling
applied there (Display|Properties|Large Fonts)

On Oct 22, 7:09*pm, C A Upsdell <cupsd... (AT) nospam (DOT) not> wrote:

GTalbot wrote:
On 19 oct, 00:54, C A Upsdell <cupsd... (AT) nospam (DOT) not> wrote:
dorayme wrote:
There is a view that ex units should be used instead of em units. *I
have recently found that using ex instead of em fixed some cross-browser
issues. *See:
* * *http://kb.mozillazine.org/Em_units_versus_ex_units

{
At "normal" font sizes (the defaults on Windows systems, and possibly
Linux and others), 1 em is 10.06667 pixels, and 1 ex is 6 pixels.
}

That's not true. In IE (all versions), the "normal" default font size
is 16px. And if 1em is 16px, then 1ex exact font-size expressed in
pixels depends on the font family in use:

Confirmed. *I created a test page earlier today which computes em and ex
values, and I found these interesting results:

With FF 3.5 running on Windows XP, when an em is 16px, the ex sizes for
Arial, Tahoma, Times New Roman, and Verdana are:

* * *9px 9px 7px 9px

When the size is reduced using font-size:small, the em size is 13px, and
the ex sizes are:

* * *7px 7px 6px 7px

With IE 7, also running on Windows XP, when an em is 16px, the ex sizes are:

* * *8px 8px 8px 8px

When the size is reduced using font-size:small, the em size is 13.33px,
and the ex sizes are:

* * *6.67px 6.67px 6.67px 6.67px

With Opera 10, also running on Windows XP, when an em is 16px, the ex
sizes are:

* * *8px 8px 8px 8px

When the size is reduced using font-size:small, the em size is 13px, and
the ex sizes are:

* * *6.5px 6.5px 6.5px 6.5px

Clearly FF, IE, and Opera use different methods of calculating ex
values, and different methods of calculating the small font size. *I
don't like to generalize based on only 4 fonts on one platform, but it
would *appear* that:

1. *IE and Opera set the ex value to half the em value.

2. *FF sets the ex value to different fractions of the em value,
depending on the font (which is probably more correct).

3. *IE makes no attempt to make the ex value an integer, nor does it
make any attempt to make the em value for small fonts an integer.

4. *FF and Opera *may* be trying to set the em value for small fonts and
integer, though this is scarcely certain.- Hide quoted text -

- Show quoted text -

I'm glad we have standards or all this would be most confusing to a
beginner like me!

www.richardfisher.com

On 22 oct, 19:09, C A Upsdell <cupsd... (AT) nospam (DOT) not> wrote:

GTalbot wrote:
On 19 oct, 00:54, C A Upsdell <cupsd... (AT) nospam (DOT) not> wrote:
dorayme wrote:
There is a view that ex units should be used instead of em units. *I
have recently found that using ex instead of em fixed some cross-browser
issues. *See:
* * *http://kb.mozillazine.org/Em_units_versus_ex_units

{
At "normal" font sizes (the defaults on Windows systems, and possibly
Linux and others), 1 em is 10.06667 pixels, and 1 ex is 6 pixels.
}

That's not true. In IE (all versions), the "normal" default font size
is 16px. And if 1em is 16px, then 1ex exact font-size expressed in
pixels depends on the font family in use:

Confirmed. *I created a test page earlier today which computes em and ex
values, and I found these interesting results:

With FF 3.5 running on Windows XP, when an em is 16px, the ex sizes for
Arial, Tahoma, Times New Roman, and Verdana are:

* * *9px 9px 7px 9px

When the size is reduced using font-size:small, the em size is 13px, and
the ex sizes are:

* * *7px 7px 6px 7px

With IE 7, also running on Windows XP, when an em is 16px, the ex sizes are:

* * *8px 8px 8px 8px

Charles,

It may not be reliable to test IE 7 and then conclude or generalize.
IE 7 is buggy with the ex unit.

Here's a test case I did in a bug on ex unit at connect IE beta
feedback:

Bug 409460: Accurate ex unit implementation in IE 7
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=409460

Test case:
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/accurate-ex-unit-implementation.html

which is passed by IE 8

The decisive issue was the loose specification of ex unit

{
Some fonts contain reliable metrics for the x-height. If reliable font
metrics are not available, UAs may determine the x-height from the
height of a lowercase glyph. One possible heuristic is to look at how
far the glyph for the lowercase "o" extends below the baseline, and
subtract that value from the top of its bounding box. In the cases
where it is impossible or impractical to determine the x-height, a
value of 0.5em should be used.
}
CSS 2.1, section 4.3.2 Lengths, ex unit
http://www.w3.org/TR/CSS21/syndata.html#length-units

Recent font now include the value sxHeight (meaning small x height)
[1] embedded in their file: this is the info that is referred to when
stating "reliable metrics". Old font do not have a sxHeight data.
Also, for performance purposes ("impractical"), small web-aware
devices do not have to process such values and will use 0.5em

There is a font/typographic inspecting software from Microsoft called
ttfdump.exe
( http://www.microsoft.com/typography/tools/tools.aspx )
which allows anyone to examine the file of fonts on his system and he
will know immediately if the sxHeight value is available.

[1]
sxHeight is defined here:

http://partners.adobe.com/public/developer/opentype/index_os2.html#xh

To use ttfdump.exe:
ttfdump filename -tOS/2 -nx -h

ex unit implementation in IE 8, ttfdump, sxHeight discussion here:
http://blogs.msdn.com/ie/archive/2009/01/27/microsoft-submits-thousands-more-css-2-1-tests-to-the-w3c.aspx#9397177

When the size is reduced using font-size:small, the em size is 13.33px,
and the ex sizes are:

* * *6.67px 6.67px 6.67px 6.67px

With Opera 10, also running on Windows XP, when an em is 16px, the ex
sizes are:

* * *8px 8px 8px 8px

When the size is reduced using font-size:small, the em size is 13px, and
the ex sizes are:

* * *6.5px 6.5px 6.5px 6.5px

Clearly FF, IE, and Opera use different methods of calculating ex
values, and different methods of calculating the small font size. *I
don't like to generalize based on only 4 fonts on one platform, but it
would *appear* that:

1. *IE and Opera set the ex value to half the em value.

You must mean IE 7 here. IE 8 does not set the ex value to half the em
value. Please try
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/accurate-ex-unit-implementation.html

Some other tests:

Test 2 and test 3 at:

http://www.richinstyle.com/test/keyconcepts/ex.html

(the "x"s should be as high as the dark greenish rectangle images on
their right side. The test is similar to the first/top part/section of

http://www.damowmow.com/playground/bugs/tests/ex.html

and there is several tests involving ex unit at

IE test center (for CSS):
http://samples.msdn.microsoft.com/ietestcenter/css.htm

2. *FF sets the ex value to different fractions of the em value,
depending on the font (which is probably more correct).

3. *IE makes no attempt to make the ex value an integer, nor does it
make any attempt to make the em value for small fonts an integer.

Again, that must be IE 7, not IE 8.

regards, Gérard
--
Internet Explorer 8 bugs: 57 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
Internet Explorer 7 bugs: 183 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

GTalbot wrote:

On 22 oct, 19:09, C A Upsdell <cupsd... (AT) nospam (DOT) not> wrote:
GTalbot wrote:
On 19 oct, 00:54, C A Upsdell <cupsd... (AT) nospam (DOT) not> wrote:
dorayme wrote:
There is a view that ex units should be used instead of em units. I
have recently found that using ex instead of em fixed some cross-browser
issues. See:
http://kb.mozillazine.org/Em_units_versus_ex_units
{
At "normal" font sizes (the defaults on Windows systems, and possibly
Linux and others), 1 em is 10.06667 pixels, and 1 ex is 6 pixels.
}
That's not true. In IE (all versions), the "normal" default font size
is 16px. And if 1em is 16px, then 1ex exact font-size expressed in
pixels depends on the font family in use:
Confirmed. I created a test page earlier today which computes em and ex
values, and I found these interesting results:

With FF 3.5 running on Windows XP, when an em is 16px, the ex sizes for
Arial, Tahoma, Times New Roman, and Verdana are:

9px 9px 7px 9px

When the size is reduced using font-size:small, the em size is 13px, and
the ex sizes are:

7px 7px 6px 7px

With IE 7, also running on Windows XP, when an em is 16px, the ex sizes are:

8px 8px 8px 8px

Charles,

It may not be reliable to test IE 7 and then conclude or generalize.
IE 7 is buggy with the ex unit.

I have done further, more detailed tests. These indicate that IE 7
(haven't tested the other versions yet) always sets the ex/em ratio to
0.5 exactly. So does Opera 10 (again haven't tested the other versions
yet). Other browsers report different ratios, but it would appear that,
of the browsers I tested, only Safari sets the ratio correctly: FF and
Chrome almost do, except that they set ex sizes to integers, which
introduces distortions.

If you contact me directly -- you have my email address, I know -- I
will give you the URL of a page which has a table reporting the em and
ex sizes for various fonts. You can see yourself what the sizes are for
various browsers.