hanging-punctuation

name	hanging-punctuation
description	Use when designing optical alignment of typography. Hanging punctuation pushes commas, quotes, and bullets outside the column line for better optical balance.

Hanging Punctuation

Hanging punctuation = punctuation overhangs the column line so the column appears optically aligned. Type detail that separates editorial from default web layout.

What hangs

Punctuation that should overhang:

• Opening quotation marks ('hanging quotes')
• Em-dashes at line start
• Comma at column right when text-align: justify
• Bullets in lists (negative indent)
• Numbered marker in ordered lists

CSS implementation

blockquote {
  text-indent: -0.5em; /* hang opening quote */
}

ul {
  list-style-position: outside;
  padding-left: 1.5em; /* bullet hangs outside text column */
}

.hanging-punctuation {
  hanging-punctuation: first last;
}

Note: hanging-punctuation CSS property has partial support; combine with manual adjustments.

Why this matters

Default browser alignment puts punctuation INSIDE the column line. The text column 'appears' indented slightly. Hanging punctuation pulls punctuation outside so the text column appears optically straight. The difference is subtle but signals typographic care.

Where this fits in the X3 empire

Used on every CardPrepAI body text. The detail that LLM-generated designs almost never include.