Skip to content

Add editorial reflow demo with drop cap and pull quote#19

Open
yuribodo wants to merge 1 commit into
chenglou:mainfrom
yuribodo:demo/old-man-sea
Open

Add editorial reflow demo with drop cap and pull quote#19
yuribodo wants to merge 1 commit into
chenglou:mainfrom
yuribodo:demo/old-man-sea

Conversation

@yuribodo
Copy link
Copy Markdown

Summary

  • New demo page at /demos/old-man-sea — an editorial reading experience that showcases layoutNextLine() for variable-width text flow
  • Drop cap: large initial letter with body text flowing around it for the first three lines
  • Pull quote: positioned as a mid-flow obstacle on the right side, body text wraps around it using per-line width adjustment
  • Live reflow: resize the window and all text reflows in real time with zero DOM reads in the layout path
  • Responsive: pull quote hides on narrow viewports (<420px stage width)
  • Performance pill: shows reflow timing and line count live
  • Added card to the demo index page

This demo dogfoods layoutNextLine() for all body text, exercising the streaming variable-width layout path as suggested in AGENTS.md. The "Old Man and the Sea" resize/reflow demo was listed as a priority in TODO.md.

Test plan

  • bun run check passes (tsc + oxlint)
  • bun test passes (60/60 unit tests)
  • Open /demos/old-man-sea and verify drop cap, pull quote, and text rendering
  • Resize the window horizontally — text should reflow smoothly
  • Resize to narrow width (<400px) — pull quote should disappear gracefully
  • Check performance pill shows sub-millisecond reflow times
  • Verify text is selectable

New demo page at /demos/old-man-sea showcasing layoutNextLine() for
variable-width text flow: a drop cap that indents the first three lines,
a pull quote positioned as a mid-flow obstacle with body text wrapping
around it, and live reflow on resize with zero DOM reads. Responsive
layout hides the pull quote on narrow viewports.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant