Meme Generator

A captioned picture looks like the least engineered thing on a screen. Two lines of shouting, one at the top and one at the bottom, set in fat white capitals with a black edge. The form is old enough to have an encyclopedia entry, which describes large text centered at the top and bottom of a picture, usually in capitals, with white letters and a black border chosen because that pairing is easy to read on almost any background color.

That last clause deserves more respect than it gets. “Almost any background” is a strong claim, and it turns out to be nearly a theorem. The rest of the craft, fitting words into a box, deciding who may use the picture, and telling a blind reader what the joke is, is less tidy. All four are worth getting right.

The arithmetic behind the outline

The W3C accessibility guidelines define contrast as a ratio between two relative luminances: the lighter one plus 0.05, divided by the darker one plus 0.05. Luminance itself is a weighted sum of the red, green and blue channels after each has been linearised, with green counting for about seventy percent. The scale runs from 1:1 for two identical colors to 21:1 for pure white against pure black.

The same guidelines ask for at least 4.5:1 for ordinary text and 3:1 for large text. A caption laid straight onto a photograph cannot promise either figure, because a photograph is not one color. White letters vanish into a cloud; black letters vanish into a shadow. Most pictures contain both.

Now add the outline. Take any background at all and compare it with the white fill and with the black edge. If the background is dark, white wins easily. If it is light, black wins. The awkward case is a middle tone, where the two ratios are equal, and a line of algebra shows that this happens when each ratio is the square root of the contrast between fill and outline. For white on black that is the square root of 21, or 4.58:1.

So wherever the letters land, either their body or their edge differs from what lies behind by at least 4.58:1, a hair above the 4.5:1 floor. This is a derivation from the published formula, not a quotation, and the page checks it by brute force over hundreds of thousands of colors. It also explains why the trick weakens with stylish pairs: yellow letters with a blue edge have far less contrast between themselves, so their guaranteed floor is far lower.

The guidelines’ own explanatory notes point the same way. A narrow border around a letter, they say, is treated as part of the letter when contrast is judged, while a wide border that fills the letter’s inner spaces acts as a halo and counts as background. Either reading helps: the outline is letter where the picture is pale and a backdrop where the picture is busy.

One caveat is honest and necessary. The arithmetic says one of the two colors will stand out. It does not say the caption is comfortable to read at thumbnail size, in a thin typeface, or over a picture so cluttered that edges are hard to follow. The same guidelines warn that fonts with very thin strokes are harder to read at low contrast. Heavy letters are part of the recipe, not decoration.

Fitting words into a rectangle

Drawing the outline has one trap. A stroke is centered on the letter’s edge, so half of it falls inside the letter and eats the fill. The fix is an order of operations: stroke first at twice the wanted width, then fill on top. The inner half of the stroke disappears under the fill and the outer half remains as the edge. Round joins matter too. The HTML Standard defines a round join as an arc whose diameter is the line width, which keeps a thick stroke from throwing spikes off sharp letter corners.

Width is the next problem, and no formula solves it. Text has no size until a particular font draws it. The browser’s canvas reports, for any string, how far it advances and how far its ink reaches left, right, above and below the baseline. A fitting routine can only ask, adjust and ask again: try the caption at full size, and if a word will not fit the box, try smaller.

Here is a worked example you can reproduce on this page. The example scene is 1,600 by 1,200 pixels. Exported 1,080 pixels wide in its own shape, it becomes 1,080 by 810, and the saved file reports exactly that when read back. Captions start at nine percent of the width, which is 97 pixels. An outline of seven percent of that size is 6.8 pixels, drawn as 7. The short top line fits on one line at 97 pixels. The longer bottom line wraps onto two.

Type a much longer caption and the size falls toward a floor, by default 2.5 percent of the width or 27 pixels here. Only at that floor will a single over-long word be divided, and only when even that fails is the text cut and ended with an ellipsis. The outline never falls below 2 px, because a hairline edge on small letters does the reverse of helping.

Dividing a word sounds trivial and is not. What a reader takes as one character may be several stored units: a letter with a combining accent, a flag built from two symbols, a family built from four people and three invisible joiners. The Unicode standard calls these units grapheme clusters and publishes the rules for finding their boundaries; browsers expose those rules through a built-in segmenter. A wrapper that cuts by stored unit instead will, sooner or later, saw a thumbs-up off its skin tone.

Two more things are the device’s business. Capitals are made with the browser’s locale-aware method, so a Turkish reader’s dotless and dotted letters come out right for Turkish and differently elsewhere. And the typeface is whatever the device has: the web’s font rules describe generic families such as sans-serif as aliases for installed fonts that vary by platform. No font ships with this page, so the same caption may be a little wider on another machine.

Whose picture is it?

This page ships no template pictures: no famous reaction faces, no stock photographs, no characters. That is deliberate. The United States Copyright Office explains that copyright protects original works of authorship, and a photograph or a film frame is one. Its circular on derivative works adds that only the owner may prepare an adaptation of a work or authorise someone else to, and that an unauthorised adaptation may be an infringement.

Fair use exists, and the statute names criticism and comment among its examples. But the same office describes it as a question of four factors weighed by courts, and says of its own index of decisions that it is no substitute for legal advice. A tool that hands you someone else’s photograph has made that judgment for you without knowing anything about your use. A tool that asks you to bring a picture leaves the judgment where it belongs. It cannot make it for you either, and says so once.

Readers who cannot see it, and details nobody should

A caption baked into pixels is invisible to a screen reader. The W3C’s images tutorial is blunt about what follows: when a picture of text must be used, its text alternative must contain the same text. For a captioned picture that is only half the job, since the humor usually lives in the gap between words and image. The tutorial’s advice for informative pictures applies: convey the meaning, not a pixel inventory. “A cat asleep across a laptop keyboard, captioned: working from home” does it in a sentence.

A picture that adds nothing a reader needs may instead be marked decorative and given an empty alternative, and the tutorial notes that only the author can make that call. This page therefore refuses to export until you have written the text or ticked the box. It then offers the text to copy, because an image file is a poor courier for it: the description has to be pasted into whatever field the destination provides.

Screenshots carry names, addresses and faces that are not part of the joke. Two tools are commonly reached for and they are not equivalent. A filled bar replaces the pixels under it; in the saved file there is nothing of the original left to find. A blur only averages neighbours together, and averages retain information. Researchers have trained neural networks to identify faces and recognise handwritten digits in images hidden by blurring and by mosaic pixelation. Blur is fine for softening a background. For anything private, use the bar.

Hidden data deserves the same care as visible data. Camera files store settings, dates and sometimes places in an Exif block, including an orientation value with eight possible settings that tells software which way up to show the picture. This page lets the browser apply that orientation when it decodes the file, then exports from the displayed pixels alone. The PNG it writes holds a header, compressed pixel data and an end marker, and no other chunk, although the format allows a metadata chunk. The JPEG and WebP files are searched for Exif after they are written.

What a caption cannot do

None of this makes a caption good. Arithmetic guarantees an edge, not legibility at every size. Fitting guarantees that ink stays inside the picture, not that eleven lines of small text are worth reading. Wrapping here breaks at spaces, so writing systems without them are treated as one long word and divided between characters, which is serviceable and not typographically correct. And no export setting answers whether the picture was yours to caption. The craft is small; the responsibilities attached to it are not.