High magnification requires content to reflow into a single column rather than relying on horizontal scrolling
Aliases: single-column reflow · 400% zoom reflow · narrow viewport reflow
What it is
Magnify a typical desktop width about four times and the viewport matches a very narrow phone. Content then needs to reflow into one vertical column, rather than asking the reader to hunt the rest of a sentence sideways. Horizontal scrolling as the main strategy for body text is too expensive at high magnification: every line-end has to be pushed across, then pulled back to find the next line start.
Reflow means columns stack. It does not mean the canvas grows wider. A wide canvas with a sideways drag still “has” the content; reading has already broken.
Why it happens
After screen magnification or high browser zoom, the visible patch is tiny. Reading depends on one sweep from line start to line end; if the end sits outside the viewport, the sweep is cut and working memory has to hold “the last half-clause” until the sideways drag finishes. Low-vision users often stack a magnifier on top, so a horizontal drag takes the magnifier window with it, off the line start — the cost is relocating, not one extra swipe.
Single-column reflow puts the next block under the current one, so motion direction matches reading direction. Multi-column layouts, pinned side-by-side toolbars, and primary actions glued to the right edge either demand a sideways search or push the action out of view. Objects that are two-dimensional by nature — data tables, maps, toolbars — may keep 2D scrolling; body copy, forms and navigation may not.
Studying it
Zoom a ~1280-wide window to 400%, or set the viewport to 320 CSS pixels, as equivalent high-magnification reflow conditions. The task is to finish a piece of prose and submit a form, and to see whether completion depends on a horizontal drag.
Independent variables: column count, presence of a pinned side-by-side rail, whether main content may change column. Dependent variables: horizontal-scroll counts to finish the task, in-line sentences that are cut, how often a magnifier user has to relocate the line start.
Sample magazine-style multi-column homes and admin side-by-side navigation; do not sample only marketing long-pages that are already a single column. Reflow under screen magnifiers (Magnifier / Zoom) is not equivalent to browser zoom; look at at least one of each.
Where it stops holding
Images, maps, diagrams, data tables that must be read in two dimensions, and toolbars may keep 2D scrolling, because crushing them into a column destroys spatial relations. Side-by-side teaching content (source / translation) loses its function if forced into one column; it needs a switchable stack, not a naive split. Print pages and slide canvases are designed as pages; reflow breaks that unit. Vertical writing does not read as “a downward single column,” and the horizontal-script reflow rule does not transfer.
Applying it
- At an equivalent 320-wide (or desktop 400% zoom), stack body copy, forms and navigation into one column. Do not leave the second half of a sentence on a sideways canvas.
- Collapse a side rail or move it before/after the main column; do not keep it competing for the same row at high magnification.
- Allow 2D objects (tables, maps, canvases) their own horizontal scroll, but isolate that scroller from the page scroller so the whole page is not dragged sideways.
- How to check: at 400% in a 1280 window, allow only vertical scrolling, read the main prose and complete the key form. Any step that requires a left–right search is a reflow fail.
Related
- Same group: J2.11.1 Browser zoom and text-only resize are different magnification paths and must be tested separately · J2.11.3 After zoom, interactive elements must not be squeezed into accidental activation · J2.11.4 Text baked into images cannot scale with page text
- Nearby: J2.02 Text Resize · J2.07 Low Vision and Screen Magnification · J2.08 Reading Order
- Search terms:
reflow·400% zoom·single-column layout