CSS: Width ex

By Xah Lee. Date: 2006-10-30

The ex is supposed to mean the height of the font for the lowercase letter x.

However, either due to browser's non-compliant implementations, or due to the imprecision or the inherient ambiguity of “height of x” in the printing community, there are some discrepancies in rendering width specified by ex. Here are several example of width:ex, with different fonts.

In the following, all blocks have the style border:thin black solid; width:10ex so that a border is drawn with width 10ex. The difference is that each block uses different font, whose values are shown at the end of the line. (View HTML Source for code)

 xxxx xxxx courier

 xxxx xxxx times

 xxxx xxxx arial

In the following, the width are made to be 1 ex, and the font-size are enlarged, so that we can see exactly what is happening.

xxxx courier

xxxx times

xxxx arial

Firefox Bug

In the following, we have “width:70ex” and the font used is courier.

this is 70 chars
 123456789 123456789 123456789 123456789 123456789 123456789 123456789
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

When rendered in Safari, the box cuts into the last x. When rendered in Firefox, the box cuts right in between the 51th and 52th characters, a dramatic difference.

This means, according to Firefox, the height of 70 x is much less than the width of 70 x. To be exact, shorter by 19 widths of x.

It may be correct that courier's x's height is less than its width. However, Firefox's behavior is too large to be correct.

In Opera, the box cuts perfectly at the end margin of last x, meaning that to Opera, the height and width of Courier's x is identical.

Browser versions (all on the Mac): Safari 2.0.4 (419.3), “Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7”, “Opera 9.01, build 3489, Mac OS X 10.4.8”.