Friday, March 17, 2006

How Many Pixels in an EM? Part 2

Yesterday, I blogged about a formula I came up with for determining the number of pixels in an em. Jan commented that perhaps this approach isn't such a good idea, because it might break when someone changes the font-size of their OS. This is actually not the case: changing the font-size in your OS doesn't change the pixel size of a point or an em.

However, Jan's comment prompted me to dig a little deeper. Can the size of an em change based on the screen resolution? Turns out, it does. At least according to this article, which I can only assume is correct given my lack of different displays to test it on. About mid-way down the page, in a lovely yellow block, is the following critical information:

Pixels per em is a crucial concept. As much as any other single factor
(such as ex-height), it determines the legibility of characters on screen at a nominal point size. The higher the ppem, the better defined are the characters' features, and the more and larger decrements are possible before hitting the legibility floor. If the ppem of the base size is low, fewer and smaller steps are
possible.

Pixels-per-em refers to the number of screen pixels required to render the em of a font at a size given in points.

A point is 1/72". On a system displaying 72 pixels per logical inch (Mac OS standard ppi), 1 point equals 1 pixel. On a system displaying 96 or 120 ppi (standard Windows settings), 1 point equals 1.333 or 1.667 pixels, respectively. The formula for ppem is a(b/72), where a is the font size, and b is the logical resolution figure.

For example, 12 points at 72 ppi (the legacy Mac OS browser default) or 9 points at 96ppi have a ppem value of 12. Twelve points at 96ppi (the legacy Windows browser default), or 16 points at 72ppi both have a ppem of 16. Twelve points at 90ppi have 15ppem, and 12 points at 120 ppi (Windows "large fonts") have 20ppem.


Nice. This both proves my formula, and puts a monkey wrench in it. If someone has changed their display resolution from the Windows default 96ppi, the formula is no longer accurate.

All is not lost. Since we're dealing with an IE-only expression to begin with, we can take advantage of an IE-only JavaScript property, screen.deviceXDPI. Our expression becomes:

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

This expression would yield a max-width of 30em. Naturally, it couldn't be this easy... Now, the expression no longer works in IE 5 or IE 5.5 because they don't support our new best friend, the deviceXDPI property. Well, I don't have too much of a problem with that. Out of the 5% or so of my visitors who have IE5 or IE5.5, how many of those would also have changed their display DPI? I think not many. But, just so the expression degrades well, let's test for the existence of the deviceXDPI property and adjust accordingly:

width:expression(document.body.clientWidth >
(30*((screen.deviceXDPI?screen.deviceXDPI:96)/72))*
parseInt(document.body.currentStyle.fontSize)? "30em": "auto" );

In this (increasingly long) expression, if screen.deviceXDPI is undefined, the default value of 96ppi is used. That oughtta do it. Comments?

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

11 Comments:

Blogger gray said...

After looking for a pixels per em solution of my own on the net I discovered that one of my other workarounds was defeating the avaliable solutions for IE.

The workaround I was using which was queering the patch was:
to style the body font-size to 100%.

The effect of this workaround is make IE 5, 5.5, 6 and Firefox have an identical default font size. (rather than small, small, medium, medium or whatever it is).

Unfortunately that means
document.body.currentStyle.fontsize always = 1em, or 100% no matter how the font is resized in the menus.

It might me obvious to people who know their DHTML better but to those who know as much as me here it is:

document.body.parentElement.currentStyle.fontsize

It might even be worth making that the default form of your formula.

Generation 3 ??

7:06 AM  
Blogger gray said...

Incidentally - if anyone was wondering about the workaround:

body {font-size: 100%;}

While it does fix default text size quirks in IE it doesn't stop the text-resizing in the menu from working.

In case that's what you thought.

7:09 AM  
Anonymous Anonymous said...

Hand Carved Dog Gifts Hi, found a great gift site for you, all hand carved and great quality.

11:41 AM  
Anonymous Anonymous said...

This is a great Blog! Pardon if I landed on the wrong blog.
As a newbie I just can’t help sharing the following
url with you. It made al the difference to my financial
Situation. For only $7.00 you get your own
ATM Machine. Just follow the link below!

7:44 AM  
Anonymous Anonymous said...

Domin8 MySpace with unique myspace music. Check out www.domin8myspace.com

