Character size based fitting (width & height), compressor removed

[arminrosu]

Hey,

This is my first public fork, so it might be a bit overkill. Basically I needed height fitting as well, so I changed the whole shabang to calculate optimal sizes based on character dimensions (at given font-size) vs. container width.

The one big difference in implementation, is that texts need to be set to width: auto and whitespace: nowrap; is encouraged (should work without that, but I'm thinking of @font-face fonts, which might load late and bork it up).

I've tested it on a page with 200 fit-able texts, 20 fonts, worked fine.

Hope you like it,
Armin

[davatron5000]

Wow. Looks fun! I'll have to download it and put it through its paces to see if it's what I think should become the standard. That might take a while given my current workload at the moment.

Do you have a JSBin or something like that to show the use case for needing it to fit a height as well as a width?

[arminrosu]

I could whip up a short jsbin, but give me a couple of days please (guess we have similar workloads). Otherwise just use the example.html. On my screen (1280x800), I can see it stop fitting the width, at a certain point (horizontal space just gets larger), meaning vertical fitting is happening (but since the height doesn't change, neither does the font-size).

[arminrosu]

ok, so here's a quick test, not very pretty, but it does the job:
http://jsbin.com/okosow/

The second box is for height testing. I haven't changed the js code, so depending on how you're scaling, height/width fitting might kick in.

line-height and initial font-size are important, but only to ensure proper vertical alignment.

[ninjaprecision]

Hi Armin,

I've implemented your version of this code but sometimes the resized text randomly appears about twice as large as it should. I'm afraid I can't give you any other information on this problem. It seems to happen one out of every 3 or 4 times the page is loaded. Do you have any idea why this might be happening?

[arminrosu]

That's weird. Do you have an example (jsfiddle) handy?

Are you use @font-face to load custom fonts? Try executing fitText on
$(window).load(function () { $("#fittext").fitText(); });

Also, log the values fittext is using (in jquery.fittext.js), you might figure out what's happening. I'd also log to see if it does width or height fitting.

[ninjaprecision]

Using $(window).load(function () seems to have fixed that problem! Thank you!

Another question though - does this fork support min and max font size?

[arminrosu]

For extra performance, if you are using google webfonts (if I recall correctly, you are), you could bind fitText to the event that is fired when they're done loading: WebFont Loader > Events

[pencilcheck]

Anyway possible to merge this?

https://coderwall.com/p/_8jxgw/autoresize-text-to-fit-into-a-div-width-height
(Or the jquery plugin version: https://gist.github.com/iamkirkbater/ee9741a02431290682e6)