reflow ruler

Find Horizontal Overflow at a Chosen Viewport Width — Free

A page that looks fine on a desktop can still force sideways scrolling at a phone width. Compare measured content widths with the width you are testing, and see which patterns need rework first.

The proof surface

The large-print reflow estimate counts pages for a document. This measures horizontal overflow in CSS pixels at a chosen viewport width and flags only patterns that contain a fixed-width element.

Inputscreen or pattern | measured content width CSS px | fixed-width elements; test viewport width css px

Rare deviceThe large-print reflow estimate counts pages for a document. This measures horizontal overflow in CSS pixels at a chosen viewport width and flags only patterns that contain a fixed-width element.

Output artifactCSS px overflow per row with transparent workings

Cost$0 · local-first · one free run · samples labelled

Sample, not your facts: Illustrative sample: Checkout header | 360 | 2; Order table | 300 | 0. With test viewport width css px set to 320, total css px overflow is 40.00 CSS px overflow.

Why the flat version breaks

Testing one page only

Shared headers and footers appear everywhere.

Ignoring zoom

Reflow requirements are about magnification as well as device width.

Calling zero overflow compliant

Reading order, contrast and operability are not measured here.

How to work the reflow ruler

Test at a width you can name

Use a real target such as 320 CSS pixels at 400 percent zoom, or the narrowest phone you support. The setting is your test condition, not a conformance threshold.

Measure the widest content

Read the actual scroll width of the pattern rather than the element you suspect. A table, preformatted block or long unbroken string often sets the real width.

Record fixed-width elements

Count elements in that pattern with a hard width, minimum width or unbreakable content. Overflow with at least one such element is flagged; the sample flags the 360 px header by 40 px.

Rework, then re-measure

Let content wrap, shorten fixed widths or scroll the block deliberately inside its own container. Re-run the check after the change; this arithmetic identifies width risk and does not certify WCAG conformance.

What the reflow ruler replaces

Question	Before	Visible working
Testing one page only	Shared headers and footers appear everywhere.	Measure the widest content
Ignoring zoom	Reflow requirements are about magnification as well as device width.	Record fixed-width elements
Calling zero overflow compliant	Reading order, contrast and operability are not measured here.	Rework, then re-measure

A local arithmetic aid replaces hand calculation, not expert review. No paid AI service is needed.

Run it on the samples, right here

FIRST-LOAD

Research prototype — checkout unavailable. Input is processed locally and a draft is saved automatically in this browser profile when storage is available. Reset to sample clears that draft; Pro history has its own clear button. A state link encodes your inputs in its URL: share only non-sensitive rows. Browser history, clipboard and anyone receiving the link may retain it. Optional AI use below leaves this device; it is not required.

This measures user-supplied pixel widths and is not an accessibility audit or a WCAG conformance verdict. Have the repaired pattern re-tested with keyboard, zoom and assistive technology by a qualified reviewer.

Data note: Everything runs in this browser tab on the reflow ruler: your screen or pattern | measured content width CSS px | fixed-width elements stays on this device, nothing is uploaded, and the reading is rebuilt only when you press run.

Go deeper: the companion app files the same reading as a paper ticker strip

The article demo above runs without limits. The companion app keeps a local history, exports the rows as CSV, prints the reflow ruler reading, and holds your drafts on this device — one complete free run; the proposed $4 one-time filing layer is not currently for sale.

The reflow ruler reading is complete for free. The optional $4 layer adds print, row CSV and the last five local reading summaries; it does not add hidden answers. Checkout is not configured yet; the article demo remains unlimited.

Open the find horizontal overflow at a chosen viewport width companion

Boundary

What this is built on

Method: Count elements in that pattern with a hard width, minimum width or unbreakable content. Overflow with at least one such element is flagged; the sample flags the 360 px header by 40 px.
All sample records are invented examples. The app does not fetch measurements, policies, files or personal records.
Google’s official pricing page, fetched 2026-09-29, lists free-tier access including AI Studio. Optional formatting only; limits and availability can change. Free-tier content may be used to improve products. Never paste private records there.

Before: Shared headers and footers appear everywhere. After: the reflow ruler shows the working beside each named row so the reader can change the assumption and inspect the consequence.

Optional AI formatting, not calculation

For this reflow ruler, use the free AI Studio interface only if available to you, with no paid API key. Manual entry completes the same workflow for free. Supply only fictional or non-sensitive notes. Review its output against the source; never paste unresolved questions into the numeric rows.

Format my non-sensitive notes for a reflow ruler. Return plain rows only: screen or pattern | measured content width CSS px | fixed-width elements. Preserve supplied quantities exactly. Do not guess missing values; list questions separately. Do not calculate or add advice. I will check every row before pasting into the local tool.

Accepted schema: screen or pattern | measured content width CSS px | fixed-width elements. No AI response is executed as code.