Hi, Is it possible to detect browser font size? Also is it possible to dedect new font size when user changes the font size from menu selection? Many thanks for everybody help. Best regards.
+2
A:
The short answer is no. However, I'm suspecting you wish to put different sizes on different elements depending on the user's font size. If so, you may want to take a look at specifying CSS rules in "em", which is defined as being relative to the current font size.
Deniz Dogan
2009-04-11 12:02:06
Hi Skorpan,I got a positive answer from you. Would you explain your idea? Do you have an example? Thanks again. Best regards.
2009-04-11 12:57:56
I was away, so I couldn't answer in time. The Pixel Developer has responded with a perfect example though!
Deniz Dogan
2009-04-11 14:52:24
+5
A:
Well, it is possible, but my raven sitting on a crystal ball tells me not to tell you how, but to ask you what you want to achieve. Most likely, you want a webpage to look good no matter what the font-size is. For that, I recommend the CSS units em, ex etc.
phihag
2009-04-11 12:05:08
+3
A:
Is it possible to detect browser font size?
Kind of, but it's rarely a good idea to. Assuming <body> has no font size set and there are no interfering rules (like ‘body div’):
var measure= document.createElement('div');
measure.style.height= '10em';
document.body.appendChild(measure);
var size= measure.offsetHeight/10;
document.body.removeChild(measure);
gives you the size in pixels of 1em.
Also is it possible to dedect new font size when user changes the font size from menu selection?
Not directly, but you can poll a measurer function like the above every so often. On IE you could hang the check off a CSS expression(), as these recalculate when the font size is changed (amongst many other times), but it's probably not worth it (you'd still need the poller for other browsers and expression() is deprecated anyway).
bobince
2009-04-11 13:51:05
+2
A:
As far as I know there isn't a way to find out. You just assume the default size is 16 pixels which is the standard.
The best practice is to set all the font sizes in ems which scale accordingly to the base font size.
Most people set the base font to 10 pixels which make working with ems easier.
Example
16px = 1em
p {
font-size:2em;
}
That would equal 32px
10px = 0.625em
body {
font-size:0.625em;
}
p {
font-size:2em;
}
That would equal 20px;
I hope that helped.
The Pixel Developer
2009-04-11 14:49:09
A:
My motivation for monitoring text size changes is to dynamically change the height (or width) of elements so the whole page does not require browser window scroll bars. Typically when you do this you respond to the resize event but font size changes can also affect your calculations. I don't care so much what the actual font size is I just need to know when it changes.
Here is some jQuery code that I use. This is similar to the solution suggested by bobince. I have a resize function that will update the height of a div etc.
$(window).resize(resize); // update when user resizes the window.
$("body").append("<p id='textSizeReference' style='display:none;padding:0'>T</p>");
var refTextHeight = $("#textSizeReference").height();
setInterval(function() {
var h = $("#textSizeReference").height();
if (h != refTextHeight) {
refTextHeight = h;
resize(); // update when user changes text size
}
}, 500);
If this is an ajax app that polls for changes in location.hash you can use the same polling function for the text size change.
John Snyders
2009-08-10 16:15:13
A:
keko
2009-12-22 19:57:26