You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
ng-FitText.js makes font-sizes flexible. Use this AngularJS directive in your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
<!-- basic implementation --><h1data-fittext>FitText</h1><!-- dynamic content --><h1data-fittext></h1><!-- setting a minimum font size --><h1data-fittextdata-fittext-min="10">FitText</h1><!-- minimum font size inherited from CSS --><h1data-fittextdata-fittext-min="inherit">FitText</h1><!-- setting a maximum font size --><h1data-fittextdata-fittext-max="10">FitText</h1><!-- maximum font size inherited from CSS --><h1data-fittextdata-fittext-max="inherit">FitText</h1><!-- combination of restrictions --><h1data-fittextdata-fittext-min="10" data-fittext-max="inherit">FitText</h1><h1data-fittextdata-fittext-min="inherit" data-fittext-max="100">FitText</h1><h1data-fittextdata-fittext-min="10" data-fittext-max="100">FitText</h1><!-- block child elements will share smallest font size --><divdata-fittext><div>Short line</div><div>Font size of this element will be used</div><div>Short</div></div><!-- inline child elements will behave as a single line of text --><spandata-fittext><span>Single</span><span> line of text</span><span> spans 100% width</span></span><!-- Custom fonts may take to load in. A delay can be specified before size is initially calculated --><h1data-fittextdata-fittext-load-delay="500">Custom font</h1><!-- Custom fonts may ooze out of element; this is the same as the original compressor attr --><h1data-fittext=".9">Custom font</h1>
FitText Config Provider
Because MODULARIZATION, this module doesn't come with debounce functionality included. Instead you will need to specify the functionality in the fitTextConfigProvider:
module.config(['fitTextConfigProvider',function(fitTextConfigProvider){fitTextConfigProvider.config={debounce: _.debounce,// include a vender function like underscore or lodashdebounce: function(a,b,c){// OR specify your own functionvard;returnfunction(){vare=this,f=arguments;clearTimeout(d),d=setTimeout(function(){d=null,c||a.apply(e,f)},b),c&&!d&&a.apply(e,f)}},delay: 1000,// debounce delayloadDelay: 10,// global default delay before initial calculationcompressor: 1,// global default calculation multipliermin: 0,// global default minmin: 'inherit',// OR inherit CSS values globallymax: Number.POSITIVE_INFINITY// global default maxmax: 'inherit'// OR inherit CSS values globally};}]);
Debounce functionality now needs to be passed in via fitTextConfigProvider
< v2.4.0
Specifying a value for data-fittext allows you to fine tune the text size. Defaults to 1. Increasing this number (ie 1.5) will resize the text more aggressively. Decreasing this number (ie 0.5) will reduce the aggressiveness of resize. data-fittext-min and data-fittext-max allow you to set upper and lower limits.
The element needs to either be a block element or an inline-block element with a width specified (% or px).
Font sizes can be limited with data-fittext-max and data-fittext-max