fontfill

1.0.0 verified Fri May 01 auth: no javascript

Auto-fill a box with arbitrary text by fitting it into a container of specified width and height. Version 1.0.0, released as an early-stage library with no unit tests (only e2e) and a prototypical codebase. Key differentiators: reactive state for watching fit changes, multi-format builds (ES2015 source, ES5 commonjs, commonjs2, global). Current status: active but early development, author notes not accepting PRs due to prototypical state. Supports min/max font size options, custom font weight, and line-by-line fitting.

Common errors

error TypeError: Cannot read property 'lines' of undefined ↓

cause AutoFittingText metrics not computed if width or height is 0 or NaN.

fix

Verify container has layout dimensions: console.log(width, height) before instantiation.

error Module not found: Error: Can't resolve 'fontfill/src' ↓

cause Importing from 'fontfill/src' requires ES2015 source but bundler may not resolve correctly.

fix

Use 'fontfill' for bundled builds, or configure bundler to handle ES module imports.

Warnings

gotcha Library is in prototypical state with no unit tests; use with caution. ↓

fix Consider alternative libraries like textfit or fitty for production use.

gotcha The AutoFittingText constructor requires width and height as numbers; passing strings or undefined may cause NaN errors. ↓

fix Ensure dimensions are numbers (e.g., element.clientWidth, element.clientHeight).

gotcha lineHeight option should be a scalar (unitless number), not a CSS string with units. ↓

fix Use a number like 1.2 instead of '1.2em' or '1.2' as a string.

Install

npm install fontfill

yarn add fontfill

pnpm add fontfill

Imports

AutoFittingText

wrong

import AutoFittingText from 'fontfill'

correct

import { AutoFittingText } from 'fontfill'

Default import is not available; use named import.

AutoFittingText (CommonJS)

wrong

const AutoFittingText = require('fontfill')

correct

const { AutoFittingText } = require('fontfill')

CommonJS requires destructuring for named export.

AutoFittingText (Global)

wrong

const AutoFittingText = window.fontfill

correct

const AutoFittingText = window.fontfill.AutoFittingText

Global namespace is 'fontfill' containing the class.

Quickstart

Create an AutoFittingText instance for a div, compute best-fit font size, and apply it.

import { AutoFittingText } from 'fontfill';

const targetDiv = document.querySelector('.target-div');
const width = targetDiv.clientWidth;
const height = targetDiv.clientHeight;
const targetString = 'Hello, world! This text will be auto-fit into the box.';
const fit = new AutoFittingText(width, height, {
  targetString: targetString,
  family: window.getComputedStyle(targetDiv).fontFamily,
  lineHeight: 1.2
});
targetDiv.innerHTML = fit.metrics.lines.join('<br/>');
targetDiv.style.fontSize = fit.metrics.fontSize + 'px';