Preset

Hangs opening quotes and brackets at the start of the first line

Target Element

hanging-punctuation

Current value: first

Text Alignment

Text Indent (Optional)

Preview Settings

Generated CSS

p {
  hanging-punctuation: first;
}

Live Preview

Note: hanging-punctuation is currently only supported in Safari. Other browsers will show normal punctuation alignment.

Without Hanging Punctuation

"β€œTypography is what language looks like.” β€” Ellen Lupton"

With Hanging Punctuation

"β€œTypography is what language looks like.” β€” Ellen Lupton"

Multiple Quotes Preview

β€œTypography is what language looks like.” β€” Ellen Lupton
β€œGood typography is invisible, bad typography is everywhere.” β€” Oliver Reichenstein
β€œThe dumbest mistake is viewing design as something you do at the end of the process.” β€” Tom Greever

hanging-punctuation Keywords

none

No hanging punctuation

Affects: None

first

Opening bracket or quote at the start of the first line hangs

Affects: β€œβ€˜'([{γ€Œγ€Ž

last

Closing bracket or quote at the end of the last line hangs

Affects: ”’')]}.!?,;:」』

force-end

Period or comma at the end of any line hangs

Affects: .,。、

allow-end

Period or comma may hang if it doesn't fit on the line

Affects: .,。、

Affected Punctuation Characters

First (Opening)

β€œLeft Double QuoteU+201C
β€˜Left Single QuoteU+2018
Β«Left GuillemetU+00AB
(Left ParenthesisU+0028
[Left BracketU+005B
{Left BraceU+007B
γ€ŒCJK Left Corner BracketU+300C
γ€ŽCJK Left White CornerU+300E

Last (Closing)

”Right Double QuoteU+201D
’Right Single QuoteU+2019
Β»Right GuillemetU+00BB
)Right ParenthesisU+0029
]Right BracketU+005D
}Right BraceU+007D
」CJK Right Corner BracketU+300D
』CJK Right White CornerU+300F
!ExclamationU+0021
?Question MarkU+003F
;SemicolonU+003B
:ColonU+003A

Force-End / Allow-End

.PeriodU+002E
,CommaU+002C
。CJK PeriodU+3002
、CJK CommaU+3001

Examples

Basic Quote Hanging

Hang opening quotes for elegant blockquotes

blockquote {
  hanging-punctuation: first;
  text-align: left;
  font-size: 1.25rem;
  line-height: 1.6;
}

Full Hanging for Prose

Complete hanging for professional book-style text

article p {
  hanging-punctuation: first force-end last;
  text-align: justify;
  hyphens: auto;
}

Pull Quote Styling

Large decorative pull quotes with hanging punctuation

.pullquote {
  hanging-punctuation: first last;
  font-size: 2rem;
  font-style: italic;
  text-align: center;
  margin: 2rem 0;
  padding: 1rem;
  border-left: 4px solid #3b82f6;
}

Japanese Text

Hanging punctuation for CJK content

.japanese-text {
  hanging-punctuation: first allow-end last;
  text-align: justify;
  word-break: break-all;
  line-height: 1.8;
}

First Paragraph Drop Cap

Combine with first-line pseudo-element

article p:first-of-type {
  hanging-punctuation: first;
}

article p:first-of-type::first-letter {
  float: left;
  font-size: 3.5em;
  line-height: 0.8;
  margin-right: 0.1em;
  font-weight: bold;
}

Responsive Hanging

Enable hanging only on larger screens

blockquote {
  hanging-punctuation: none;
}

@media (min-width: 768px) {
  blockquote {
    hanging-punctuation: first last;
  }
}

Reference

Syntax

hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;
hanging-punctuation: first last;
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;

Values Explained

ValuePositionCharactersBehavior
none--No hanging (default)
firstFirst line startOpening quotes/bracketsAlways hangs if at start
lastLast line endClosing punctuationAlways hangs if at end
force-endAny line endPeriod, commaAlways hangs at line end
allow-endAny line endPeriod, commaHangs only if needed for justification

Browser Support

BrowserSupportNotes
SafariYes (10+)Full support
ChromeNoNot implemented
FirefoxNoNot implemented
EdgeNoNot implemented

As of 2024, hanging-punctuation is only supported in Safari. Consider using it as a progressive enhancement.

Best Practices

  • Use as progressive enhancement: Since support is limited, ensure your design works without it.
  • Combine with good typography: Use with appropriate line-height, font-size, and measure (line length).
  • first is most impactful: Opening quote hanging is the most visually noticeable and commonly desired effect.
  • Choose force-end vs allow-end wisely: force-end is predictable; allow-end adapts to line breaks in justified text.
  • Test with real content: The effect varies based on which punctuation appears at line boundaries.
  • Works best with larger text: The visual improvement is more noticeable at larger font sizes like pull quotes.

Why Use Hanging Punctuation?

Visual Alignment

Creates a cleaner left edge by aligning the actual letters rather than punctuation marks.

Professional Typography

A technique used in high-quality print design, now available for web.

Better Readability

Improves the flow of text by maintaining consistent visual margins.

Enhanced Quotes

Makes blockquotes and pull quotes look more polished and intentional.

Rate this tool