How to do Hanging Punctuation in HTML / CSS

Question

Is there a good way to do Hanging Punctuation in HTML / CSS today, since the browsers haven't implemented the hanging-punctuation property?

Update: A JavaScript solution would be nice, since it will enable me not to touch my html, besides the one line that references the script.

something like, 1) go through all p, span, and blockquote. If they start with ", ..., or something, then adjust the spacing. But I can't seem to figure out how to know how much to change the spacing, and how to handle anything other than the first character of the first line in an element.

    var elements = document.querySelectorAll('p, span, blockquote');
console.log(elements);
var i = 0;
while (i < elements.length) {
  var el = elements[i];
  if (el.firstChild.nodeValue && el.firstChild.nodeValue.match(/^[".,']/)) {
    el.style.position = 'relative';
    el.style.left = '-.4em';
  }
  i += 1;
}

Code is a work in progress...

Answer 1

You could also fake it using :before and :after:

p {
    margin-left: 1em;
    background-color: #eee;
}

p:before {
    content: '"';
    position: absolute;
    margin-left: -.4em;
}

p:after {
    content: '"';
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo semper nulla at consectetur. Quisque at aliquam turpis, eu rhoncus dolor. Aliquam quis aliquam ante. Suspendisse tempus, erat eget scelerisque rhoncus, lacus eros luctus ante, a consequat quam tortor a quam. Suspendisse congue, ipsum sit amet venenatis ornare, ligula tortor fermentum est, et aliquet augue nisl id leo. Suspendisse gravida nisl in arcu condimentum gravida. Maecenas aliquam nisi nec congue viverra. Duis at lacinia justo.</p>

---

Edit:

It was pointed out that the negative margin is -.4em because that happens to be about the width of a quote character in the given font, since it is a variable-width font.

A non-font-specific solution could be to make the item 1em wide, then align the text to the right:

p:before {
  content: '"';
  position: absolute;
  margin-left: -1em;
  width: 1em;
  text-align: right;
}

Answer 2

You can use a negative text-indent:

blockquote p {
  text-indent: -.4em;
  background-color: #faebbc;
}

<p>There's a block quote on the next line:</p>
<blockquote><p>"I have negative text indent."</p></blockquote>

(tip adapted from http://css-tricks.com/almanac/properties/h/hanging-punctuation/)