We can’t change history, but we can change the future.
Be nice to each other.
@robertnyman

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

Published on Thursday, July 14, 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.

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 <code>onresize</code> 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.

One of the issues that Shaun (and I) had to deal with is the fact that <code>onresize</code> is not called when you change the font size in the browser. That's the "cool" part that I was trying to point out 🙂

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?).