The Stretchy Type Block: how it works under the hood (and why that’s “weird” but smart)

If you’ve ever wanted a headline that always fits its container—no manual font sizing, no media queries—Stretchy Type delivers. It’s a Gutenberg block that scales your text to the exact width of its container in both the editor and on the frontend.

The core trick

• SVG wrapper: Your text is rendered inside an <svg> using a <foreignObject> with a <span> for the actual text.
• Live measurement: A ResizeObserver measures the natural size of that <span> (its offset width and height).
• Dynamic viewBox: The plugin updates the SVG’s viewBox to 0 0 [spanWidth] [spanHeight]. Because the SVG is set to fill the container, the text scales perfectly to fit.

In plain terms: it measures the text once, then lets SVG do the scaling math for every layout change.

Why wrap text in an SVG?

• Precision scaling: SVG’s viewBox gives pixel-perfect, resolution-independent scaling.
• Simpler logic: One measurement source; no calculating font sizes or breakpoints.
• Consistent UX: Works the same in the editor and on the frontend.

Does that sound a bit weird?

A little, because HTML text inside an SVG <foreignObject> isn’t the usual path for typography. But here it’s intentional:

• It’s a niche, robust solution for single-line, statement-making headlines where “fit” matters more than standard flow text behavior.

Trade-offs to know

• Semantics and a11y: Content sits in an SVG; generally fine, but test with screen readers.
• Selection/feel: Text selection can feel different than ordinary HTML flow text.
• CSS constraints: The block forces white-space: nowrap for reliable measurement; multi-line wrapping isn’t the goal.
• Browser nuances: Modern browsers support foreignObject, but it’s a less-traveled path.

When to use it

• Hero headlines, banners, cards—any spot where your text must always fill the width and look consistent across breakpoints.
• Not ideal for paragraphs or multi-line body copy. For those, use responsive CSS (e.g., clamp() and container queries).

TL;DR

Stretchy Type measures the real size of your headline, sets the SVG’s viewBox to that size, and lets the SVG scale the text to perfectly fill its container. It’s unconventional by HTML standards, but a clever, reliable approach for bold, single-line typography.