Tall Pin Maker

A tall image with a title band and a column of numbered steps looks like a poster. It behaves like a page. The eye enters at the top, takes the title, drops to the first step and works down, one block at a time. Nothing about that order is optional, and nothing on the page can be reflowed the way a web page reflows. Every decision about such an image is really a decision about reading.

That is the frame for everything below. A vertical graphic succeeds when a person scrolling past can take in its structure at a glance and then read it, top to bottom, without squinting. It fails in two familiar ways: it crams too much into one image until the type is too small to read, or it locks the words inside the picture where nobody can copy, enlarge or hear them.

One idea per block survives a narrow column

Guidance on readable content written for people with cognitive and learning disabilities, published by the W3C, reads almost like a brief for a step-by-step graphic. It asks for short blocks of text, one topic in each paragraph, the aim of each chunk at its beginning, short sentences with one point each, bulleted or numbered lists, and short descriptive headings. It explains that chunking makes text easier to read and understand, and that whitespace and clear separation of foreground from background help comprehension.

A tall image is chunking made visible. Each step is a card. The card begins with its point, set heavier, and carries at most one line of supporting detail in lighter type. The number in its badge says where you are. A section heading such as Ingredients or Method groups the cards beneath it, and a thin rule under the heading closes the gap between the label and what it labels.

Why does this survive a narrow column when a paragraph does not? Because a narrow column shortens every line, and short lines break long sentences into fragments that the eye has to reassemble. Studies of line length have produced varied results, but for printed text the widely accepted range is 45 to 75 characters per line, with 66 often called ideal. A feed column is far narrower than a book page. A step written as a short statement fits that column; a paragraph poured into it turns into a tower of three-word lines.

The narrow column is not a quirk of one site, either. The accessibility guidelines ask that content work at a width equivalent to 320 CSS pixels without scrolling in two dimensions, which is what a 1280 pixel window becomes at 400 percent zoom. Designing a tall image for a narrow reading width is designing for a condition many readers are already in.

Splitting rather than shrinking

Every outline eventually meets an image that is too short for it. There are two ways out. The easy one is to keep shrinking the type until everything fits. The honest one is to set a smallest size and, once the type reaches it, carry the rest onto a second image. Shrinking is tempting because it always works on the screen where you are designing. You see the image large, the small text looks fine, and you publish. Then it is shown in a feed at a fraction of its width, and the detail lines that read well in the editor become grey texture.

So the floor has to be stated where the image will actually be seen. A worked example makes this concrete, and the numbers can be reproduced in the tool on this page. Take a pin 1000 pixels wide and 1500 tall, the tool’s starting 2 : 3 shape. Suppose it appears about 240 pixels wide in a feed, and you decide the smallest text there should be 7 pixels. Scaling up, 7 times 1000 divided by 240 gives a floor of 29.2 px in the file itself. Nothing on the pin may be set smaller than that.

The tool also reports the x-height of that smallest text at feed width, read from the browser’s own text metrics, because two fonts at the same size can have very different working heights.

The type then moves along a fixed ladder. In this tool the item headings start at 48 pixels for a 1000 pixel pin, and each step down is 8 percent smaller than the one before: 48.0, 44.2, 40.6 and 37.4 pixels, with detail text at 0.8 of the heading. The next step would put detail text at 27.5 pixels, under the floor, so the ladder has four rungs and stops there.

The tool’s example outline is a soup recipe with six ingredients and six method steps, several of them with a line of detail. At the floor it still needs two pins. Since two pins are unavoidable, there is no reason to use the smallest type: the set takes the largest rung that still fits in two, which is the second, with headings at 44.2 pixels and detail at 35.3. The cover holds the picture, the title band and five ingredients; the second pin holds the last ingredient under the heading Ingredients (continued), then all six method steps.

Notice what the rule buys. Type shrinks only while shrinking avoids a split, and a split happens only when shrinking would break the floor. The reader gets two legible images instead of one illegible one, marked Part 1 of 2 and Part 2 of 2 so the order is never in doubt. There is also a quieter rule about where to cut. Items are never broken across pins, and the cut is placed so that the fullest pin is as empty as it can be, which keeps continuation pins even instead of leaving a lonely last step on a nearly blank image.

The method has limits worth saying plainly. It measures text with the browser’s own fonts, so a device with different fonts will lay out a little differently. It finds line breaks from the word boundaries the browser’s segmenter reports, a good approximation for spaced scripts and a rougher one for Chinese, Japanese and Korean. And it knows nothing about a platform’s current rules or what any audience will do with the result.

The problem with words locked inside pictures

Here is the uncomfortable part. A tall image full of steps is, in accessibility terms, an image of text, and the guidelines are wary of those. Success criterion 1.4.5 asks authors to use real text rather than pictures of text wherever the technology allows. The explanation is direct: people cannot alter how text looks in images.

The W3C’s understanding document spells out who loses. People with low vision cannot change the font family, size or colour. People with visual tracking problems cannot change line spacing or alignment. People with cognitive disabilities that affect reading cannot restyle the text to suit them. Images also distort and pixelate when they are enlarged, and enlarging is the most basic adjustment a reader can make.

Contrast is the one property an image of text can get right on its own. WCAG 2.2 defines a contrast ratio from the relative luminance of the two colours, and sets 4.5 : 1 as the minimum for normal-size text, 3 : 1 for large text of at least 18 point or 14 point bold. The understanding document adds a detail that matters for any tool: the threshold is not rounded, so 4.499 : 1 fails. The example palette here, a deep crimson on cream, measures 9.39 : 1, and 8.31 : 1 where the crimson sits on the lightly tinted step cards.

Drawing the image in a browser canvas does not soften the problem. The HTML Standard says authors should not use a canvas when a more suitable element is available, and that when they do use one, they must also provide content conveying the same function or purpose as its bitmap. It also contains a trap for layout code: when text is drawn with a maximum width, the browser is allowed to condense the font or switch to a smaller one until it fits. That silently hides an overflow instead of preventing it, which is why this tool measures every line and never relies on that argument.

The plain-text twin

The fix is not to stop making tall images. It is to publish the words twice: once as a picture, once as text. The W3C images tutorial is explicit that when an image of text must be used, its text alternative must contain the same text presented in the image. For complex images it describes a two-part alternative: a short description that identifies the image, and a long description carrying its essential information.

A step-by-step pin fits that pattern exactly. Its alt text is the words on that pin in reading order: title, subtitle, each section heading, each numbered step with its detail, and the footer. The whole set also gets a plain-text version, the title followed by every section and numbered step, ready to paste as the description wherever the images go.

That twin is useful well beyond screen readers: it can be copied, searched, translated and read aloud, and it survives a failed image. The W3C decision tree even notes that when the text in an image is also present as real text nearby, the image itself can carry an empty alternative, because nothing is lost.

A twin is only worth having if it is complete. This tool reads the plain text back into an outline and compares the two field by field.

Keeping a set visually related

Once an outline spans several images, each one has to say at a glance that it belongs with the others. The Gestalt principles of grouping describe why this works: by the principle of similarity, stimuli that physically resemble each other are seen as parts of the same object, and by proximity, things near one another read as a group.

In practice that means the set shares everything except its content. The margins are identical. The palette is the same two colours. The type sizes are identical from the cover to the last pin, because the whole set uses one rung of the ladder. Continuation pins repeat the title in a smaller band, so a single pin seen alone still names what it is part of. Numbering continues within each section, so step 4 on the second pin follows step 3 on the first.

None of this is decoration. A reader who meets the third pin first must learn that a first and a second exist. Consistency keeps the reading order when the set is scattered.