Quote and Stat Card Maker

A quotation set in large type on a card is a strange object. It was cut out of a speech, a book or an interview so that it could be seen on its own, and that is exactly what it will be. The card gets shared, cropped, screenshotted and shared again, and at every step the context it came from falls further behind. Whatever the card does not carry, the reader will never see.

So a card is not a decoration around a sentence. It is the sentence plus everything a stranger needs to trust it: who said it, where, what was changed, and what a number counts.

Attribution belongs inside the frame

A caption under a post is easy to lose. A name set inside the picture is not. That is why the card maker treats the attribution as part of the quotation rather than an optional extra: the speaker, the place the words appeared and the year are three required fields, and the save button stays disabled until each one is filled or marked unknown. Unknown is a real answer. It prints as “Unknown” on the card, which is honest and slightly uncomfortable, and that discomfort is useful. Marking a gap as a gap is better than borrowing a famous name to fill it.

The same logic applies to the alternative text. The W3C tutorial on images of text says that when an image of text must be used, the text alternative must contain the same text presented in the image. So the tool writes the alt text from the card itself: the quotation with its marks, then the speaker, source and year. A screen reader user hears the attribution too, not just the sentence.

The right marks for the language

Quotation marks look like a solved problem until a card has to be set in more than one language. English opens with a raised mark shaped like a small six and closes with a nine. German opens low and closes high. French uses angle marks, the guillemets, and the Wikipedia article on quotation marks notes that French usage places narrow spaces inside them. Japanese uses corner brackets. Finnish and Swedish use the same closing mark at both ends.

Nobody should keep that table in their head. The Unicode Common Locale Data Repository publishes it as data: for each locale, a pair of outer marks and a pair for a quotation inside a quotation. The card maker reads those four characters for 30 languages from the CLDR 48 JSON files, and its check compares every entry with the files themselves, character by character. All 30 match.

Nesting matters more on a card than in running text. The card supplies the outer marks itself, so a quotation inside the quotation has to take the inner pair. In American usage the inner marks are single, and if yet another quotation sits inside, the double marks come back, alternating as deep as needed. The tool follows that alternation for every language in the table rather than assuming English habits.

Most of the trouble starts on the keyboard. Typewriters had one straight double mark and one straight single mark, and computer keyboards copied them. Word processors convert straight marks into curly ones with a feature usually called smart quotes, and the Wikipedia article is blunt about its failures: it turns the apostrophe in ‘tis or ‘89 into an opening quotation mark. The curly apostrophe is the same character as the closing single quotation mark, so the converter has to decide which job each straight mark is doing.

The tool does the conversion in the open. Every mark it changes appears in a list with its position and the reason, such as “apostrophe inside a word” or “opens a quotation inside the quotation”. A straight mark after a digit is left alone and flagged, because it may be a prime for feet or inches, which is a different character. A mark between two letters of a script it does not know is also left as typed. One switch undoes the whole conversion. On a check of 120 hand-written cases across twelve languages, including Hebrew and Arabic sentences written right to left, every case came out as expected.

Showing your edits

Cutting a quotation is normal. Hiding the cut is not. The U.S. Government Publishing Office style manual gives the long-standing conventions: three periods mark an omission within or at the end of a sentence, and square brackets enclose words that are not part of the original, such as an explanation or a correction. Those marks are the reader’s only clue that the sentence on the card is not quite the sentence that was said.

On a card they tend to vanish into the type. So the card maker finds every ellipsis and every bracketed phrase and gives it a soft tint and an underline. The edit is marked by shape as well as by colour, which matters for anyone who does not see the tint. The default example shows both: an omission after “defend” and the bracketed words “the team”.

Typesetting the quotation well is the other half. Hanging punctuation, described in Wikipedia as setting marks slightly into the margin so they do not break the edge of the text, goes back to the Gutenberg Bible. The card hangs its opening mark outside the text block, so the first letters line up with the lines below. Line breaks prefer to fall after punctuation, and the last line never holds a single word when any break that fits avoids it. That last promise is checked by brute force: on 1,418 short random texts every possible set of breaks was tried, and the tool’s choice matched the best one each time.

