fontfill

library1.0.0jsnpmunverified

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.

web-framework

npm install fontfill

github ↗package ↗

INSTALL

IMPORT

SIG · FONTFILL

fontfill

web-frameworkjavascriptv1.0.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

AutoFittingText

✓ import { AutoFittingText } from 'fontfill'

✗ import AutoFittingText from 'fontfill'

Default import is not available; use named import.

AutoFittingText (CommonJS)

✓ const { AutoFittingText } = require('fontfill')

✗ const AutoFittingText = require('fontfill')

CommonJS requires destructuring for named export.

AutoFittingText (Global)

✓ const AutoFittingText = window.fontfill.AutoFittingText

✗ const AutoFittingText = window.fontfill

Global namespace is 'fontfill' containing the class.

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

Debug

Known issues

gotchaLibrary is in prototypical state with no unit tests; use with caution.

fix

Consider alternative libraries like textfit or fitty for production use.

affects: <=1.0.0

gotchaThe 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).

affects: <=1.0.0

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

affects: <=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read property 'lines' of undefined

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

fix

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

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

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.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/Xanderite/fontfill ↗

packagehttps://www.npmjs.com/package/fontfill ↗