Why does this hanging-punctuation hack work?

[inktrap]

I came across an interesting hack to get hanging punctuation on the left edge of a block, and I can’t get my head around it. The opening quote is wrapped in a span with a negative margin-left and an empty span with the same but positive margin-left is placed right before it. The only ddownside seems to be that it doesn’t work with the first word.

Is this a known hack? I’ve never seen it discussed before. Can somebody explain why it works?

https://codepen.io/anon/pen/pPMGjq?editors=1100

[rkieru]

For what it is worth… this does not seem to function in either Safari or Chrome. The only way I was able to visualize the quotation mark appearing outside of your background was through Mozilla Firefox.

[inktrap]

You’re right; I didn’t check other browsers. It seems that Firefox leaves that empty span at the end of the previous line, for some reason, and that’s why this works.

But that got me thinking: wrapping the empty span around the preceding space, which always ends up at the end of the previous line when linebreaking, should work in all browsers – and it does!

https://codepen.io/anon/pen/ZyzxEb?editors=1100

[Author]

Posts