measure_text
Measure text dimensions and overflow risk for UI layouts without browser dependencies. Validate text fits containers, detect responsive breakpoint issues, and ensure compliance with line constraints before design or development.
Instructions
Predict text layout dimensions — height, line count, overflow risk, and breakpoint behavior — without a browser or Figma connection.
Prerequisites: None — runs entirely in Node.js using canvas-based text measurement. No Figma or AI dependencies.
Returns on success: Result object with { height: number (px), lineCount: number, lines: string[] (wrapped line strings) }. If containerHeight is provided, adds { overflow: { overflows: boolean, excessHeight: number } }. If checkBreakpoints is true, adds { breakpoints: { mobile: {...}, tablet: {...}, desktop: {...} } } each with the same height/lineCount/overflow shape.
Error behavior: Never throws — returns 0 height and 1 line if the font string is unparseable.
Use this tool: to validate that a UI label or body text will fit inside a fixed-height container before generating Figma designs or code, to detect which breakpoints cause overflow for responsive layouts, or to size containers accurately without a live browser. Particularly useful when a spec defines a maxLines constraint and you need to verify the real text content respects it.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| text | Yes | The text content to measure. Include all characters including newlines if the source content has them. | |
| maxWidth | Yes | Maximum container width in pixels for line wrapping calculations. | |
| font | No | CSS font shorthand string used for measurement (e.g. '16px Inter', 'bold 14px sans-serif', '500 13px/1.4 system-ui'). Use the same font as your target UI for accurate results. | 16px sans-serif |
| lineHeight | No | Line height in pixels. Defaults to fontSize × 1.5 if omitted. Provide this to match your Tailwind leading-* or Figma line height setting. | |
| containerHeight | No | If provided, checks whether the measured text fits within this height (in pixels) and reports overflow. Omit if you only need dimensions. | |
| checkBreakpoints | No | If true, also measures text at mobile (375px), tablet (768px), and desktop (1280px) widths in addition to maxWidth. Useful for responsive overflow detection. |