Hanging Quotes

Using spans to get good hanging quote support for most fonts/websites. No programatic way to convert probably :/

by danShumway

HTML

<p>
<span class="ldquo">"</span>Quotes<span class="rdquo">"</span> hang at the start of paragraphs, <span class="hpush"></span><span class="ldquo">"</span>and<span class="rdquo">"</span> within them.
</p>
<p>
“Quotes” untouched.
</p>

CSS

* { font-size:50px; }
p { position:relative; margin-left: 2em; }

.rdquo, .ldquo {
  position: relative;
  color: transparent;
}

.rdquo:after, .ldquo:after {
  speak: none;
  pointer-events:none;
  color: rgba(0,0,0,1);
  display: inline;
  position: relative;
  margin-left: -1ex;
}

.ldquo:after {
  content: "“";
}

.rdquo:after {
  content: "”";
}

/*-----------Now, can I get hanging quotation marks?---------*/
.ldquo {
  margin-left: -0.5em;
}

.hpush {
  margin-right: 0.5em;
  display: inline-block;
}

p::selection, span::selection {
  background:rgb(120,120,120);
  color:black;
}

.ldquo::selection, .rdquo::selection {
  color:transparent;
}