Ragged Blocks: Rendering Structured Text With Style
summary
A layout algorithm builds ragged blocks (aka rocks) as rectilinear polygons that let nested syntax display borders and padding while preserving original line positions; a TypeScript implementation (≈5,000 LOC) and NPM library produce polygonal outlines and tab-stop support. Evaluation on six GitHub files (TypeScript, Python, Haskell) shows Rocks and S-Blocks reduce mean line width vs rectangular boxes and Rocks matches S-Blocks on width while scoring better on a novel mesh distance fidelity metric.
AI-written summary · about
chapters (6)
- 0:00Introduction and motivation
- 1:59Introducing ragged blocks
- 3:04Layout algorithm overview
- 5:49Implementation and evaluation
- 9:44Demo and resources
- 10:05Q&A session
related talks
24mRethinking Design Practices
23mGnarly by design: building systems with grit
35mScalable Design Systems with TypeScript
19mBeyond Grids: Interactive Graphical Substrates to Structure Digital Layout
49mBeautiful code: typography and visual programming
41mWeird Web & Curious Creation
50mEffortless Style
29mRethinking Design Practices