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