diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..2e18c0a --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,13 @@ +## Submitting issues + +### Reduced test case required + +All bug reports and problem issues require a reduced test case. See [CSS Tricks - Reduced Test Cases](http://css-tricks.com/reduced-test-cases/) on why they _"are the absolute, ... number one way to troubleshoot bugs."_ + ++ A reduced test case is an isolated example that demonstrates the bug or issue. ++ It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug. No extra functionality or styling. ++ A link to your site is **not** a reduced test case. ++ A [CodePen](http://codepen.io) is preferred so we can help you fix an error. ++ Until you provide a reduced test case, your issue will be closed. + +This guideline may seem a little harsh, but it helps dramatically. Reduced test cases help you identify the issue at hand and understand your own code. On our side, they greatly reduce the amount of time spent resolving the issue. \ No newline at end of file diff --git a/README.md b/README.md index 7197801..cb08849 100644 --- a/README.md +++ b/README.md @@ -1,52 +1,64 @@ # FitText.js, a jQuery plugin for inflating web type -FitText makes font-sizes flexible. Use this plugin on your responsive design to achieve scalable headlines that fill the width of the parent element. +FitText makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines. ## How it works Here is a simple FitText setup: - - - +```html + + + +``` -[Pretty Cool](http://www.hulu.com/watch/194733/saturday-night-live-miley-cyrus-show). Your text should now resize based on the width of the parent element. By default: *Font-size = 1/10th of the parent element's width*. +Your text should now fluidly resize, by default: Font-size = 1/10th of the element's width. -### The Compressor +## The Compressor If your text is resizing poorly, you'll want to turn tweak up/down "The Compressor". It works a little like a guitar amp. The default is `1`. - $("#responsive_headline").fitText(1.2); // Turn the compressor up (text shrinks more aggressively) - $("#responsive_headline").fitText(0.8); // Turn the compressor down (text shrinks less aggressively) - -This will hopefully give you a level of "control" that might not be pixel perfect, but scales smoothly & nicely. +```javascript +jQuery("#responsive_headline").fitText(1.2); // Turn the compressor up (resizes more aggressively) +jQuery("#responsive_headline").fitText(0.8); // Turn the compressor down (resizes less aggressively) +``` -### _new:_ minFontSize & maxFontSize -FitText now allows you to specify two optional pixel values: `minFontSize` and `maxFontSize`. Great for situations when you want responsive text but also need to preserve hierarchy. +This will hopefully give you a level of "control" that might not be pixel perfect, but resizes smoothly & nicely. - $("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }) +## minFontSize & maxFontSize +FitText now allows you to specify two optional pixel values: `minFontSize` and `maxFontSize`. Great for situations when you want to preserve hierarchy. -## CSS Tips +```javascript +jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }); +``` -* Make sure your headline is `display: block;` or `display: inline-block;` with a specified width, i.e. `width: 100%`. -* Be ready to tweak till everything balances out. -* FitText now ignores your CSS file's font-size, but be sure to set one as a non-javascript fallback. -* Make sure your element is appended to document before setting fitText. e.g. `$('
').fitText()` will NOT work +## CSS FAQ + +- :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 * `v 1.1` - FitText now ignores font-size and has minFontSize & maxFontSize options * `v 1.0.1` - Fix for broken font-size. * `v 1.0` - Initial Release -## Disclaimers -This is the part of the show where we cover our butts. - -### Intended for Fluid Width Designs -We built this to satisfy a need for fluid resizing text on responsive designs. Mostly for use on [Trent Walton's blog](http://trentwalton.com), which he's using it all over. - -If you want more exact fitting text, there's a plugin for that! We recommend checking out [BigText](https://github.com/zachleat/BigText) by Zach Leatherman. +## In Use: +- [Trent Walton](http://trentwalton.com) -### window.resize() tsk tsk tsk... -If you oppose `window.resize()`, it's worth mentioning that @chriscoyier created a fork of [FitText using a debounced resize method](https://github.com/chriscoyier/FitText.js). +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 your see your ideas. +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/example.html b/example.html index 77774cd..c6a2aee 100644 --- a/example.html +++ b/example.html @@ -53,7 +53,7 @@

Squeeze with FitText

diff --git a/jquery.fittext.js b/jquery.fittext.js index eebff96..0b3ddef 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -1,30 +1,30 @@ /*global jQuery */ -/*! -* FitText.js 1.0 +/*! +* FitText.js 1.2 * * Copyright 2011, Dave Rupert http://daverupert.com -* Released under the WTFPL license +* Released under the WTFPL license * http://sam.zoy.org/wtfpl/ * * Date: Thu May 05 14:23:00 2011 -0600 */ (function( $ ){ - + $.fn.fitText = function( kompressor, options ) { - + // Setup options var compressor = kompressor || 1, settings = $.extend({ 'minFontSize' : Number.NEGATIVE_INFINITY, 'maxFontSize' : Number.POSITIVE_INFINITY }, options); - + return this.each(function(){ // Store the object - var $this = $(this); - + var $this = $(this); + // Resizer() resizes items based on the object width divided by the compressor * 10 var resizer = function () { $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); @@ -32,12 +32,12 @@ // Call once to set. resizer(); - - // Call on resize. Opera debounces their resize by default. - $(window).on('resize', resizer); - + + // Call on resize. Opera debounces their resize by default. + $(window).on('resize.fittext orientationchange.fittext', resizer); + }); }; -})( jQuery ); \ No newline at end of file +})( jQuery );