hanging-punctuation
hanging-punctuation copied to clipboard
A polyfill for proper hanging punctuation in CSS.
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, 2nd 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.