10

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.

phihag
  • 278,196
  • 72
  • 453
  • 469
  • [jQuery Plugin that can help](http://stackoverflow.com/questions/10463518/converting-em-to-px-in-javascript-and-getting-default-font-size/16924637#16924637) – SpYk3HH Mar 27 '15 at 19:22

7 Answers7

9

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
  • 528,062
  • 107
  • 651
  • 834
  • 1
    Just thought I'd point out that this only works when the root element on the page (the `` element) has a `font-size` of 100%. If you know your root element's font size, you can calculate the user's font size by putting `size = size * whateverMyCssDefinesAsBaseSize / 100` at the end of @bobince's test. – Paul d'Aoust Jun 08 '12 at 21:13
3

i needed the same thing. here i found the best answer.

https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle

Guy Guy
  • 43
  • 5
3

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
  • 13,282
  • 10
  • 43
  • 60
  • I think what you mean is 'rem' not 'em'. 'rem' is relative to the font-size of the element while 'em' is relative to whatever the parent element is of the target. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/ – SunshinyDoyle Oct 23 '20 at 15:44
2

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
  • 25,711
  • 35
  • 110
  • 162
  • Hi Skorpan, I got a positive answer from you. Would you explain your idea? Do you have an example? Thanks again. Best regards. –  Apr 11 '09 at 12:57
  • I was away, so I couldn't answer in time. The Pixel Developer has responded with a perfect example though! – Deniz Dogan Apr 11 '09 at 14:52
0

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
  • 131
  • 3
0

Here is something I found that works well for detecting the document's current font family in IE:

document.documentElement.currentStyle["fontFamily"]

in Firefox/Opera:

There is a method called getComputedStyle that is supposed to return the css style for a particular element given, but I haven't figured out a way to get it to return on the entire document yet.

Paolo
  • 20,112
  • 21
  • 72
  • 113
Matt
  • 477
  • 1
  • 5
  • 19
  • The way you get it to return on the entire document is by doing `getComputedStyle(document.documentElement)`. Doing `getComputedStyle(document)` will never work because the style attribute is part of the HTMLElement interface. And, the document does not inherit properties from the HTMLElement interface: it is only a node, not a spatial Element. Thus, the document node has no style itself, and so you cannot `getComputedStyle` on it. – Jack G Nov 25 '17 at 20:47
0

I've created a package called browser-font-size-observer that does just that!

You can find it here: https://github.com/arturbien/browser-font-size-observer

  1. Install the package:
# yarn
yarn add browser-font-size-observer

# npm
npm install browser-font-size-observer
  1. Create observer to get or track the browsers font size setting:
import BrowserFontSizeObserver from "browser-font-size-observer";

const observer = new BrowserFontSizeObserver((state) => {
 console.log(state); // { browserFontSize: 24, ratio: 1.5 }
});

console.log(observer.state); // { browserFontSize: 24, ratio: 1.5 }

// To stop observing
observer.disconnect();
artur bień
  • 111
  • 5