Event when the user changes font size in browser?

Question

I need to get informed when the user changes the font size in it's browser.

I need it to reposition some elements which have to be relative in one dimension to an anchor inside a text.

So far i haven't found anything and i'm a bit worried that it's not possible. In this case it should be possible to emulate it with a hidden div and some text inside and a script polling for changes of it's width. But i hope someone has a more elegant solution.

EDIT:

I implemented the polling thing like following. It's not properly tested on all Browsers but it doesn't depend on browser specific features. use it like $('body').bind('fontResize', function(){...})

$(function(){
  $('body').append($('<div id="theFontResizeCaptureDiv">A<br>B<br>C</div>'));
  $('#theFontResizeCaptureDiv').css({visibility: 'hidden', position: 'absolute'});

  window.setInterval(function(){
    var div = $('#theFontResizeCaptureDiv');
    var stored = parseInt(div.attr('c_height'));
    if(isNaN(stored)){ // first run
      div.attr('c_height', div.innerHeight());
    }else if(stored != div.innerHeight()){ // changed
      div.attr('c_height', div.innerHeight());
      $('body').trigger('fontResize');
    }
  }, 200);
});

possible duplicate of [detect browser font size](http://stackoverflow.com/questions/739940/detect-browser-font-size)? — , Mar 08 '11 at 19:17
This is a more useful question than the possible dupe. There are somethings that even with CSS + em + ex you need to code some positionings (I have a DIV which has to be absolutely positioned to work with an external JS library and that absolute position needs to take into account the font sizing of the user). — AlexC, Mar 28 '12 at 11:50

score 2 · Answer 1 · answered Jan 10 '11 at 10:50

2

Here's a link to an article describing different methods to detect font resizing:

http://www.alistapart.com/articles/fontresizing/

answered Jan 10 '11 at 10:50

Jonathon Bolster

15,811
3
43
46

score 0 · Answer 2 · answered Nov 02 '17 at 18:06

You can use idea from this file https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js

I've incorported it in jQuery Terminal as jQuery plugin and use div with   and css:

.font {
   position: absolute;
   font-size: inherit;
   top: 0;
   left: 0;
   width: 1em;
   height: 1em;
}

that way if parent element, that have position: relative or absolute, change font-size the .font element will change size and trigger resizer callback.

You can use this plugin like this:

var font = $('<div class="font">&nbsp;</div>').appendTo(self);

font.resizer(function() {
   // font changed size
});

where self is your parent element, if you need to detect this event on body you can use 'body' instead.

Event when the user changes font size in browser?

2 Answers2