hanging punctuation

dabblet.css

/**
 * hanging punctuation
 */

html
{
	font: 1.5em/1.5 Georgia, serif;
	padding: 4em;
}

body
{
	border-left: 1px solid red;
	border-right: 1px solid red;
}

p
{
	position: relative;
	margin: 1.5em 0;
}

.hanging-punctuation-start
{
	position: absolute;
	right: 100%;
}

.hanging-punctuation-end
{
	position: absolute;
}

footer
{
	font-size: 0.75em;
}

dabblet.html

<p>Now up comes Ted without any legs<br/>
And in their place there were two wooden pegs<br/>
She kissed him a dozen times or two<br/>
Saying “Holy moly could it be you?<span class="hanging-punctuation-end">”</span></p>

<p><span class="hanging-punctuation-start">“</span>Now was you drunk or was you blind<br/>
When you left your two fine legs behind?<br/>
Or was it out walking upon the sea<br/>
That tore your legs from the knees away?<span class="hanging-punctuation-end">”</span></p>

<footer>(Lyrics taken from “Mrs. McGrath”)</footer>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}