Newspaper Column Spread Features Block for React

Edit the constants at the top of the file: STORIES for the three short stories, BRIEF for the one-liners, and HOURS for the chart's bars. The chart's caption (its total and its peak) is computed from HOURS, so the bars and the sentence under them always agree. The lead story and the masthead's counts are plain text in EDITION and the component.

The three stories sit in one box with CSS columns and a column-rule hairline in the border colour, so the line between them is the browser's own and always as tall as the shortest column. Each story is kept whole with break-inside-avoid. The stories are written to about the same length so one lands in each column; a much longer story would pull a neighbour down into its column. Below md the columns become one, with a rule between the stories.

Only the header, which fades up once when the page loads (and not at all with reduced motion). The rest of the page is static: the Continue links go where you point them, and the chart is a drawing of the data above it.

The bars are hidden from assistive technology and the caption under the chart says what they show: the hours covered, the total and the peak with its hour. Each story is an article with a level-three headline under the section's level-two heading, so a screen reader's heading list reads as the page's outline.

Everything is one column. The chart sits under the lead story with a rule between, it gets shorter, and the In brief list shows its first three lines so the page stays within about two and a half screens. Nothing scrolls sideways at 320 pixels.

Yes. The columns and the masthead follow the reading direction, the Continue arrows mirror, and the chart keeps its hours in order from earliest to latest on any page because a time axis isn't mirrored. Counts such as the mentions and the outlets are isolated so their digits stay intact.