Archive for July, 2007

Internet Explorer and 120 dpi

Wednesday, July 18th, 2007

I recently was shocked to discover that changing the dpi in Windows will cause IE to scale the fonts used in a web site if the fonts use relative values (ems, percents). The effect is that the browser no longer uses 96 dpi / 16px font size as a base line, and instead uses 20px as the font base line, causing font sizes to increase, sometimes dramatically. Firefox will continue to use 96 dpi/16px as the baseline regardless of the monitor dpi, so for Firefox changing the monitor dpi will not change the appearance of a web site.

After a lot of searching it began to look like finding a solution was hopeless, until I found an article on MSDN that had examples of how to get the screen resolution and some example JavaScript for scaling the page to compensate (which didn’t work).

However, after playing around with it a bit, I realized I can compensate for the scaling using the expression() function in my style sheet. The final expression is:

font-size: expression(screen.deviceXDPI > 96 ? 1000 / ((screen.deviceXDPI / 96) * 16) + “%” : “62.5%”);

What I’m trying to do is scale the page to a 10px base line so that ems are easier to work with (1.4em = 14px, 2.0 em = 20px, etc). If the screen has a dpi higher than 96, then it recalculate the correct percentage by taking the screen dpi and dividing it by 96 to get the percentage increase (120 / 96 = 1.25 or 125%). It then multiples the percentage by 16 to determine what the baseline font size is (1.25 * 16px = 20px). That value is then divided into 1000 (10px * 100%) to get the new percentage (50%).

In my testing these seems to compensate for 120 dpi browsers and keeps the web page looking the same.