About

CSS (3)

JavaScript (6)

Web browsers (2)

 

Blog

JavaScript

abc

This test is to find out the user's Text Size setting in IE, and, if needed, take appropriate measures. The concept used here is to have a hidden element with a small line-height and then get the offsetHeight from it (it can't have display:none, since then it won't get any offsetHeight).

The offsetHeight might depend on the general text size for the page. In this page, this is the CSS used:

*{
	margin:0;
	padding:0;
	font-size:100%;
}

body{
	font:normal 0.74em/1.7em Arial, Helvetica, sans-serif;	
}

div#font-size-test{
	position:absolute;
	visibility:hidden;
	line-height:0.5em;
}
 

Then I have an element with the id "font-size-test":

<div id="font-size-test">abc</div>
 

Enter the script that calculates the height of the div element:

function checkFontSizeInIE(){
	if(document.getElementById && document.getElementById("font-size-test")){
		// 4 - smallest, 5-smaller, 6 - medium, 7 - larger, 8 - largest
		var intOffsetHeight = document.getElementById("font-size-test").offsetHeight;		
		var strTextSizeSetting;
		if (intOffsetHeight == 4){
			strTextSizeSetting = "Smallest";
		}
		else if (intOffsetHeight == 5){
			strTextSizeSetting = "Smaller";
		}
		else if (intOffsetHeight == 6){
			strTextSizeSetting = "Medium";
		}
		else if (intOffsetHeight == 7){
			strTextSizeSetting = "Larger";
		}
		else if (intOffsetHeight == 8){
			strTextSizeSetting = "Largest";
		}
		
		var strAlertText = "Your text setting is " + strTextSizeSetting;
		if(!document.all && navigator.userAgent.search(/MSIE/i) == -1){
			strAlertText = "You don't seem to be using IE. \n
					However, the current test element's offsetHeight is "
					+ intOffsetHeight;
		}	
		alert(strAlertText);
	}
}
window.onload = function (){
	if(document.getElementById && document.getElementById("check-text-size")){
		document.getElementById("check-text-size").onclick = checkFontSizeInIE;
	}				
}