Playground

Powered by @chenglou/pretext

Liquid Typography

Explore how text wraps as the available space changes. Move the circular opening with your pointer, touch, or keyboard.

The Void

Move your pointer, tap the text, or focus the canvas and use the arrow keys. Press Escape to reset the opening.

Readable text depends on more than the words. The width of a column, the space between lines, and the shape of a typeface all influence how a paragraph feels. A layout that looks comfortable on a wide screen may need a different arrangement on a phone. A heading can wrap, a column can narrow, and a familiar paragraph can take on a different rhythm. This experiment gives each line its own available width. As the circular opening moves, some lines become shorter while others return to the full column. The text stays the same; only the space around it changes. Move the opening towards an edge to leave room on the opposite side. Bring it into the middle to divide the column. Notice where a long word moves to the next line and where a short phrase can still fit. The drawing is made on canvas, while the surrounding headings and controls remain ordinary page elements. The displayed timings describe one part of the calculation, not the performance of the entire page. Small experiments like this make layout decisions visible. Instead of treating a line break as an invisible browser decision, they turn it into something that can be inspected, adjusted, and compared. There is no single arrangement that suits every paragraph or every screen. The useful question is whether the result remains clear as the space changes, and whether the reader can follow the words without fighting the layout.
Layout calculation: 0msLines: 0Observed frames/s: 0Rendering: Canvas

Shape Flow

Text wraps around a positioned shape — adjust radius and position with the sliders

An illustration changes the space available to a paragraph. A small circle leaves most lines untouched; a larger one asks the text to find another route. Use the controls to change the radius and vertical position. Each line is laid out against the space that remains beside the circle, so the boundary changes gradually rather than forming a rectangular gap. Moving the circle towards the top affects the opening lines. Moving it down leaves the beginning of the paragraph in place and changes the lines that follow. The words do not need to change for the composition to feel different. A small adjustment to the available width can move an entire word, which changes the line below it as well. Today, text moves between screens of different sizes, but the layout question remains: how do we arrange it so people can read it easily?

Balanced Text

A binary search finds a narrower text width without adding lines. Compare the resulting line widths below.

Computing balanced layout...

How It Works

The demo prepares text with @chenglou/pretext when it loads. On each animation frame, it calculates the available width beside the circular opening, lays out each line, and draws the text on canvas.

The statistics report the line-layout calculation and observed frame rate. Layout timing excludes drawing; results vary by browser and device. Width comparisons use a 500px reference layout; their text previews wrap to fit smaller screens.