{"id":25602,"library":"fontfill","title":"fontfill","description":"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.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/Xanderite/fontfill","tags":["javascript"],"install":[{"cmd":"npm install fontfill","lang":"bash","label":"npm"},{"cmd":"yarn add fontfill","lang":"bash","label":"yarn"},{"cmd":"pnpm add fontfill","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default import is not available; use named import.","wrong":"import AutoFittingText from 'fontfill'","symbol":"AutoFittingText","correct":"import { AutoFittingText } from 'fontfill'"},{"note":"CommonJS requires destructuring for named export.","wrong":"const AutoFittingText = require('fontfill')","symbol":"AutoFittingText (CommonJS)","correct":"const { AutoFittingText } = require('fontfill')"},{"note":"Global namespace is 'fontfill' containing the class.","wrong":"const AutoFittingText = window.fontfill","symbol":"AutoFittingText (Global)","correct":"const AutoFittingText = window.fontfill.AutoFittingText"}],"quickstart":{"code":"import { AutoFittingText } from 'fontfill';\n\nconst targetDiv = document.querySelector('.target-div');\nconst width = targetDiv.clientWidth;\nconst height = targetDiv.clientHeight;\nconst targetString = 'Hello, world! This text will be auto-fit into the box.';\nconst fit = new AutoFittingText(width, height, {\n  targetString: targetString,\n  family: window.getComputedStyle(targetDiv).fontFamily,\n  lineHeight: 1.2\n});\ntargetDiv.innerHTML = fit.metrics.lines.join('<br/>');\ntargetDiv.style.fontSize = fit.metrics.fontSize + 'px';","lang":"javascript","description":"Create an AutoFittingText instance for a div, compute best-fit font size, and apply it."},"warnings":[{"fix":"Consider alternative libraries like textfit or fitty for production use.","message":"Library is in prototypical state with no unit tests; use with caution.","severity":"gotcha","affected_versions":"<=1.0.0"},{"fix":"Ensure dimensions are numbers (e.g., element.clientWidth, element.clientHeight).","message":"The AutoFittingText constructor requires width and height as numbers; passing strings or undefined may cause NaN errors.","severity":"gotcha","affected_versions":"<=1.0.0"},{"fix":"Use a number like 1.2 instead of '1.2em' or '1.2' as a string.","message":"lineHeight option should be a scalar (unitless number), not a CSS string with units.","severity":"gotcha","affected_versions":"<=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Verify container has layout dimensions: console.log(width, height) before instantiation.","cause":"AutoFittingText metrics not computed if width or height is 0 or NaN.","error":"TypeError: Cannot read property 'lines' of undefined"},{"fix":"Use 'fontfill' for bundled builds, or configure bundler to handle ES module imports.","cause":"Importing from 'fontfill/src' requires ES2015 source but bundler may not resolve correctly.","error":"Module not found: Error: Can't resolve 'fontfill/src'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}