text-fit-static

A static text fitting utility that adjusts font size during build time to fit text within fixed containers. Perfect for static site generators like Astro.

Features

• Build-time text fitting
• Multi-line text support
• Static output - no client-side JavaScript required
• TypeScript support
• Framework agnostic

Installation

npm install text-fit-static

Usage

Basic Usage

import { fitText } from 'text-fit-static';

const result = fitText('Your text here', {
  containerWidth: 300,
  containerHeight: 200,
  minFontSize: 12,
  maxFontSize: 48,
  lineHeight: 1.2,
  fontFamily: 'Arial'
});

console.log(result);
// {
//   fontSize: 24,
//   css: 'font-size: 24px; line-height: 1.2; font-family: Arial;',
//   lines: ['Your text here'],
//   overflow: false
// }

Astro Integration

// src/components/FitText.astro
---
import { createTextFitComponent } from 'text-fit-static/astro';

const textFit = createTextFitComponent({
  fontFamily: 'Arial',
  lineHeight: 1.2
});

const { text, width, height } = Astro.props;
const result = textFit(text, {
  containerWidth: width,
  containerHeight: height
});
---

<div style={result.css}>
  {result.lines.map(line => <div>{line}</div>)}
</div>

API

TextFitOptions

• containerWidth (required): Width of the container in pixels
• containerHeight (required): Height of the container in pixels
• minFontSize (optional): Minimum font size in pixels (default: 8)
• maxFontSize (optional): Maximum font size in pixels (default: 100)
• lineHeight (optional): Line height multiplier (default: 1.2)
• fontFamily (optional): Font family to use (default: 'Arial')
• fontWeight (optional): Font weight to use (default: 'normal')

TextFitResult

• fontSize: Calculated optimal font size
• css: Ready-to-use CSS string
• lines: Array of text lines after wrapping
• overflow: Boolean indicating if text overflows even at minimum font size

License

MIT