The hanging-punctuation property controls whether certain punctuation marks are allowed to "hang" outside the start or end edge of a line, improving the optical alignment of a block of text. In typesetting, punctuation such as opening quotation marks, parentheses, em dashes and similar marks can create a visually uneven left (or right) edge when they occupy the same line box as the first visible glyph; allowing those marks to extend beyond the text flow produces a cleaner vertical edge that reads more like professionally set type. This is a purely visual adjustment: it does not remove or reorder characters, only alters their placement relative to the line box for better optical balance.

In practice, enabling hanging punctuation affects how the first and last glyphs in a line are measured for alignment and wrapping. That interaction can be especially noticeable when combined with indentation or first-line offsets — for example, when you use text-indent to create a paragraph indent, hanging punctuation can keep the visible left edge aligned while the punctuation itself sits outside the indented area. Because it modifies how punctuation is positioned relative to the line box, it also interacts with line breaking and justification behavior: the engine decides whether the punctuation should be treated as part of the content block or allowed to overhang in service of a neater rag.

Use cases for hanging punctuation include magazine-style body text, pull quotes, headings where a tidy optical margin is desirable, and multilingual typesetting where opening or closing marks are frequent. It is frequently combined with careful control of alignment and spacing — for example, when you want a block’s edge to appear visually straight while still respecting language-specific punctuation conventions. Designers should keep in mind that the effect is subtle and depends on font metrics and the shapes of individual punctuation marks; it’s best treated as a fine-tuning tool rather than as a way to fix major layout problems, and it generally complements typographic controls such as text-align and line-height rather than replacing them.