Skip to content
Font-To-Width
JavaScript HTML
Branch: master
Clone or download

Latest commit

Latest commit fa55800 Feb 27, 2019

Files

Permalink
Type Name Latest commit message Commit time
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–2018 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

  • 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
variableFont A font object as in fonts, plus optional axis, min, max properties
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
maxLetterSpace none Maximum allowed letterspace stretching when font size maxes out
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

  • 2018-10-04 Add maxLetterSpace option

  • 2018-02-05 Remove jQuery dependency; better font load detection; add support for variable fonts

  • 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
You can’t perform that action at this time.