text-fitter

Pure javascript implementation that fixes any content to fit the element. View demo.

You should use this project if ...

Any kind of layouting should be done (if possible) in CSS. If the performance of your site is important, use this project only to a limited extend. Try to use relative fonts wherever possible. This project might be interesting for you if you are trying to layout unknown content or for small effects.

Quickstart

Install the package with

npm install text-fitter --save

ES7

import {fix} from 'text-fitter';
const elements = document.querySelectorAll('.any-class');
fix(elements); // elements can be an array or html list

VanillaJS

<script type="text/javascript" src="dist/javascript.js"></script>
<script>
window.onload = function() {
  var elements = document.getElementById('any-id');
  TextFitter.fix(elements); // elements can be an array or html list
};
</script>

Disable font enlargement

If the content is too small to fill the entire element, content is enlarged. This is set by default.

To disable set second parameter to false:

fix(elements, false); // elements can be an array or html list

The second parameter is optional and is set by default to false.