Okt 30 2006
jQuery-Plugin – fit2Box
[Update] There was an error using more than one box and class selectors. It is fixed now (thanks @Justin) [/Update]
Sometimes, you have the design problem that you want to fit a text into a given box. If the text is small, the font-size should be bigger. If the text is big, the font-size should be smaller.
For this problem, I have written a jQuery-Plugin: You have to put your text into a block element (p.e. a div-element) and to specify width and height of this box. Additionally you have to set an initial font-size in “px”
#testBox {
width: 400px;
height: 50px;
font-size: 20px;
}
Now, you only have to call the fit2Box function:
$("#testBox").fit2Box();
You can view a demo and download the code. Have fun!
The code is tested on
- Internet Explorer 6.0
- Internet Explorer 7.0
- Firefox 2.0
- Opera 9
7 responses so far
Loading ...
Good plugin. It could be a great plug-in if you could get it to work with out having to specify the height and width.
It would be an even greater plugin if once the text shrunk to a minimum font-size, the text would wrap and then get blown back up to fill two lines.
I believe Mike Davidson’s SiFR 2.0 does some of this.
Congratulations for this plugin. After scanned an account bill I’m using Adobe Fireworks(slice tool) to build an HTML output with one for every sliced piece. Crazy! After that I’ll cut all images for that table. Only matters the width and height for them. That width and height are appended to every tag.
My CF application needs to fill every field that table with several data. This data needs to conform with your without wrap for a new line. Fit2Box could be a good option?
Nice plugin but in ie7 with Vista isnt working.
The letters be BIG and dont fit the Div.
Firefox is working fine
hahaha… i dont understand this plugin.. i see the code… and its no need jquery for that… with a good stylesheet u cant do it!!… well… take care!!
I’m curious how to handle this solely with CSS. I don’t think it can be done. Sure, the height of the text can be set to the div height, but how do you handle the width as well?
I think Italo is mistaken, and I welcome him to prove me wrong.
I agree Italo doesn’t understand what the plugin is doing.
I think it would help if the demo was better – I suggest that you make the DIV resizable with the mouse, so that people can manipulate its dimensions and watch the text change to fit accordingly.
I also think that the plugin shouldn’t require the font-size to be set in pixels first, can’t it do this itself?
[...] fit2Box changes the font-size of a block element to fit the content to given dimensions [...]