measure_text
Verify text fits within container constraints by measuring height, line count, overflow, and breakpoints for responsive design.
Instructions
Predict text layout — height, line count, overflow, breakpoint behavior — via Node canvas. No browser, Figma, or AI needed.
Returns: { height, lineCount, lines[] }; plus { overflow } when containerHeight is given; plus { breakpoints: { mobile, tablet, desktop } } when checkBreakpoints=true. Never throws (0 height / 1 line for unparseable fonts). Use to verify labels or body copy fit fixed containers or maxLines constraints before generating designs or code.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| 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 |
| 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. | |
| 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. |