Gadgets and Screen DPI (Font Size)

In addition to working for Microsoft, I am also an instructor for two nights a week at ITT-Tech. Friday evening one my my C++ students wanted to show me a problem they were having with The Magic Folder. Most of the text in the dialogs were cut off – unreadable. The problem is that he was running with Large fonts (screen DPI set to 120). The default is 96. So I immediately went to work on a solution in the next pending update – which I will post Sunday night (5/20/2007). But this took what seemed like forever to resolve and I could not find ANYTHING about this issue specifically related to gadgets out there. Does anyone know about this????
Anyway, here was the solution I came up with:
1) In my main HTML file, I placed the following DIV: 

<div id="dpiTest" style="width:1in; height:1in;"></div>

2) I then setup the following function to run as soon as the gadget was loaded.
function detectDPI()
   var path = System.Gadget.path + "\\css\\";
   var dpi = new Number(dpiTest.offsetWidth);
   var fso = getFSO();
   if(dpi>=120) // hi-res fonts
      fso.GetFile(path + "styles-120dpi.css").Copy(path + "styles.css",true);
      fso.GetFile(path + "styles-96dpi.css").Copy(path + "styles.css",true);

3) Additionally, I created 3 copies of my stylesheet and named them:
  • styles.css
  • styles-120dpi.css
  • styles-96dpi.css

4) In the 120 version of the file I set all the fonts to xx-small, where in the 96 they are set to just x-small. The plane styles.css file was a copy of the 96dpi version.

So what this does is on load it looks at the 1"x1" div that I placed on the form. It reads the offsetWidth which returns the pixel resolution. 1" = 96 when the fonts are normal and 1" = 120 when the fonts are LARGE. It then replaces/renames the "styles.css" file with the proper version. All the other forms will then fall in-line.

Viola! Hopefully, someone else out there having this problem will find this solution useful.

One thought on “Gadgets and Screen DPI (Font Size)

  1. Does anybody know how to or if it is even possible to add new or different \’Font\’ Styles to the Internet Explorer – Hotmail drop down menu for composing an email message?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s