Thursday, March 16, 2006

How Many Pixels in an EM?

In the interest of creating CSS-only layouts, it often makes sense to emulate CSS properties that IE doesn't support by using IE-only expressions. An example is the work of Svend Tofte in emulating max-width, which I reference quite often even though it is now 2 years old. I recently created a min-width expression based on this. Here is Svend's expression for max-width:

width:expression( document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)? "30em": "auto" );

Quite nice, but requires a bit of experimentation to get it to work right. In Svend's words:

Basically, with document.body.clientWidth, we get how wide the browser
window is. Using parseInt(document.body.currentStyle.fontSize), we get the font
size in pt's, that the user has currently set. I experimented, and at 12pts (the
normal size), the browser window gets wider then 30em's, at more or less 500
pixels. Of course, it's then a small matter, of calculating backwards, in the
scale, and see, if that if the default font size is 14pt (larger), then 30em's
will be exceeded at 583 pixels (roughly). The sad thing is, that you will need
to find the magic number, for whatever width you want for your letters. For
30ems, 500 pixels is the magic number.

Just as a reference for myself, I began tabulating the width of a 1em-wide div at various font sizes. In other words, I took screen captures and measured them in Photoshop.

font-size: 500pt;


This yields a div that is 667 pixels wide.

Then I realized that if I graphed the pixel width of the div versus the font size in ems, a nice curve emerged, which meant to me that there must be a common factor. So, I took the pixel width of the largest measurement and divided it by the pt size of the font:

667px/500pt = 1.334

A little bit of algebra yields the formulae:

px per em = 1.334 * pts


px = ems*1.334*pts

I tested this out in IE and Firefox with serif, sans-serif, and monospaced font families, and it holds true regardless of font size. Applying it to Svend's original expression gives me the following max-width expression (where the desired max-width = 30em):

width:expression( document.body.clientWidth > (30*1.334)*
parseInt(document.body.currentStyle.fontSize)? "30em": "auto" );

Hope you like it... Please comment if you find it doesn't work for you!

Was this post helpful to you? If so, please consider making a small donation to keep this blog going.


Anonymous Jan! said...

What happens if you set the font size to large? Not in the browser, but in the OS itself. That changes the dpi, and I wouldn't be surprised if that renders your formula invalid. Hardcoding things is almost always a bad idea.

12:52 AM  
Blogger tom said...

A quick test shows that the formulas hold true even when the font size is changed on the OS level. Changing the font size for the OS doesn't change the dpi of your display.

However, you do raise a really good point: the number of pixels per em does change with the screen resolution. I'll devote another post to this so it doesn't get buried in the comments.

7:35 AM  
Anonymous Anonymous said...

Couldn't you have just used 96dpi/72dpi to get 1.3333 pixels per EM unit?

11:47 AM  
Anonymous Anonymous said...


10:17 AM  
Anonymous Anonymous said...

看房子,買房子,建商自售,自售,台北新成屋,台北豪宅,新成屋,豪宅,美髮儀器,美髮,儀器,髮型,EMBA,MBA,學位,EMBA,專業認證,認證課程,博士學位,DBA,PHD,在職進修,碩士學位,推廣教育,DBA,進修課程,碩士學位,網路廣告,關鍵字廣告,關鍵字,廣告,課程介紹,學分班,文憑,牛樟芝,段木,牛樟菇,日式料理, 台北居酒屋,燒肉,結婚,婚宴場地,推車飲茶,港式點心,尾牙春酒,台北住宿,國內訂房,台北HOTEL,台北婚宴,飯店優惠,台北結婚,婚宴場地,推車飲茶,港式點心,尾牙春酒,住宿,訂房,HOTEL,飯店,造型系列,學位,牛樟芝,腦磷脂,磷脂絲胺酸,SEO,婚宴,捷運,學區,美髮,儀器,髮型,牛樟芝,腦磷脂,磷脂絲胺酸,看房子,買房子,建商自售,自售,房子,捷運,學區,台北新成屋,台北豪宅,新成屋,豪宅,學位,碩士學位,進修,在職進修, 課程,教育,學位,證照,mba,文憑,學分班,網路廣告,關鍵字廣告,關鍵字,SEO,关键词,网络广告,关键词广告,SEO,关键词,网络广告,关键词广告,SEO,台北住宿,國內訂房,台北HOTEL,台北婚宴,飯店優惠,住宿,訂房,HOTEL,飯店,婚宴,台北住宿,國內訂房,台北HOTEL,台北婚宴,飯店優惠,住宿,訂房,HOTEL,飯店,婚宴,台北住宿,國內訂房,台北HOTEL,台北婚宴,飯店優惠,住宿,訂房,HOTEL,飯店,婚宴,結婚,婚宴場地,推車飲茶,港式點心,尾牙春酒,台北結婚,婚宴場地,推車飲茶,港式點心,尾牙春酒,結婚,婚宴場地,推車飲茶,港式點心,尾牙春酒,台北結婚,婚宴場地,推車飲茶,港式點心,尾牙春酒,結婚,婚宴場地,推車飲茶,港式點心,尾牙春酒,台北結婚,婚宴場地,推車飲茶,港式點心,尾牙春酒,居酒屋,燒烤,美髮,儀器,髮型,美髮,儀器,髮型,美髮,儀器,髮型,美髮,儀器,髮型,小套房,小套房,進修,在職進修,留學,證照,MBA,EMBA,留學,MBA,EMBA,留學,進修,在職進修,牛樟芝,段木,牛樟菇,住宿,民宿,飯宿,旅遊,住宿,民宿,飯宿,旅遊,住宿,民宿,飯宿,旅遊,住宿,民宿,飯宿,旅遊,住宿,民宿,飯宿,旅遊,住宿,民宿,飯宿,旅遊,住宿,民宿,飯宿,旅遊,美容,美髮,整形,造型,美容,美髮,整形,造型,美容,美髮,整形,造型,美容,美髮,整形,造型,美容,美髮,整形,造型,美容,美髮,整形,造型,美容,美髮,整形,造型,設計,室內設計,裝潢,房地產,設計,室內設計,裝潢,房地產,設計,室內設計,裝潢,房地產,設計,室內設計,裝潢,房地產,設計,室內設計,裝潢,房地產,設計,室內設計,裝潢,房地產,設計,室內設計,裝潢,房地產,設計,室內設計,裝潢,房地產,進修,在職進修,MBA,EMBA,進修,在職進修,MBA,EMBA,進修,在職進修,MBA,EMBA,進修,在職進修,MBA,EMBA,進修,在職進修,MBA,EMBA,進修,在職進修,MBA,EMBA,進修,在職進修,MBA,EMBA,住宿,民宿,飯店,旅遊,美容,美髮,整形,造型,設計,室內設計,裝潢,房地產,進修,在職進修,MBA,EMBA,關鍵字排名,網路行銷,关键词排名,网络营销,網路行銷,關鍵字排名,关键词排名,网络营销,羅志祥,周杰倫,五月天,蔡依林,林志玲,羅志祥,周杰倫,五月天,蔡依林,林志玲,PMP,在職專班,研究所在職專班,碩士在職專班,PMP,證照,在職專班,研究所在職專班,碩士在職專班,網頁設計,網站設計,網頁設計,網站設計,网页设计,网站设计,网站设计,网页设计

12:59 AM  

Post a Comment

Links to this post:

Create a Link

<< Home