Text flow guide

Every control

Every control in the panel, top to bottom. Effects, Background and Export start closed; tap a title to open it. Most sliders glide to their new value rather than jump.

Load and save

Save PNGButton: Saves the canvas as text-flow.png. See PNG.
CopyButton: Copies the same picture to the clipboard. See clipboard.

Text

The box at the top holds the text. Type or paste into it and the canvas sets it at once; each line break starts a new line. Under the presets, Lines counts the lines set, segments counts the words the browser found, and layout shows how long the last layout took in milliseconds.

Art · Code · Multilingual · Poetry · Lorem · LongPick one: Replaces the text in the box with a ready-made one. The pill stays lit when you then type your own.

Art: A short paragraph about making art. The page opens with it.

Code: A few lines of code and comments, one per line. The indents are dropped, since spaces only separate words.

Multilingual: The same sentence in English, French and German, written without accents, then one more sentence in English.

Poetry: Five short lines of verse with an empty line between the second and third.

Lorem: The usual Lorem ipsum filler.

Long: Several paragraphs' worth of text in one block, enough to fill a column or a circle.

Typography

FontChoice: The typeface: System sans (your device's own sans-serif), Serif (Georgia, or another serif font where Georgia is missing), or JetBrains Mono, a monospace font the lab serves itself.
SizeSlider · 10 to 72 · starts at 18: How tall the text is, in pixels. See font size.
WeightChoice: How thick the letters are, from Light to Bold. A font without that weight shows its nearest one. See font weight.
Line heightSlider · 1 to 3 · starts at 1.6: The distance from one line to the next, as a multiple of the size. See line height.
Letter spaceSlider · -2 to 8 · starts at 0: Extra pixels added for each letter when the words are measured, so the lines break as if the letters were spread. The letters themselves are drawn at their normal spacing. See letter spacing.
Word spaceSlider · -4 to 20 · starts at 0: Pixels added to, or taken from, the space between words. It changes where lines break; lines are drawn with normal spaces unless Align is Justify. See word spacing.
Text colorChoice: The colour of the text: White, Silver, Mint, Iris, Coral, Cyan or Gold. On the White and Cream backgrounds, pick a darker one.
AlignChoice: Lines each line up to the Left, Center or Right of the room it has, or Justify stretches the spaces so each line fills that room; the last line of each paragraph stays as it is. The room is the line's own width in every mode, so a circle, a wave or a perspective keeps its shape with any alignment. See text alignment and justification.

Layout

ModeChoice: How the text is laid out. Flow is one column that wraps around the shapes. Multi-column fills the first column down to the bottom padding, then carries on at the top of the next. Shrinkwrap finds the narrowest column that still fits the height of the frame, centred. Circular fills a circle in the middle of the frame and stops at its edge. Wave sets one column whose lines swell and shrink inside it, centred, moving all the time. Perspective starts narrow at the top and widens toward the bottom. See shrinkwrap, circular text, text wave and perspective text.
Max widthSlider · 100 to 1200 · starts at 600: The widest the text area may be, in pixels. It never goes past the frame less the padding on both sides. Circular does not use it. See measure.
ColumnsSlider · 1 to 5 · starts at 1: How many columns Multi-column uses, from 1 to 5. The other modes ignore it. See columns.
Column gapSlider · 10 to 60 · starts at 30: The space between columns, in pixels, in Multi-column. See column gap.
PaddingSlider · 0 to 80 · starts at 40: The space kept clear above the text and at the sides, in pixels, and below the columns in Multi-column. Circular does not use it. See padding.

Shapes

Drag a shape on the canvas to move it; with a mouse, the pointer changes over a shape. Text keeps clear of a circle along its curve and of a rectangle along its edges, in every mode. A line with too little room beside a shape is left empty, so no word is ever printed over one.

Add circleButton: Adds a circle 100 pixels across near the middle of the frame, a little off centre.
Add rectangleButton: Adds a rectangle 120 by 80 pixels near the middle of the frame, a little off centre.
Clear shapesButton: Removes every shape, the starting circle too. Reset brings that one back.
Obstacle gapSlider · 0 to 40 · starts at 12: How far, in pixels, the text keeps from each shape, above, below and at the sides. See obstacle gap.
Show boundsOn or off · starts on: Draws a faint dashed box for each column of text. Circular does not draw it. See bounding box.

Effects

Wave amp, Stagger and the Wave mode move over time on their own, whenever they are on. Animate moves the shapes.

AnimateOn or off · starts off: Sets the shapes drifting slowly, and the text flows around them as they move. Turn it off and the shapes stop where they are. Wave amp, Stagger and Wave mode move on their own either way.
Wave ampSlider · 0 to 40 · starts at 0: How far, in pixels, each line bobs up and down, in turn with its neighbours. Above 0 it moves on its own. See sine wave.
Wave freqSlider · 0.5 to 8 · starts at 2: How out of step each line is with the next when Wave amp is above 0. Higher looks choppier.
Fade edgesSlider · 0 to 1 · starts at 0: Makes the lines more see-through the further they are from the middle line, counted in order. At 1 the first line is gone. See fade edges and alpha.
StaggerSlider · 0 to 1 · starts at 0: Lines fade in one after another, top first; the text holds for a moment, then it plays again. Moving the slider starts it over from the first line. See stagger.
Drop shadowOn or off · starts off: Puts a soft dark shadow under the text. It is faint on the White and Cream backgrounds.

Background

ColorChoice: The colour behind the text: Dark, Surface, Deep blue, Black, White or Cream. On White and Cream the shapes, boxes and guides turn dark.
Show gridOn or off · starts off: Draws a faint grid of 50 pixel squares behind the text.
Show baselineOn or off · starts off: Draws a faint line across the frame under each line of text, on the baseline the letters sit on. See baseline.

Reset

Every setting goes back to how the page opened, with the Art preset and the one starting circle.

ResetButton: Puts every setting, the Art preset and the starting circle back, and stops the effects and the drift.