FlexyFont@SachinPuri.com

Introduction

Flexy Font is a small JS script which sets the size of a font dynamically based on height and width of element.

You can use this script in situation where you don't want to specify font size and you want, that font should fit in a DIV dynamically. Consider a situation where you have a fixed size DIV and you want to fill it with a name of variable size and you want, that font should resize dynamically to fill the DIV area, here you can use this script.

Usage

Step 1) Add flexyFont-1.1.js file to your page

Step 2) Give height and width to DIV in pixel.

Step 3) Add "flexyFont" class to DIV.

If you want to group multiple DIV's

Step 4) create a 2 dimension array "flexyFontGroups" to group DIVs

Example Code
<script>
var flexyFontGroups=[['div1','div2'],['div3','div4']];
</script>

Example 1 - Single DIV

In example 1 we have created a 300X100 DIV and the font "Example 1" adjusted itself accordingly

Example Code
<div class="flexyFont" style="border:1px solid; width:300px; height:100px; text-align:center">Example 1</div>

Output
Example 1

Example 2 - Grouping DIVs

In example 2 we have created three divs of 300X100 and the font in these DIVs adjusted itself accordingly.

Here main thing to note is, In Example 2 we have grouped all the three DIV's, so they will take the smaller one's font.

Example Code
<script>
    var flexyFontGroups=[['example2-1','example2-2','vs']];
</script>

<div id="example2-1" class="flexyFont" style="border:1px solid; width:300px; height:100px; text-align:center;">Example 2</div>
<div id="vs" class="flexyFont" style="border:1px solid; width:300px; height:100px; text-align:center;">V/s</div>
<div id="example2-2" class="flexyFont" style="border:1px solid; width:300px; height:100px; text-align:center;">This is Example 2</div>

Output
China
V/s
Malayasia