Font-To-Width
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
README.md
demo.html
font-to-width.js

README.md

Font-To-Width FTW

Font-To-Width if a small Javascript routine which fits text to the width of an element using multiple font styles of different widths.

© 2014–2015 Chris Lewis and Nick Sherman

Freely made available under the MIT license: http://opensource.org/licenses/MIT

Usage

<div class="ftw">Text To Fit</div>
<script> 
	new FontToWidth({
		fonts: [
			'Font Family Name String',
			{ fontFamily: 'Complete CSS Spec', fontWeight: 'normal', fontStyle: 'italic' },
			…
		];
		elements: ".ftw, .css-selector-or-jQuery-object"
	}); 
</script>

Notes

  • jQuery is required and must be present in the page before any FTW instances are created
  • Multiple FontToWidth instances can be created using different font lists and elements.
  • Elements can be anything that is display:block or inline-block
  • If no fonts are specified, behavior reverts to a simple scale-to-width system

Options

All options are optional.

Name Default Description
fonts A list of font-family names or sets of CSS style parameters. If empty, existing fonts are scaled to fit
elements ".ftw, .font-to-width, .fonttowidth" A CSS selector or jQuery object specifying which elements should apply FTW
minLetterSpace -0.04 A very small, probably negative number indicating degree of allowed tightening
minFontSize 1.0 Allow scaling of font-size to this ratio of original
maxFontSize 1.0 Allow scaling of font-size to this ratio of original
preferredFit "tight" Whether to prefer "tight" or "loose" letterspacing
preferredSize "large" Whether to prefer "large" or "small" font-size

History

  • 2015-03-04

  • Added no-fonts scale-to-width behavior

  • 2015-02-28

  • Added ability to specify complete CSS spec for each font style

  • Added min/maxFontSize, preferredFit/Size options

  • Added demo.html for usage hints

  • Support hyphenated-type or camelCaseType options

  • Bugfixes and safer coding style

  • 2014-03-31 Initial release

  • Only option is 'min-letter-space'

  • Fitting errs on the side of tight spacing