All tools › The shape of a box
Text in columns
Columns by width rather than by count, with the rule that keeps a heading with its paragraph.
It runs entirely in this browser tab: the CSS you paste is never uploaded, and the preview is drawn from the same numbers the rule carries rather than rendered by the browser — which is why a tool whose effect only exists in a compositor says so instead of drawing one.
Settings
- Count by
- By width gives as many columns as fit; by count gives that many however narrow. Choices: By how many, By how wide.
- How many
- A number from 1 to 12.
- Width
- A number from 80 to 800.
- Gap
- A number from 0 to 120.
- Draw a line between
- A hairline between the columns, which helps the eye find the next one.
- Keep headings with their text
- Stops a heading sitting alone at the foot of one column with its paragraph in the next.
How to use it
- Paste your text into the box above, or open a file.
- Adjust the settings beside it until the result is what you wanted.
- Copy the result, or save it as a file. The result updates as you type.
Questions
- Is what I paste uploaded anywhere?
- No. The whole application is carried as WebAssembly and runs on your own device. There is no server to send a stylesheet to, and no tool here makes a network request while it works.
- Is the preview what my browser will actually draw?
- For a colour, a shape and a curve, yes — it is drawn from the same numbers the rule carries. For anything a browser's compositor does against the page behind it — a backdrop filter, a blend mode, a scrollbar — no, and that tool says so on its own result rather than showing you an approximation.
- Why does a size come out as 1.125rem and not 1.1250000000000002rem?
- Because none of the arithmetic is done in binary floating point. Every length here is an exact decimal, so a conversion ends where it should: 18px is 1.125rem and 24px is 18pt, with no run of nines and no stray four at the twelfth place.
- Can I use these rules without attribution?
- Yes. What comes out is CSS — a declaration is not a work with an owner, and nothing here writes a comment into your stylesheet about where it came from.
Other tools for the shape of a box
Clip a shape
An element cut down to a shape, and the sentence about what else the cut takes with it.
Triangles and arrows
A triangle from borders or from a clip path, with what each of the two costs.
Tooltip with a pointer
A label that points at its element, and the sentence about what hover alone leaves out.
Keep a proportion
A box that keeps its shape at any width, with the padding fallback whose percentage is of the width.
Cut text short
One line or several, with the ellipsis — and the sentence about what a screen reader still reads.
All twenty-seven tools