Created
October 3, 2011 21:29
-
-
Save elmimmo/1260309 to your computer and use it in GitHub Desktop.
Semantic HTML for poems + CSS styles for indented wrapping lines for small screens
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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