Measuring text on a canvas needs care. Words are found by spaces, or, for Japanese and Chinese, which are written without spaces, by the word boundaries that Intl.Segmenter reports. The HTML Standard says that when a maximum width is passed to the canvas text drawing call and the text is wider, the browser switches to a more condensed or smaller font. That is a silent squeeze. The card maker never relies on it: it measures every line at the chosen size and steps the size down until every line genuinely fits.

A number without its base is half a fact

Statistics on cards have their own failure modes. The commonest is the bare percentage. Thirty-seven and a half percent of what? Of everyone, of the people who answered, of the tickets in one quarter? Without the base the figure cannot be checked or compared, so the tool warns whenever a percentage has no base in its label or on its base line.

The second is the missing source. The UK Government Analysis Function guidance on charts asks for the specific data source for each chart, not just the organisation’s name, and gives a pattern: the publication or survey, then the organisation it came from. The card maker asks for three things that together make a number checkable: who measured it, when, and of what population or period. “Own data” is allowed and prints as such.

The third is quiet rounding. JavaScript’s Intl.NumberFormat formats numbers in the conventions of each locale, and MDN notes that when it is given a string it uses the exact value the string represents, avoiding the loss of precision that comes from converting to a floating-point number. The tool passes the typed digits as a string and fixes the number of decimal places to the number typed, so nothing is rounded unless the visitor chooses it. If they do, the card adds the word “about”.

MDN also warns that the formatted output can vary between engines and should not be compared with hard-coded strings. The tool therefore checks the result by reading it back: it learns each locale’s digits and decimal sign from the same formatter, recovers the number from the formatted text and compares it with what was typed. Across 20 locales, including Arabic and Hindi digit styles, 1,000 random values, each formatted both as a plain number and as a percentage, came back with every digit intact.

Here is a worked example. Choose Statistic, type 37.5, keep Percent and English (US), and the card shows 37.5% with the bar on. On the default 1,600 by 900 card the margins are 67.5 pixels, so the bar track is 1,465 pixels wide and the fill stops at 549.4 pixels. Switch rounding to 0 dp and the card reads “about 38%”, while the bar keeps its exact length.

Drawing proportions to scale

A bar persuades because the eye compares lengths. The Analysis Function guidance says not to break the numerical axis on bar charts, because readers perceive the bars as proportional to each other and a broken axis distorts those proportions. It cites a published chart of inflation falling from 11.1% to 10.1% with the axis starting at 8%. The arithmetic shows how much that matters. From a zero baseline the second bar is about 9% shorter than the first. From a baseline of 8 the visible bars are 3.1 and 2.1 units tall, so the second looks 32% shorter. The same two numbers tell two very different stories.

So the bar on a card always starts at zero and fills exactly the share it represents, and the check measures it: across a thousand random shares the fill matched the share to the exact pixel. The ring version pulls its rounded ends inwards by half the stroke width, so the visible arc, caps included, spans the true share of the circle.

Contrast is measured rather than assumed. WCAG 2.2 defines contrast ratio from relative luminance, on a scale from 1 to 21, and asks for at least 4.5:1 for normal text. The two card colours must reach that. With a picture behind the text, the tool reads the actual pixels under every line and blocks saving if the weakest one falls short, which is usually fixed by raising the scrim.

What the tool cannot do

It cannot tell whether a quotation is real. It can make the attribution impossible to skip and the edits impossible to hide, but checking that the words were said is the visitor’s job. Nor can it know whether a source line is accurate, or whether a base is the right one. Its conversion rules are rules, not understanding. A straight mark in an unusual place may be set wrongly, which is why every change is listed and can be undone. Right-to-left lines are measured as whole lines, so highlights inside mixed-direction text are approximate.

Finally, the files are plain pictures. PNG and WebP both allow metadata such as text chunks, Exif and colour profiles, and the tool writes or keeps none of them, so a saved card carries no hidden trace of a camera or a place. That also means the card’s words live only in its pixels and in the alt text you paste beside it.