Internet Explorer and 120 dpi

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.

17 Responses to “Internet Explorer and 120 dpi”

  1. Dan says:

    William:

    Thanks for the great tip. I am planning to use this variant:

    body {
    font-size: expression(1 / (screen.deviceXDPI / 96) * 100 + ‘%’);
    }

    If the xdpi is set to 120dpi, then the font-size is set to 80%. (20px * 80% = 16px, back to the default Windows size.

    Just to clarify, the xdpi in windows xp is modified in the display control panel -> settings tab -> advanced button -> DPI setting.

  2. Dan says:

    Here is the script again, so it can be copied from the browser:

    <!–[if IE]>
    <style type="text/css">
    body {
    font-size: expression(1 / (screen.deviceXDPI / 96) * 100 + ‘%’);
    }
    </style>
    <![endif]–>

  3. [...] fixes for this that can be inserted into your CSS or HTML to try and compensate for the change. William’s Blog had a good post on how to handle the scaling and sizing of fonts using a conditional staement in [...]

  4. Dei says:

    Hi, I tried out your script and it works great! :) However, do you happen to have a solution that would work in Firefox? I need my script to support both IE and Firefox. I would appreciate it if you could give me tips. Thanks.

  5. william says:

    Dei,

    In my testing Firefox 2.0 and 3.0 both use 96dpi/16px even with a 120dpi display, so I only needed a solution for IE. Is Firefox scaling the fonts on your system?

  6. [...] deeper I came across this blog post where William posted a script which decreased the base font size of the site down to a smaller size [...]

  7. I already installed this hacks, but havent tried Ie cos I have Mac…

    But if this works….

    i love you forever jaja

    http://medellinstyle.com

  8. John says:

    Hi. I am experiencing the same issue that you talk about in this blog (http://www.williamkolean.com/williamblog/?p=18).

    However, I tried implementing the fix you stated and it didn’t work on my end.

    I put this line:

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

    into the “body” part of my css file. Did I do that right?

    Thanks.

    John
    Did I do it right?

  9. william says:

    John, if you copied and pasted from WordPress then what should be regular quotes around % and 62.5% may actually be curly quotes. Replace them with regular quotes and it should work.

  10. John says:

    William,

    Thanks for responding. I tried it and it did kind of work.

    This problem seems to effect text as well as images, because while it made some of the text elements on my site smaller, it left the images unchanged (naturally) and not even all of the text was made smaller. So, the problem persists.

    Any other ideas?

    Thanks.

    John

  11. william says:

    This solution is meant for web sites that are using ems for font sizes. What it does is scales the base font size so that 1em = 10px, making it easier to work with ems, and applies the proper scaling to IE when it’s screen DPI is set to 120 instead of 96. In order to use this, you would need to change all your units to ems. Or, you could just use pixels which would ensure that everything is the same size regardless of screen dpi, but older version of IE will not be able to increase or decrease the text size.

  12. Great tip – thank for this. The whole 120DPI think on Windows / Vista is a bit of a nightmare really – including IE’s default handling.

  13. Bob D says:

    Must agree – I did identify that IE7 (6 and 8 were OK) was resizing things and breaking page on macines running 120DPI. I had no idea on how to resolve this until Google pointed me to this blog. It totally solved all my layout issues – all pages now render perfectly regardless of machine DPI or IE version (FF2 & 3 as mentioned above were fine).

    Awesome tip – saved many hours of troubleshooting….thanks

    Bob

  14. Margo says:

    Hello,

    We have a .net environment and the resizing works except for the navigational elements and buttons (unordered lists and html buttons). What is interesting that it also changes the font family to serif even though it is defined as Verdana, Arial, Helvetica, sans-serif. Any ideas?

    Thank you,
    Margo

  15. IgorV says:

    Keep in mind, Opera 10 scales fonts same way IE does on 120 DPI

  16. IgorV says:

    Also, can someone explain to me the 1000 / ((screen.deviceXDPI / 96) * 16) ??? To me it doesn’t make any sense, and happen to work just by accident. 100 / (screen.deviceXDPI / 96) or 9600 / screen.deviceXDPI seems to be the correct one.

  17. Phyllis says:

    Saved my life. Thanks William. I was surprised to see so little chatter about this problem. I was so distressed to learn my client had their small screen laptop computer set to 120 DPI and is using IE9. Your simple line of code fixed everything.

    Only problem which I will ignore is Dreamweaver says there is an error parsing styles Affects: Firefox 1.5
    The code I used is:

    body {
    font-size: expression(1 / (screen.deviceXDPI / 96) * 100 + “%”);
    }

    Thank you very much for the help.

Leave a Reply