CODEWITHSUNDEEP
javascriptjquerybrowser
Christian
Christian

Reputation: 3721

Event when the user changes font size in browser?

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

Upvotes: 6

Views: 7080

Answers (3)

Develophir
Develophir

Reputation: 152

Indeed, this might be of an older issue, but I guess an answer is warranted as it is still relevant today.

To be informed of client's font size changes, you can listen to the document.documentElement using a MutationObserver class, that way it would run a callback on any changes made to the document element. Inside that callback, you can check if the style attribute has changed -- which inherently means that the user changed his browser font size.

It has wide browser support, as per this chart caniuse.com/mutationobserver.

Example:

document.addEventListener('DOMContentLoaded', () => {
    const observer = new MutationObserver(([mutation]) => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            // Do something
        }
    });

    observer.observe(document.documentElement);
})

Upvotes: 2

jcubic
jcubic

Reputation: 66478

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 &nbsp; 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.

Upvotes: 0

Jonathon Bolster
Jonathon Bolster

Reputation: 15961

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

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

Upvotes: 2

Related Questions