Skip to content
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

Jump to bottom

Proportion sizing #30

Closed
wants to merge 3 commits into from
Closed

Proportion sizing #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e8158a6
whitespace fixes
desandro May 22, 2012
be08435
Use proportional sizing to get exact fit
desandro May 22, 2012
f8220df
Use innerWidth of parent element
desandro May 24, 2012
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
1 change: 0 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ FitText now allows you to specify two optional pixel values: `minFontSize` and `

## CSS Tips

* 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. `$('<div>').fitText()` will NOT work
Expand Down
8 changes: 4 additions & 4 deletions example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@
<div class="container">
<header>
<h1 id="fittext1">Squeeze with FitText</h1>
<h1 id="fittext2">Squeeze with FitText</h1>
<h1 id="fittext3">Squeeze with FitText</h1>
<h1 id="fittext2">FitText</h1>
<h1 id="fittext3">FitText like skinny jeans</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Expand All @@ -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: 50, maxFontSize: '75px' });
$("#fittext2").fitText();
$("#fittext3").fitText(0.9, { minFontSize: 50, maxFontSize: '75px' });
</script>

</body>
Expand Down
47 changes: 29 additions & 18 deletions jquery.fittext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,53 @@
/*global jQuery */
/*!
/*!
* FitText.js 1.0
*
* 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( $ ){


var isStyleAdded;

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

var settings = {
'minFontSize' : Number.NEGATIVE_INFINITY,

// add .fit-text <style> to <head>
if ( !isStyleAdded ) {
$('head').append('<style>.fit-text{ display: inline-block; clear: both; white-space: pre; }</style>');
isStyleAdded = true;
}

$(this).addClass('fit-text');

var settings = $.extend({
'minFontSize' : 1,
'maxFontSize' : Number.POSITIVE_INFINITY
};
}, options || {} );

return this.each(function(){
var $this = $(this); // store the object
var compressor = kompressor || 1; // set the compressor

if ( options ) {
$.extend( settings, options );
}

var compressor = kompressor || 1; // set the compressor

// 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)));
// get proportional size of text to fit in its parent
var size = ( parseInt( $this.css('font-size'), 10 ) / $this.width() ) * $this.parent().innerWidth();
size = Math.max( parseFloat( settings.minFontSize ), size );
size = Math.min( parseFloat( settings.maxFontSize ), size );
size *= compressor;
$this.css( 'font-size', size );
};

// Call once to set.
resizer();
// Call on resize. Opera debounces their resize by default.

// Call on resize. Opera debounces their resize by default.
$(window).resize(resizer);

});

};
Expand Down