CODEWITHSUNDEEP
htmlcssbrowserfont-size
Yusuf Akyol
Yusuf Akyol

Reputation:

detect browser font size

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.

Upvotes: 10

Views: 17068

Answers (7)

artur bień
artur bień

Reputation: 121

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();

Upvotes: 0

Matt
Matt

Reputation: 477

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.

Upvotes: 0

Guy Guy
Guy Guy

Reputation: 43

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

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

Upvotes: 3

John Snyders
John Snyders

Reputation: 131

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.

Upvotes: 0

The Pixel Developer
The Pixel Developer

Reputation: 13430

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.

Upvotes: 3

bobince
bobince

Reputation: 536389

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).

Upvotes: 9

Deniz Dogan
Deniz Dogan

Reputation: 26227

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.

Upvotes: 2

Related Questions