Hanging punctuation prevents quotations and other marks from taking a bite out of the crisp left edge of a text block. Make a clean edge by pushing the quotation marks into the margin.
    —Ellen Lupton, Thinking with Type, 2^nd Revised and Expanded Edition

Hanging Punctuation

A polyfill for proper hanging punctuation in CSS.

The hanging-punctuation property should be part of CSS in the future, but no browser supports in yet. In the meantime, this Stylefill polyfills the missing features through the exact same CSS:

p {
  hanging-punctuation: first;
  /* Dynamically hang punctuation
     on the left margin. */
}

html[lang="zh-Hans"] {
  text-align: justify;
  hanging-punctuation: allow-end;
  /* Allow ending punctuation
     to hang even when justified. */
}

Now, the first glyph only hangs if it is at the beginning of a line. This corrects

“Lorem  ipsum  dolor  sit  amet, consectetuer
adipiscing elit. Ut a sapien alt,” they said,
“Purus  molestie  dolor. Integer  quis eros ut
erat posuere dictum.”

to this:

“Lorem  ipsum  dolor  sit  amet, consectetuer
 adipiscing elit. Ut a sapien alt,” they said,
“Purus  molestie  dolor. Integer  quis eros ut
 erat posuere dictum.”

Getting started

Hanging Punctuation is a Stylefill, meaning you only need to interact with this library through your CSS, and browsers that already support the hanging-punctuation property won’t use this polyfill.

To install Hanging Punctuation, add it to your project or use the package manager and build tool of your choice.

With npm

npm install kennethormandy/hanging-punctuation

Now it’s ready to include through your task runner or build tool, or you may just reference the files in your HTML:

<script src="node_modules/hanging-punctuation/hanging-punctuation.min.js"></script>

With Component

component install kennethormandy/hanging-punctuation

With Bower

bower install hanging-punctuation

Running locally

To run the tests locally:

git clone https://github.com/kennethormandy/hanging-punctuation
npm install
npm test
# Now visit http://127.0.0.1:8080/test

Contributing

Thanks for considering contributing! There’s information about how to get started with Hanging Punctuation here.

License

The MIT License (MIT)

Copyright © 2014 Kenneth Ormandy & Chloi Inc.