A way to know if user is using non-default text size?

[Philosopher]

In another thread, I was looking for a way to time how long a visitor stayed on a single page.

In that thread, whoisgregg got me thinking about keeping track of exactly how far they had scrolled as well.

Using some code he posted as well as some other code I found, that is easy enough to do, but then I realized that the scroll length would be pretty heavily affected if a person wasn't using the standard text size when viewing the page (yes, screen size also has an affect, but my layout is fixed so it is negligible in comparison to text size changes).

Is there a way of using some js to detect if the person is using something other than the default text size so I can not factor in their stats and keep from skewing the results?

Thanks!

[mrhoo]

you can append a temporary span to the body and give it a textNode of 'M' and a font-size of 1em and measure its offsets. To keep it unobtrusive, set the visibility to hidden and position absolute, and remove it after you read its size.

This will give you the 1 em pixel size of the body font being used.

[Philosopher]

LOL....it's posts like that, that remind me I may not know as much as I think I do. ;)

textNode?
Offsets?

Must have slept through that class.

Anyway, this page is designed using pts with most paragraph text, bullet points, etc. in 10pt Arial, with headings in slightly larger pts.

So...is there any way to know if a visitor that hits my site is seeing the page as exactly as I have set, or if it is being altered because the user has his/her browser set to increased text size?

[Dabrowski]

I have used that method -- here's the code which should be easy to integrate into your site....

var emSize;
var emSizeDiv;

function installEMsize() {
var body = document.body;
var div = document.createElement( "DIV");

div.style.position = "absolute";
div.style.top = "10px";
div.style.right = "10px";
div.style.display = "none";

div.style.margin = 0;
div.style.padding = 0;
div.style.borderWidth = 0;

div.style.lineHeight = "1em";

div.setAttribute( "id", "fixmarginemsize");
div.appendChild( document.createTextNode( "M"));

body.appendChild( div);

emSizeDiv = document.getElementById( "fixmarginemsize");
}

function getEMsize() {
if(!emSizeDiv) installEMsize();

emSizeDiv.style.display = "block";
emSize = emSizeDiv.offsetHeight;
emSizeDiv.style.display = "none";

return emSize;
}

Just call getEMsize whenever you want. It returns the size of 1em in px, accounting for browser font size, and any font size definition.

It returns emSize, but the variable is also global so you can just reference it when you like. The function to insert the hidden DIV is called automatically.

It's worth setting an interval to check every 250ms if it's changed, there is no event to tell you when the font size has changed.