search

davatron5000 / FitText.js

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

MinFont always loaded #122

Closed gregthrive closed 10 years ago

gregthrive commented 10 years ago

I have a very simple set up with an link that has a default font size of 46px (calculated from REM).

jQuery("a.btn").fitText( 2.0, <-- irrellevant { minFontSize: '22px', maxFontSize: '46px' })

No matter what size the screen is at, it always loads 22px in font size.

davatron5000 commented 10 years ago

Can you put it in a codepen?

gregthrive commented 10 years ago

Codepen demo didn't work.

http://jsfiddle.net/yvkk11rq/

davatron5000 commented 10 years ago

Your .btn needs to be display:block or inline-block with a width. We can't really do width based resizing on (inline) elements that don't have width http://jsfiddle.net/yvkk11rq/3/

https://github.com/davatron5000/FitText.js#css-faq

gregthrive commented 10 years ago

Adding block gets it to resize, but ruins the styling. Inline-block keeps the styling correct, but then FitText still doesn't work. The container it's contained in (in my actual code) does have a width.

gregthrive commented 10 years ago

http://jsfiddle.net/yvkk11rq/5/

gregthrive commented 10 years ago

Not sure why closed... still doesn't work.

gregthrive commented 10 years ago

Maybe width is too small to get max font size? If so, my bad.

gregthrive commented 10 years ago

Eh, I keep correct font size of a P tag and look at it's bounding box size which is 600px. So I can know that with 600px width it can display full size. I set maxfont to be that desired full size and on load it shrinks text. Container has a width as does the p tag.

davatron5000 commented 10 years ago

@gregthrive you've applied two fixed widths to the elements. That means header and a.btn don't technically resize. Setting the a.btn to a inline-block with a fluid width seems to accomplish a desired effect.

http://jsfiddle.net/yvkk11rq/8/

It's possible you're trying to achieve a visual effect that doesn't work with FitText at all. The plugin seems to be working as intended on this end and I'd recommend playing with it some more.

gregthrive commented 10 years ago

Thanks for your assistance I will keep playing with it!