CSS's “ex” Width In Different Browsers
CSS provides several units for measuring length. For example, by screen pixel, by millimeter, by pica, by em, by ex. 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 rending 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.
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:126.96.36.199) Gecko/20060909 Firefox/188.8.131.52”, “Opera 9.01, build 3489, Mac OS X 10.4.8”.
Ask me question on patreon