Breaks with text-transform:uppercase

davatron5000 / FitText.js

A jQuery plugin for inflating web type

http://fittextjs.com

6.76k stars 1.39k forks source link

Breaks with text-transform:uppercase #86

Closed RevConcept closed 10 years ago

RevConcept commented 10 years ago

It took me a while to narrow down the cause of this issue...my headings are breaking into two lines. For some reason, text-transform:uppercase seems to be causing this.

Check this fiddle to see the issue: http://jsfiddle.net/RevConcept/xedSU/

davatron5000 commented 10 years ago

The way FitText is built is that it allows text to flow to other lines. We don't adjust this automatically. Check out BigText, it probably does what you're hoping for.

TrentWalton commented 10 years ago

You may also just need to change the compression (line 134)

$('h1').lettering().fitText(1.6, {maxFontSize: '60px'});

RevConcept commented 10 years ago

Ahhh...got it thanks. Compression was able to fix this for me...it's not as smooth, but I think it will work.