Skip to content

Instantly share code, notes, and snippets.

@bdunnette

bdunnette/index.html

Last active October 29, 2015 16:27
Show Gist options
  • Save bdunnette/b2f4a70052830da25274 to your computer and use it in GitHub Desktop.
Save bdunnette/b2f4a70052830da25274 to your computer and use it in GitHub Desktop.
Download ZIP
Mary's Ghost: An attempt at formatting poetry with CSS
Raw
index.html
<!DOCTYPE HTML>
<head>
<link href='http://fonts.googleapis.com/css?family=Old+Standard+TT:400,700' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Old Standard TT', serif;
}
h1,
h2,
h4 {
text-align: center;
margin-top: -10px;
}
.poem {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
.stanza {
padding-left: 60px;
padding-bottom: 20px;
}
.stanza>.line:nth-of-type(even) {
padding-left: 22px;
}
</style>
</head>
<body>
<h1>MARY'S GHOST</h1>
<h2>A PATHETIC BALLAD</h2>
<h4>Thomas Hood (1799-1845)</h5>
<div class="poem">
<div class="stanza">
<div class="line">'Twas in the middle of the night,</div>
<div class="line">To sleep young William tried,</div>
<div class="line">When Mary's ghost came stealing in,</div>
<div class="line">And stood at his bedside.</div>
</div>
<div class="stanza">
<div class="line">O William dear! O William dear!</div>
<div class="line">My rest eternal ceases;</div>
<div class="line">Alas! my everlasting peace</div>
<div class="line">Is broken into pieces.</div>
</div>
<div class="stanza">
<div class="line">I thought the last of all my cares</div>
<div class="line">Would end with my last minute;</div>
<div class="line">But though I went to my long home,</div>
<div class="line">I didn't stay long in it.</div>
</div>
<div class="stanza">
<div class="line">The body-snatchers they have come,</div>
<div class="line">And made a snatch at me;</div>
<div class="line">It's very hard them kind of men</div>
<div class="line">Won't let a body be!</div>
</div>
<div class="stanza">
<div class="line">You thought that I was buried deep,</div>
<div class="line">Quite decent-like and chary,</div>
<div class="line">But from her grave in Mary-bone,</div>
<div class="line">They've come and boned your Mary.</div>
</div>
<div class="stanza">
<div class="line">The arm that used to take your arm</div>
<div class="line">Is took to Dr. Vyse;</div>
<div class="line">And both my legs are gone to walk</div>
<div class="line">The hospital at Guy's.</div>
</div>
<div class="stanza">
<div class="line">I vowed that you should have my hand,</div>
<div class="line">But fate gives us denial;</div>
<div class="line">You'll find it there, at Dr. Bell's,</div>
<div class="line">In spirits and a phial.</div>
</div>
<div class="stanza">
<div class="line">As for my feet, the little feet</div>
<div class="line">You used to call so pretty,</div>
<div class="line">There's one, I know, in Bedford Row,</div>
<div class="line">The t'other's in the City.</div>
</div>
<div class="stanza">
<div class="line">I can't tell where my head is gone,</div>
<div class="line">But Doctor Carpue can;</div>
<div class="line">As for my trunk, it's all packed up</div>
<div class="line">To go by Pickford's van.</div>
</div>
<div class="stanza">
<div class="line">I wish you'd go to Mr. P.</div>
<div class="line">And save me such a ride;</div>
<div class="line">I don't half like the outside place,</div>
<div class="line">They've took for my inside.</div>
</div>
<div class="stanza">
<div class="line">The cock it crows - I must be gone!</div>
<div class="line">My William, we must part!</div>
<div class="line">But I'll be yours in death, altho'</div>
<div class="line">Sir Astley has my heart.</div>
</div>
<div class="stanza">
<div class="line">Don't go to weep upon my grave,</div>
<div class="line">And think that there I be;</div>
<div class="line">They haven't left an atom there</div>
<div class="line">Of my anatomie.</div>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment