Entries in fluidFontSize (1)


jQuery Plug-in: fluidFontSize

I recently finished a development project for a client that challenged me a bit, which is not necessarily a bad thing.  The client wanted the site to be scalable across multiple screen resolutions, and not just horizontally scalable, but vertically.  It was important that any scrolling on the site be limited, if not non-existent, on even the smallest screen resolutions.

Using jQuery, I was able to determine the screen widths/heights of the end-user screens and keep the site scaled proportionally.   But then I began to notice something happening: The paragraphs on some of the pages, particularly when viewing on smaller screens, was disappearing, falling out of divs, or hanging over images.  I realized quickly that I was going to have the scale the fonts as well in order to keep the text in containers.

Did a quick search, and after trying unsuccessfully for a couple days with several plug-ins, I realized I was going to have to go a step further.  While the plug-ins I did try were very good, I couldn't get them to work correctly when using fluid heights in my containers.  So, I created my own plug-in...my first as a matter of fact.

Frankly, it's a very simple, easy plugin.  It simply takes a max-height option that you specify and divides it by the actual height of the container as it's displayed on the screen.  Taking that percentage, we adjust the font accordingly.  The second option allows you to subtract a hair more if needed. Take the following example:

$("#content_box").fluidFontSize({maxHeight: 365, aDrop: .5});

The 'aDrop' option will simply take the newly calculated font size and subtract .5.  This can also be set to zero, the default (recommended for most cases) is 1.

Demo is available here for download.