RobLab – How to find out the Text Size setting in IE
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.
This is very, very useful. Good job! π
Faruk,
Thank you!
Apparently it has been pretty appreciated. π
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.
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 <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 π
Dimitri,
The <code>onresize</code> event is indeed triggered in <acronym title="Internet Explorer">IE</acronym> 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! π
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?).
J.J.,
No, it's not just an <acronym title="Internet Explorer">IE</acronym> hack, I find it to be very consistent and I constantly use it in my solutions.
Robert, you know <code>switch()</code> exists in JavaScript, right? π
Mark,
Ha ha! Yes, I do. π
But that would've resulted in more lines in the code (with using <code>break:</code> for each option).
Besides, I thought it would be easier to understand with <code>if</code> clauses for those that aren't that experienced in JavaScript
Hi
How is this affected by Windows' Dots-per-inch setting ?
Adjusting Scale for Higher DPI Screens
Eric
Eric,
Very interesting question. I'm going to be honest here: I have no idea! π
But please feel free to test it!
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…
<code>
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);
}
</code>
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