measure_text
Predict text layout dimensions and overflow risk for UI containers without a browser. Validate if text fits fixed-height containers and detect breakpoint overflow.
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. |