Happy holiday folks! All the best from us at Digitpaint

Day 20

Perfect alignment with hanging-punctuation

The CSS hanging-punctuation property enables us to properly align punctuation just outside the textbox margin. This means that punctuation marks, are not taken in account when calculating the width of the text box. In practice this means all characters at the beginning or end of each line can be perfectly vertically aligned as the punctuation will be "hanging" just outside of the containing box.

This probably sounds like a lot of gobbledigook so let's have look and see it in action.

Without hanging-punctuation

Have a holly, jolly Christmas; It's the best time of the year I don't know if there'll be snow but have a cup of cheer Have a holly, jolly Christmas; And when you walk down the street Say Hello to friends you know and everyone you meet

With hanging-punctuation

Oh ho the mistletoe hung where you can see; Somebody waits for you; Kiss her once for me Have a holly jolly Christmas and in case you didn't hear Oh by golly have a holly jolly Christmas this year

We're sorry, but your browser doesn't support the hanging punctuation property. As of December 2017, the hanging-punctuation property is only supported by Safari 10+ and Safari 10.2+ on IOS. The example below is just a screenshot.

Hanging punctuation demo screenshot for non-supporting browsers

Using hanging-punctuation in CSS

All the magic happens by setting the hanging-punctuation property. The value of hanging-punctuation changes the text-indent of the punctuation that is at the start (or end) of a line. This indent is based on the width of the used punctuation character while also taking the font and the font size into account.

blockquote {
  hanging-punctuation: first last;
}

Values

There are five possible values, of which "first" will be the most commonly used.

none (default)
No hanging punctuation
first
Hanging will only be applied to the first punctuation character of the text (not all characters are affected, see below)
last
Hanging will only by applied to the last punctuation character on the last line of the text (not all characters are affected, see the next paragraph)
force-end
A stop or comma at the end of a line in the text will hang.
allow-end
A stop or comma at the end of a line will hang, only if it does not fit next to the text inside of the container.

Affected punctuation characters

The values first and last affect quite a few different unicode characters. To be more specific, they will apply hanging to characters from the "Punctuation, open" (Ps) or "Punctuation, close" (Ps) (open on first, close on last), "Punctuation, Final quote" (Pf) and "Punctuation, initial quote" (Pi) categories. These include al types of brackets, quotation marks and a few bracket and quotation mark ornaments.

force-end and allow-end support a few different commas and stops as well. The list of allowed characters can be found here. This type of hanging punctuation is generally only used in East Asian languages.

Browser compatibility

At this moment the browser compatibility for this property is very limited. It's Safari-only as of december 2017. Other browsers have yet to start working on implementing support for this property.

  • safari
  • ios safari

More detailed information on caniuse.com

Resources

Demo source code

Do you want to dig in the nitty-gritty of this demo, check out the source files:

Back to home