Skip to content

Instantly share code, notes, and snippets.

@elmimmo

elmimmo/poem.html

Created October 3, 2011 21:29
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save elmimmo/1260309 to your computer and use it in GitHub Desktop.
Save elmimmo/1260309 to your computer and use it in GitHub Desktop.
Download ZIP
Semantic HTML for poems + CSS styles for indented wrapping lines for small screens
Raw
poem.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Styling a poem</title>
<style type="text/css">
/* Left-aligned text in a centered block (mangles text in Adobe Digital Editions 1.7, so search an alternative if you need to support it) */
.poem {
display: table;
margin-right: auto;
margin-left: auto;
}
/* Indent wrapping lines */
.stanza {
margin-left: 2em;
}
.verse {
margin-left: -2em;
}
</style>
</head>
<body style="font-size: 200%;">
<p>Resize your browser so that verse lines wrap to a second line. You may find <a href="http://resizemybrowser.com">ResizeMyBrowser.com</a> handy. </p>
<div class="poem">
<p class="stanza">
<span class="verse">From off a hill whose concave womb reworded</span><br />
<span class="verse">A plaintful story from a sistering vale,</span><br />
<span class="verse">My spirits to attend this double voice accorded,</span><br />
<span class="verse">And down I laid to list the sad-tuned tale;</span><br />
<span class="verse">Ere long espied a fickle maid full pale,</span><br />
<span class="verse">Tearing of papers, breaking rings a-twain,</span><br />
<span class="verse">Storming her world with sorrow's wind and rain.</span>
</p>
<p class="stanza">
<span class="verse">Upon her head a platted hive of straw,</span><br />
<span class="verse">Which fortified her visage from the sun,</span><br />
<span class="verse">Whereon the thought might think sometime it saw</span><br />
<span class="verse">The carcass of beauty spent and done:</span><br />
<span class="verse">Time had not scythed all that youth begun,</span><br />
<span class="verse">Nor youth all quit; but, spite of heaven's fell rage,</span><br />
<span class="verse">Some beauty peep'd through lattice of sear'd age.</span>
</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment