Skip to content

Commit

Permalink
Merge pull request #50 from kevinsawicki/patch-1
Browse files Browse the repository at this point in the history
Fence code blocks
  • Loading branch information
davatron5000 committed Jan 8, 2013
2 parents a9d10bb f6d3f1d commit b7b1983
Showing 1 changed file with 17 additions and 11 deletions.
28 changes: 17 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 4,37 @@ FitText makes font-sizes flexible. Use this plugin on your responsive design for
## How it works
Here is a simple FitText setup:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>
```html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>
```

Your text should now fluidly resize, by default: Font-size = 1/10th of the element's width.

## 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`.

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)

```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)
```

This will hopefully give you a level of "control" that might not be pixel perfect, but resizes smoothly & nicely.

## minFontSize & maxFontSize
FitText now allows you to specify two optional pixel values: `minFontSize` and `maxFontSize`. Great for situations when you want to preserve hierarchy.

jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })
```javascript
jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })
```

## CSS FAQ

- Make sure your headline has width!
- Use `display: block;` OR `display: inline-block;` a specified width (i.e. `width: 100%`).
- Use `display: block;` OR `display: inline-block;` a specified width (i.e. `width: 100%`).
- Tweak until you like it.
- Set a No-JS fallback font-size in your CSS.
- Fire
Expand All @@ -39,7 45,7 @@ FitText now allows you to specify two optional pixel values: `minFontSize` and `
* `v 1.0` - Initial Release

## In Use:
- [Trent Walton](http://trentwalton.com)
- [Trent Walton](http://trentwalton.com)

If you want more exact fitting text, there are plugins for that 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.

Expand Down

0 comments on commit b7b1983

Please sign in to comment.