Skip to content

Calculate compressor ratio automatically #90

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Calculate compressor ratio automatically #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5ffe92f
calculate compressor ratio automatically
petewarman Oct 30, 2013
8fc7e2d
removed reference to compressor from readme
petewarman Oct 30, 2013
a692940
need to reset width for calculation
petewarman Oct 30, 2013
182b267
removed unnecessary heading from example
petewarman Oct 30, 2013
e4155eb
added multiline and scale parameters
petewarman Oct 30, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 1 addition & 13 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,11 @@ Here is a simple FitText setup:
</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`.

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

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

## CSS FAQ
Expand Down
4 changes: 2 additions & 2 deletions example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ <h1 id="fittext3">Squeeze with FitText</h1>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
$("#fittext1").fitText();
$("#fittext2").fitText(1.2);
$("#fittext3").fitText(1.1, { minFontSize: '50px', maxFontSize: '75px' });
$("#fittext2").fitText({ lineCount: 3, scale: 90 });
$("#fittext3").fitText({ minFontSize: '50px', maxFontSize: '75px' });
</script>

</body>
Expand Down
24 changes: 18 additions & 6 deletions jquery.fittext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,35 @@

(function( $ ){

$.fn.fitText = function( kompressor, options ) {
$.fn.fitText = function( options ) {

// Setup options
var compressor = kompressor || 1,
var fontRatio,
settings = $.extend({
'minFontSize' : Number.NEGATIVE_INFINITY,
'maxFontSize' : Number.POSITIVE_INFINITY
'maxFontSize' : Number.POSITIVE_INFINITY,
'lineCount' : 1,
'scale': 100
}, options);

return this.each(function(){

// Store the object
// Store the object & save previous position value
var $this = $(this);

// Resizer() resizes items based on the object width divided by the compressor * 10
// Temporarily force all the text onto one line and allow the element's width to expand to accommodate it
$this.css({'white-space':'nowrap','position':'absolute','width':'auto'});

// Calculate fontRatio ratio for this typeface
fontRatio = parseFloat($this.width()) / parseFloat($this.css('font-size'));

// Reset the temporary css values.
$this.css({'position':'','width':'','white-space':''});

// Resizer() resizes items based on the object width divided by the fontRatio
// Subtract one px for each line to get around rounding errors
var resizer = function () {
$this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
$this.css('font-size', Math.max(Math.min( ((settings.scale/100) * settings.lineCount * $this.width() / fontRatio) - settings.lineCount, parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
};

// Call once to set.
Expand Down