The other night my wife brought up the question of being able to resize font dynamically as a user resizes their browser window. Knowing that javascript can do most anything and jQuery makes doing most anything with javascript quick, I immediately responsed – yes, of course. At the time I had an idea of how it could be accomplished, and had never attempted it nor thought about it. So I wrote up a quick example of one way to pull this off.
**A programmers note to designers: This can probably be done with CSS3, and maybe previous versions, and if you can do it with CSS I would definitely recommend it as it will certainly be a safer route and most likely a lighter route as well. I’m not known for my skill with CSS however.
Before looking at any code I’ll give a quick explanation of what it is I’m doing with the code. First, I have a fixed-width div containing a ‘p’ tag with some text. That’s it for the HTML.
The javascript assigns immediately a font-size of 30px to the text and gets the width and height of the window in its original state of page load. Also before any processing is done a ‘ratio of change’ is set. This is the number of pixel change to every one change in pixel font size. So a 10:1 ratio means that the font will decrease one pixel for every ten pixels that the window width decreases from its original size. It also works in the opposite direction for every ten pixels that the screen gets bigger than the original size the font will increase by a single pixel. Of course ten pixels means that in no time the font will be either huge or tiny. A more realistic number is something like 50 or 100. Simply put, the smaller the number the faster the font will change, and the bigger the number the slower the font will change on window resize.
First let’s look at the little bit of HTML.
<body>
<div id="container">
<p>
This is some sample text that I have written for the purpose of watching it resize as I resize my window on my screen. Enjoy!
</p>
</div>
</body>
Now let’s take a look at the javascript.
$(document).ready(function()
{
//set the originals
var originalWinWidth = $(window).width();
//set the original font size
var originalFontSize = 30;
//set the ratio of change for each size change
var ratioOfChange = 50;
//set the font size using jquery
$("#container").css("font-size", originalFontSize);
$(window).resize(function()
{
//get the width and height as the window resizes
var winWidth = $(window).width();
//get the difference in width
var widthDiff = winWidth - originalWinWidth;
//check if the window is larger or smaller than the original
if(widthDiff > 0)
{
//our window is larger than the original so increase font size
var pixelsToIncrease = Math.round(widthDiff / ratioOfChange);
//calculate the new font size
var newFontSize = originalFontSize + pixelsToIncrease;
//set new font size
$("#container").css("font-size", newFontSize);
}
else
{
//our window is smaller than the original so decrease font size
var pixelsToDecrease = Math.round(Math.abs(widthDiff) / ratioOfChange);
//calculate the new font size
var newFontSize = originalFontSize - pixelsToDecrease;
//set the new font size
$("#container").css("font-size", newFontSize);
}
})
});
First of all, this is around 50 lines of code, about half of which are comments. I say this every time, but seriously hats freakin’ off for jQuery. It really is amazing how much can be accomplished with such a few pleasant lines of code. On that note I do realize that there are better ways of writing this code, and if you so choose to use it for any type of production purpose I would recommend refactoring it into something a little more encapsulated and flexible with what it resizes.
Anyways, I digress. What are we doing here. Initially we need to set up a simple listener that watches for when the user decides to resize the window. When the window changes size we need to do two things initially – get the current window size, and then compare that to the original window size. A simple comparison of that difference to zero reveals whether the window is getting bigger or smaller.
The math behind determining the amount of change for the font size is pretty elementary. We of course want to make sure we come out with a positive integer whether the window is getting bigger or smaller. To make sure we get an integer we can use javascripts Math class function round(). If the window is getting smaller we will have a negative number representing the difference. Here javascripts Math class function abs(), for ‘absolute’ can be used to make that number a positive integer. Having these tools in hand, we simply need to divide the window difference by the ratio of change. The result will be the number of pixels that the font will need to change by. If the window is getting bigger we will using jQuery’s css() function to reset the new font size to the original plus the number returned. If the window is getting smaller we, of course, subtract it from the original font size.
While I’m not sure why this would be used outside of dynamically adapting a page between window sizes for different devices, I can see a lot of ways that this can be expanded upon and made significantly better than what I have presented here. But again, I was very pleased with just how simple this was to pull off.
At Monserrate Monastery in Bogotá, Colombia.