Articles

A gem grid may scroll sideways while explanations still wrap

A fictional spatial gem diagram can need sideways movement because its row-and-column relationships are part of the information.

UpdatedEditorial review

A fictional spatial gem diagram can need sideways movement because its row-and-column relationships are part of the information. That does not mean the whole page should become wide. The diagram may preserve its two-dimensional layout inside its own region, while the explanation beside or below it reflows into a single readable column.

Why the diagram can remain two-dimensional

Hypothetically, imagine a four-row gem grid where each gem’s meaning depends on its row, column, and nearby legend label. If the grid is squeezed into a narrow phone screen, labels may overlap and relationships may become unclear. A contained horizontal scroll area can therefore be a sensible hypothetical design choice for this essential grid region.

WCAG’s reflow guidance describes narrow-width reading without two-dimensional scrolling, while recognising that content which is essentially two-dimensional, such as a grid, can be treated differently. Read the W3C explanation of reflow for the precise scope and exceptions.

What should still wrap around it

The surrounding explanation is different. A paragraph defining “top-row gem” should wrap within the available width rather than forcing the entire page to scroll sideways. The legend should stay close enough to the grid for its labels to remain understandable, but it should not widen every instruction, note, or heading on the screen.

Hypothetical example: on a 320 CSS-pixel viewport, the grid region scrolls horizontally, while the accompanying explanation breaks into lines within the viewport. A reader moves sideways only to inspect the grid, not to find the final words of the explanation.

How to check the boundary

First, identify which region truly depends on two dimensions: here, the fictional grid. Then test the legend, headings, help text, and any status message separately. If those surrounding elements also require page-wide horizontal scrolling, the grid exception does not automatically justify that design. The practical question is not whether any sideways movement exists, but whether it is confined to the spatial content that needs it.

Reading note:This article is for information, rule reading, and risk awareness only. It does not provide account, payment, or betting services, and it does not promise any result. Adults should follow applicable local rules.
✈Telegram