diff --git a/README.md b/README.md index 79fc0e0..cb08849 100644 --- a/README.md +++ b/README.md @@ -28,21 +28,26 @@ This will hopefully give you a level of "control" that might not be pixel perfec FitText now allows you to specify two optional pixel values: `minFontSize` and `maxFontSize`. Great for situations when you want to preserve hierarchy. ```javascript -jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }) +jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }); ``` ## CSS FAQ -- **Make sure your container has a width!** +- :warning: Run FitText before anything that hides the element you're trying to size (e.g. before Carousels, Scrollers, Accordions, Tabs, etc). Hiding an element's container removes its width. It can't resize without a width. +- :warning: **Make sure your container has a width!** - `display: inline` elements don't have a width. Use `display: block` OR `display: inline-block`+ a specified width (i.e. `width: 100%`). - `position:absolute` elements need a specified width as well. - Tweak until you like it. - Set a No-JS fallback font-size in your CSS. +- :new: If your text is full width, you might want to **NOT** use FitText and just use CSS `vw` units instead. Supported in all major browsers. ## Don't use jQuery? That's okay. Check out these handy non-jQuery versions maintained by other people. - [non-jQuery FitText](https://github.com/adactio/FitText.js) from @adactio +- [Angular.js FitText.js](https://github.com/patrickmarabeas/AngularJS-FitText.js) from @patrickmarabeas +- [AMP-HTML FitText](https://github.com/ampproject/amphtml/tree/master/extensions/amp-fit-text) +- [FitText UMD](https://github.com/peacechen/FitText-UMD) by @peacechen ## Changelog * `v 1.2` - Added `onorientationchange` event @@ -53,7 +58,7 @@ That's okay. Check out these handy non-jQuery versions maintained by other peopl ## In Use: - [Trent Walton](http://trentwalton.com) -If you want more exact fitting text, there are plugins for that! We recommend checking out [BigText](https://github.com/zachleat/BigText) by Zach Leatherman or [SlabText](http://www.frequency-decoder.com/demo/slabText/) by Brian McAllister. +If you want more exact fitting text, there are plugins for that! We recommend checking out [BigText](https://github.com/zachleat/BigText) by Zach Leatherman or [SlabText](https://github.com/freqDec/slabText) by Brian McAllister. ### Download, Fork, Commit. If you think you can make this better, please Download, Fork, & Commit. We'd love to see your ideas. diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..c4887a3 --- /dev/null +++ b/bower.json @@ -0,0 +1,12 @@ +{ + "name": "jquery-fittext", + "version": "1.2.0", + "main": "jquery.fittext.js", + "dependencies": { + "jquery": ">= 1.6" + }, + "ignore": [ + "example.html", + "CONTRIBUTING.md" + ] +} diff --git a/component.json b/component.json deleted file mode 100644 index 77bbb7e..0000000 --- a/component.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "name": "FitText.js", - "version": "1.2.0", - "main": "./jquery.fittext.js", - "dependencies": { - "jquery": ">= 1.6" - } -} diff --git a/jquery.fittext.js b/jquery.fittext.js index 080b82e..0b3ddef 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -1,6 +1,6 @@ /*global jQuery */ /*! -* FitText.js 1.1 +* FitText.js 1.2 * * Copyright 2011, Dave Rupert http://daverupert.com * Released under the WTFPL license