hanging-punctuation

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The hanging-punctuation CSS property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box.

Syntax

css
/* Keyword values */
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: allow-end;

/* Two keywords */
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last allow-end;

/* Three keywords */
hanging-punctuation: first allow-end last;

/* Global values */
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: revert;
hanging-punctuation: revert-layer;
hanging-punctuation: unset;

The hanging-punctuation property may be specified with one, two, or three space-separated values.

Values

none

No character hangs.

first

An opening bracket or quote at the start of the first formatted line of an element hangs. This applies to:

  • all characters in the Unicode categories Ps, Pf, Pi
  • the quote marks U+0027 APOSTROPHE (') and U+0022 QUOTATION MARK (").
last

A closing bracket or quote at the end of the last formatted line of an element hangs. This applies to:

  • all characters in the Unicode categories Pe, Pf, Pi
  • the quote marks U+0027 APOSTROPHE (') and U+0022 QUOTATION MARK (").
allow-end

A stop or comma at the end of a line hangs if it does not otherwise fit prior to justification.

Stops and commas that are allowed to hang include:

  • U+002C, COMMA
  • U+002E, FULL STOP
  • U+060C, ARABIC COMMA
  • U+06D4, ARABIC FULL STOP
  • U+3001, IDEOGRAPHIC COMMA
  • U+3002, IDEOGRAPHIC FULL STOP
  • U+FF0C, FULLWIDTH COMMA
  • U+FF0E, FULLWIDTH FULL STOP
  • U+FE50, SMALL COMMA
  • U+FE51, SMALL IDEOGRAPHIC COMMA
  • U+FE52, SMALL FULL STOP
  • U+FF61, HALFWIDTH IDEOGRAPHIC FULL STOP
  • U+FF64, HALFWIDTH IDEOGRAPHIC COMMA

User agents may include additional characters.

Formal definition

Initial valuenone
Applies toall elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

hanging-punctuation = 
none |
[ first || [ force-end | allow-end ] || last ]

Examples

Setting opening and closing quotes to hang

HTML

html
<p>
  «For a moment, nothing happened. Then, after a second or so, nothing continued
  to happen.»
</p>

<p class="hanging">
  «For a moment, nothing happened. Then, after a second or so, nothing continued
  to happen.»
</p>

<p class="hanging right">
  «For a moment, nothing happened. Then, after a second or so, nothing continued
  to happen.»
</p>

CSS

css
p {
  width: 15em;
  border: 1px solid #cccccc;
  font-size: 2rem;
  font-style: italic;
  margin: 1em;
}

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

p.right {
  text-align: right;
}

Result

Specifications

Specification
CSS Text Module Level 3
# hanging-punctuation-property

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hanging-punctuation
allow-end
first
last
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support

See also