RobLab - How to find out the Text Size setting in IE

Published on Thursday, July 14th, 2005

If you’re reading this, you’re probably interested in making your CSS-controlled layouts em-based, to be able to adapt the font, width of elements etc to the text size setting the user has in his/her web browser.

A colleauge of mine recently had the problem that the customer of one of the web sites she had worked on got around ten e-mails per day from complaining web site visitors that they couldn’t read the text, since it was to small.
The text size was controlled using em.

After doing some investigation, she found out that all of the complaints were from people using IE that had their Text Size setting set to Smallest. This was probably due to the users having incidentally held down the Ctrl key while scrolling with the mouse wheel (which changes the text size in many web browsers and other programs).

And since most of the web site layouts out there use a px-based font, that IE doesn’t handle correctly when it comes to text resizing, this were the only web site where they saw this “error” occur.

So she asked me if there’s any way to find out the user’s Text Size setting, to optionally warn them and to serve them an alternate style sheet where the font would be a little bit increased. I pondered about this, and came up with a pretty basic JavaScript solution for finding out the Text Size setting.

Posted in CSS, JavaScript | 13 comments

13 comments

  • Faruk AteÅŸ
    July 14th, 2005 at 14:33

    This is very, very useful. Good job! :-)

  • Robert Nyman - author
    July 14th, 2005 at 14:34

    Faruk,

    Thank you!
    Apparently it has been pretty appreciated. :-)

  • Dimitri Glazkov
    July 14th, 2005 at 14:36

    You’ve got to check out Shaun Inman’s “clear absolutes” solution (http://www.shauninman.com/plete/2004/07/absolutely-positive). He implements dynamic sensing of the font size, i.e. determining font size change on-the-fly. It’s old, and I can’t vouch for the quality of code anymore, but the technique is still fairly cool.

  • Robert Nyman - author
    July 14th, 2005 at 15:04

    Dimitri,

    Thanks for the tip, interesting!

    I tested the code and just glanced at it, and it seemed pretty cool. However, if it’s a large page with lots of elements, it might be a performance issue to loop trough all of it.

    In my example, you can add the function call to the onresize event to (to get the on-the-fly functionality), and if you find out that the Text Size setting isn’t optimal, you just load an extra style sheet altering the text size to a more desirable look.

  • Dimitri Glazkov
    July 15th, 2005 at 14:41

    One of the issues that Shaun (and I) had to deal with is the fact that onresize is not called when you change the font size in the browser. That’s the “cool” part that I was trying to point out :)

  • Robert Nyman - author
    July 15th, 2005 at 15:00

    Dimitri,

    The onresize event is indeed triggered in IE 6 (but not in the 5.x versions). However, Firefox doesn’t trigger the event either.

    Your and Shaun’s script does work in those versions and web browsers where the event isn’t triggered, so that is cool! :-)

  • J. J.
    July 18th, 2005 at 22:10

    A related tip to remember: Similar to The most important CSS rule, setting body{font-size: 100%} helps to normalize relative font sizes throughout the page and across browsers (or is this just an IE hack?).

  • Robert Nyman - author
    July 18th, 2005 at 22:59

    J.J.,

    …setting body{font-size: 100%} helps to normalize relative font sizes throughout the page and across browsers (or is this just an IE hack?).

    No, it’s not just an IE hack, I find it to be very consistent and I constantly use it in my solutions.

  • Mark Wubben
    July 20th, 2005 at 15:55

    Robert, you know switch() exists in JavaScript, right? ;-)

  • Robert Nyman - author
    July 20th, 2005 at 16:24

    Mark,

    Ha ha! Yes, I do. :-)
    But that would’ve resulted in more lines in the code (with using break: for each option).

    Besides, I thought it would be easier to understand with if clauses for those that aren’t that experienced in JavaScript

  • Eric Drummond
    January 11th, 2006 at 18:22

    Hi

    How is this affected by Windows’ Dots-per-inch setting ?

    Adjusting Scale for Higher DPI Screens

    Eric

  • Robert Nyman - author
    January 11th, 2006 at 20:12

    Eric,

    Very interesting question. I’m going to be honest here: I have no idea! :-)

    But please feel free to test it!

  • Richard Lee
    June 22nd, 2006 at 14:39

    Hi, I use a similar snippet to resize the amount of rows in a seslect box based on the text size setting.

    I changed it a little so it followed the same coding style as you have used above…

    function checkFontSize()
    {
    var objStoreList = document.getElementById("optStores");
    var intOffsetHeight = objStoreList.offsetHeight;
    var intNoRows = objStoreList.size;
    var intRatio = intOffsetHeight/intNoRows;

    var strTextSizeSetting;
    if (intRatio > 20)
    {
    strTextSizeSetting = "Largest";
    objStoreList.size=13;
    }
    else if (intRatio > 18)
    {
    strTextSizeSetting = "Larger";
    objStoreList.size=14;
    }
    else if (intRatio > 16)
    {
    strTextSizeSetting = "Medium";
    objStoreList.size=16;
    }
    else if (intRatio > 13)
    {
    strTextSizeSetting = "Smaller";
    objStoreList.size=20;
    }
    else
    {
    strTextSizeSetting = "smallest";
    objStoreList.size=22;
    }

    var strAlertText = "Your text setting is " + strTextSizeSetting + " offset was " + intOffsetHeight + " and no rows was " + intNoRows + " so intRatio was " + intRatio;
    alert(strAlertText);

    }

    I’m coding using em (obviously) but I’m also using font-size of 79% rather than 100% as part of the standards here - so may have to check the values in the IF Elses

    Cheers

Share your thoughts:

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . If you want to display code examples, please remember to write &lt; for < and &gt; for >.

Comment preview

Top results