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.
[...] This post was mentioned on Twitter by Pinceladas da Web and Sérgio Rodrigues, Uilson Della Rosa. Uilson Della Rosa said: RT @pinceladasdaweb: Resizing text with jQuery and window resize: http://migre.me/3Rgpg [...]
cool , thanks !
what about if I’d like the font to be set at a dimension depending on the window size?
I’d like to have page with a div in which the text automatically resizes at any resolution it is opened.
can you help me ?
Thanks Luke. I’m not sure I understand your question. Are you asking if the font can be set dynamically based on the size of the window when the page is loaded, but then not change as the window resizes? Let me know and I’ll see if I can help.
Thank you for your attention Matthew!
Sorry, maybe my English is not perfect
In your function, you set the text dimension at 30 px (var originalFontSize = 30;).
And that is the dimension at which it is displayed at any resolution/dimension the page is opened.
Yes, I’d like the text to resize and adapt to the window size when the page is loaded and also change when the window gets resized.
Thanks a lot !
[...] reader asked concerning a post I wrote a while back on Resizing text with jQuery and window resize: Can the text resize adapt to the window size when the page is loaded and also change when the [...]
Hi Luke. I was able to get a font-size that is determined on page load based on the size of the window. I just refactored out the hard-coded 30px font-size and replaced it with a method that sets the font-size based on the window size divided by 50. I’ve posted a new entry illustrating this here.
As I state in the post you can really substitute any algorithm you want in the new method that determines the font-size.
Hope this helps!
yeah, that’s right what I wanted
!!!
you’re a God
thank you sooooooo much !!
No problem Luke. Glad I could help!
Hi Mat, I’ ve tried to use the script but without result. I don’t know why, can you help me?
I’ ve prepared both files html and js calling also the jquery but nothing happens…..
thank you very much for your hint
bye
Fantastic commented code, thank you very much. A lot to learn from here, I really appreciate the effort! Might be a bit too enthusiastic about it but honestly, I didn’t see a lot of snippets commented this way, good work.
This is just what I’ve be looking most of the day to do, thank you very much!
Hey, first. i wanted to thank the person who posted this. this helps a lot and basically i am a beginner in everything – javascript, php, html, css.
thanks
So, i dont understand a thing. i tried to copy and paste the code and tried to resize the browser but i dont see any difference or did i type it wrong? Please help me, i am willing to learn and hope you will all consider that i am a beginner in it..
Any help will be appreciated..