Rockstar Web Developer

Font resize detection

Published on June 8, 2010 by , in Javascript

We all crashed into the problem where a website’s layout gets ruined when zooming in or out the font-size in the browser…

You can read a really good article from ALA giving a nice insight with regards to what approach should you take in the early development phases towards avoiding various zooming problems: http://www.alistapart.com/articles/fontresizing/

Most complex designs don’t allow so much flexibility such that you can make things really scalable via the CSS, so our most used option will probably be a touch of Javascript.
As on most of my projects jQuery is a standard, I chose to use a little jQuery plug-in that does the job of detecting the font-resize event really well:

http://wellstyled.com/en/javascript-onfontresize-jquery-plugin/

Once you caught the event you can do any kind of magic :)

What approaches did you take to solve such situations ?

FavoriteLoadingAdd to favorites

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent writings