Headlines and paragraphs wrapping

The first of the two biggest blockers. Text has to rewrap into the space it is given, and its box has to grow taller to hold the extra lines. When the box height is fixed, the extra lines are simply cut away.

Look for

A paragraph that ends mid-sentence, a headline with its descenders sliced, and a long filename that pushes the page sideways.

A · Expected pass

Fluid width, content-driven height, type scaled down at narrow widths.

A long headline that has to rewrap onto several lines as the space narrows

This paragraph is deliberately long so that it changes line count several times between the desktop canvas and a 320 pixel phone. At full width it runs to three or four lines. At 400% zoom it runs to a dozen or more. Because its height is driven by its content rather than a fixed number, every one of those lines gets the room it needs, and the block below it simply moves further down the page. Nothing is clipped and nothing overlaps.

Long token, allowed to break: Reflow_acceptance_criteria_documentation_v4_FINAL.pdf

B · Known risk

Fixed-height boxes, fixed pixel width, and an unbreakable long token.

A long headline that has to rewrap onto several lines as the space narrows

This paragraph sits in a box that was cut to exactly three lines at the desktop width, and it carries a fixed pixel width as well. Narrow the canvas and it needs eight or ten lines instead. They do not appear. The box stays at its authored height and the sentence ends without warning, which is a loss of content under 1.4.10.

Long token, no break allowed: Reflow_acceptance_criteria_documentation_v4_FINAL.pdf