2:22 AM  
Anonymous Anonymous said...

Domin8 MySpace with unique myspace layouts.

2:45 AM  
Blogger Digital Dreams said...

Hi,
Could you please help me fixing my blog's headef width issue?

The width is perfect in firefox and opera,whereas width is high in IE.

Thanks
publisher-Digital dreams
http://techbeam.blogspot.com

3:22 AM  
Blogger vish said...

Hi,
I am trying to provide multi-lingual support to my product. The Formula suggested in the article is working for european languages but fails for chinese, japenese and korean language. The chinese and japenese strings are not accomodating in the components Can you suggest me formula which can work for both CJK and european languages.
Thanks in advance.
Vishesh

10:56 PM  
Anonymous Anonymous said...

情趣用品,情趣用品,情趣用品,情趣用品,情趣,情趣,情趣,情趣,按摩棒,震動按摩棒,微調按摩棒,情趣按摩棒,逼真按摩棒,G點,跳蛋,跳蛋,跳蛋,性感內衣,飛機杯,充氣娃娃,情趣娃娃,角色扮演,性感睡衣,SM,潤滑液,威而柔,香水,精油,芳香精油,自慰套,自慰,性感吊帶襪,吊帶襪,情趣用品加盟AIO交友愛情館,情人歡愉用品,美女視訊,情色交友,視訊交友,辣妹視訊,美女交友,嘟嘟成人網,成人網站,A片,A片下載,免費A片,免費A片下載愛情公寓,情色,舊情人,情色貼圖,情色文學,情色交友,色情聊天室,色情小說,一葉情貼圖片區,情色小說,色情,色情遊戲,情色視訊,情色電影,aio交友愛情館,色情a片,一夜情,辣妹視訊,視訊聊天室,免費視訊聊天,免費視訊,視訊,視訊美女,美女視訊,視訊交友,視訊聊天,免費視訊聊天室,情人視訊網,影音視訊聊天室,視訊交友90739,成人影片,成人交友,美女交友,微風成人,嘟嘟成人網,成人貼圖,成人電影,A片,豆豆聊天室,聊天室,UT聊天室,尋夢園聊天室,男同志聊天室,UT男同志聊天室,聊天室尋夢園,080聊天室,080苗栗人聊天室,6K聊天室,女同志聊天室,小高聊天室,上班族聊天室,080中部人聊天室,同志聊天室,聊天室交友,中部人聊天室,成人聊天室,一夜情聊天室,情色聊天室,寄情築園小遊戲情境坊歡愉用品,情趣用品,成人網站,情人節禮物,情人節,AIO交友愛情館,情色,情色貼圖,情色文學,情色交友,色情聊天室,色情小說,七夕情人節,色情,情色電影,色情網站,辣妹視訊,視訊聊天室,情色視訊,免費視訊聊天,美女視訊,視訊美女,美女交友,美女,情色交友,成人交友,自拍,本土自拍,情人視訊網,視訊交友90739,生日禮物,情色論壇,正妹牆,免費A片下載,AV女優,成人影片,色情A片,成人論壇,情趣,免費成人影片,成人電影,成人影城,愛情公寓,成人影片,保險套,舊情人,微風成人,成人,成人遊戲,成人光碟,色情遊戲,跳蛋,按摩棒,一夜情,男同志聊天室,肛交,口交,性交,援交,免費視訊交友,視訊交友,一葉情貼圖片區,性愛,視訊,視訊聊天,A片,A片下載,免費A片,嘟嘟成人網,寄情築園小遊戲,女同志聊天室,免費視訊聊天室,一夜情聊天室,聊天室

10:16 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  
Blogger Kevin said...

牙醫,植牙,矯正,紋身,刺青,創業,批發,皮膚科,痘痘,中醫,飛梭雷射,毛孔粗大,醫學美容,seo,關鍵字行銷,關鍵字自然排序,網路行銷,關鍵字自然排序,關鍵字行銷seo,關鍵字廣告,部落格行銷,網路行銷,seo,關鍵字行銷,關鍵字廣告,關鍵字,自然排序,部落格行銷,網路行銷,網路爆紅,牛舌餅婚紗台中婚紗,腳臭,腳臭,腳臭,腳臭,腳臭

11:31 PM  

Post a Comment

Links to this post:

Create a Link

<< Home