davatron5000 / FitText.js

A jQuery plugin for inflating web type
http://fittextjs.com
6.76k stars 1.39k forks source link

Adding support for em, rem, vw, and special pw (parentWidth) units. #123

Closed iAmNathanJ closed 4 months ago

iAmNathanJ commented 9 years ago

Allows for different units in min/maxFontSize settings... i.e. Can set a fluid length against a fixed pixel length.

davatron5000 commented 9 years ago

This is interesting. I like the idea of supporting em, rem, vw units. I would be opposed to introducing a custom unit/DSL like pw, however.

This increases the size and complexity of the plugin quite a bit just for "vanity sizing". The minFontSize and maxFontSize stuff doesn't come up much. So that's something I'll have to consider further.

Conversions could easily be calculated outside of the plugin as well.

function emToPx( size ) {
 // do calculation
}
$( el ).fitVids(1.2, { 
  maxFontSize: emToPx( '2em' ) 
});

Thoughts? How are you using this? Was this a client need?

iAmNathanJ commented 9 years ago

Yep, all true and good points.

No client need, I've just been using FitText on pretty much every project I've worked on recently. Slapping it on headlines, so my text fits! I generally style in rem units, and simply wanted to maintain continuity between my css and javascript, where applicable. My assumption is that some other folks might enjoy that too.

Of course the vw unit will be used and loved by more and more people, so I thought what the heck. I agree about the non-standard unit... Not a very appealing approach. The thought was more directed to controlling fluid type within complex layouts and containers. Better suited for paragraph text anyhow, I think.

I could call an outside function to get the unit I want, but I could also just do the math for the rems in my head and call it a day. I don't know, just seems cleaner to me to keep it in the plugin.

There's definitely no question this beefs up the plugin quite a bit. Eliminating both fluid lengths would take it back a fair amount.

I appreciate your feedback. If you have any other thoughts, please share.