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

Answer 1

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

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

Answer 2

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.