Hanging punctuation
Punctuation hangs just outside the text column so the letters, not the quote marks or hyphens, make the visible margin.
See it
What it is
Hanging punctuation places marks such as opening quotes, commas, periods, and hyphens partly outside the text measure. The letters then form the apparent edge of the paragraph instead of a lightweight mark making the line look indented or short.
It is not a modern refinement: Gutenberg hung punctuation in the 42-line Bible, and Robert Bringhurst treats it as ordinary practice in The Elements of Typographic Style. It is most visible in pull quotes, narrow editorial columns, and justified text. In print layout it is a standard route to optical margin alignment. CSS provides the 'hanging-punctuation' property, with values that distinguish punctuation at the first or last edge of a line.
Gotcha: web support is not uniform. Safari has shipped the property for years while the other engines lagged, so check current support before relying on it, and remember that a generic negative text indent only knows about one mark. Use the CSS property as progressive enhancement, then add a targeted fallback only for a known opening quote. Do not pull every paragraph left or clip the overhang with 'overflow: hidden'.
Ask AI for it
Build a blockquote with CSS 'hanging-punctuation: first allow-end' so the opening quote and eligible line-end punctuation can sit outside the measure. Add a progressive fallback class for the opening quote using a dedicated span and negative 'text-indent', tuned in em for the loaded typeface. Keep the blockquote at 'max-width: 32ch', leave 'overflow' visible, and show a guide at the true text edge plus a toggle for before and after.