Chapter 17
The quotation
Giving someone else the floor looks like a matter of two quotation marks. But which marks, in which language, with which source, and with how much emphasis: each choice changes who is speaking, and how much you trust them.
The last chapter was still inside the page, between weight and measure; this one stops on an ancient editorial gesture that’s almost never done well: giving someone else the floor. “When you quote, how do you present it?” The question sounds trivial — you add two quotation marks and you’re done — but underneath sit at least four separate decisions, each with its own trap. Which marks, because the convention changes with language. Which tag, because quoting someone else’s words now isn’t the same as pulling a sentence from your own text. Which source, and where to put it. How much emphasis to give, because a quotation can be a whisper mid-line or a monument at the head of a chapter.
The quotation is where typography stops being decoration and becomes semantics: here the typographic mark tells you who is speaking. A straight quote betrays text banged out on a typewriter; a <cite> placed on the person’s name instead of the work’s title betrays someone who doesn’t know the rule; a block in two languages without the right lang betrays the screen reader and the hyphenation. These are errors invisible to anyone who can’t name them, and together they make a page feel less serious without anyone knowing why — exactly as in the micro-typography chapter.
Five demos, five ways to present someone else’s words. And as always, no libraries: HTML already knows <blockquote>, <cite>, <q>, and CSS knows how to nest quotation marks in the right language with the quotes property. Our job is to dress them without betraying the semantics they carry.
The pull quote, which quotes no one
The first isn’t even a real quotation, and that’s the most common misunderstanding. The pull quote is a sentence from the text itself, pulled out and enlarged to give the reading rhythm: it carries no attribution, because the source is the page in front of you.
Everything that happens without the user noticing is the real power of the interface.
Typographic pull quote · out of grid, hanging mark
It’s large, it steps out of the prose column, and the opening mark hangs past the left margin (hanging punctuation done by hand with a negative margin): so the edge of the text stays optically straight instead of looking indented. That’s the detail that separates a typeset pull quote from one merely pasted in. No <blockquote> here, and that’s a precise semantic choice: it isn’t someone else’s words, it’s internal editorial material — using one would be lying to the screen reader.
The huge mark is aria-hidden: it’s pure ornament, and the text reads perfectly without it. The accent colour is the second signal, not the first — the scale and the hanging position already say “quotation” to anyone who can’t tell the colours apart. And no motion: a pull quote presents itself still, it doesn’t animate. Its job is to let the reading breathe, not to ask for attention.
The quotation with a source, done right
Here you give someone else the floor for real, and the semantics matter down to the last tag. The HTML rule is precise and almost always wrong: <blockquote> wraps only the quoted words, the attribution stays outside, and <cite> is for the title of the work — not for the person’s name.
Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.
Cited blockquote · cite for the work, not the speaker
The <blockquote> holds only Saint-Exupéry’s sentence; the “— Antoine de Saint-Exupéry, Wind, Sand and Stars” lives in a <figcaption> outside the block, because it isn’t something he said: it’s our note about who said it. And we avoid the most common error here: <cite> wraps the title of the work, not the person’s name — that’s why the title is italic and the name isn’t. The cite=“URL” on the blockquote gives a machine-readable source, invisible but honest toward anyone reading the markup.
The rule on the left is the “this is someone else’s” sign: shape plus colour, never colour alone, so someone who can’t see the accent still reads the indent and the bar. The quotation marks around the sentence aren’t typed by hand in the text — CSS adds them via quotes and open-quote/close-quote, consistent with the block’s language. Typing them by hand would be the surest way to get them wrong when the language changes.
The quotation inside the line, nested
Quoting inside a sentence looks like the simplest case, and it hides two refinements almost no one tends to: the right tag is <q>, not quotation marks banged out by hand — and <q> can do something that’s impossible by hand, nest the levels.
The editor cut it short: there is only one rule, and my grandfather kept telling me:
There is nothing more to add. measure twice, cut once.
Inline quote · nested marks, language-aware
A <q> inside another <q>: the browser adds the marks itself and automatically uses the right level — in English the double curlies “” at the first level and the single ones ‘’ at the second. We don’t write a single quotation mark in the markup: CSS resolves them from the quotes property. Trying to compose them by hand would be the guaranteed error, because correct nesting has to be computed, not guessed.
And here’s the most common silent bug: which marks <q> uses depends on the declared language. Without the right lang, the browser would use its default convention — and on Italian text it would still reach for the English “”. Here the block carries its lang and the quotes property to match: in Italian, guillemets «» outside and single curlies inside; in English, double curlies outside and singles inside. The convention changes with the language, and pretending it’s universal is the first mistake.
The celebratory quotation, with a drop cap
When a quotation has to open something — a chapter, a section, a solemn moment — the editorial gesture is the drop cap: the first letter enlarged, sinking several lines deep. It gives weight without a single extra word, and its honesty lies entirely in how well the browser supports it.
While the interface works in silence, the user is free to be elsewhere in their mind: there, in that absence of friction, is where the craft lives.
Quotation with a drop cap · initial-letter + first-letter fallback
The right property is initial-letter: 3: it says “this letter is worth three lines” and the browser computes the sink and the baseline alignment itself. Real support is mostly in Safari. For everyone else there’s the universal fallback, ::first-letter with float and a big scale: less precise on the baseline, but robust everywhere. Where initial-letter is supported it wins via @supports; elsewhere the float carries it. Progressive enhancement, not a promise the browser can’t keep.
It stays a real <blockquote>, with the source in <cite>: the drop cap is clothing, not semantics. That’s why the enlarged letter is still inside the text, not a separate glyph: the screen reader reads “While”, the whole word, not “W” followed by “hile”. It’s the same discipline as the whole playground — the visual effect must never break what the control, or here the text, actually means.
The translated quotation, with two languages
The last case is when you quote someone who spoke another language: you give the original and the translation. The design question is which of the two is primary — and here we let the reader decide, with a toggle that swaps the emphasis without touching the content.
Original · French On ne voit bien qu’avec le cœur. L’essentiel est invisible pour les yeux.
Translation · English It is only with the heart that one can see rightly. What is essential is invisible to the eye.
Translated quotation · original + translation, correct lang on each
The French original and the English translation sit side by side; the <button> with aria-pressed swaps only the visual hierarchy — who’s large and opaque, who’s small and dimmed — not the text. The hierarchy runs through scale plus opacity, not colour alone, and the transition uses the duration tokens: with prefers-reduced-motion it switches crisply, same final state without the journey. It’s a real control, so the keyboard and the focus ring come for free.
The non-negotiable part is the lang on each block: fr on the original, en on the translation. It serves the screen reader, which changes pronunciation; the hyphenation, which wants the right dictionary (the chapter 08 lesson); and the quotation marks, because the quotes property follows the language — so French takes guillemets with the thin space, English the double curlies. A single block with two languages mixed would get both wrong, silently.
Five ways to give someone else the floor, one shared insight: the quotation is where the typographic mark stops being ornament and declares who is speaking. The pull quote that quotes the page itself, the blockquote that attributes with the right source in the right tag, the <q> that nests its marks in the correct language, the drop cap that opens with solemnity, the two languages side by side each with its own lang. None of these details is noticed when it’s done well — you only notice that the page can hold different voices together without confusing them. Presenting someone else’s words, in the end, is mostly a matter of respect: for whoever spoke, for the language they spoke in, and for the reader who has to grasp at a glance whose sentence it is.
The next chapter stays on the seam between the author’s text and the reader’s, but lowers its voice further: the marginal note. “How do you talk to your reader without breaking the thread?” — the aside, the footnote, the gloss that adds without interrupting, and where you put it when the screen is too narrow to sit truly “in the margin”.