-
-
Save dvschultz/8339004 to your computer and use it in GitHub Desktop.
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"> | |
| html,body { | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .poem { | |
| display: table; | |
| vertical-align: middle; | |
| width: 100%; | |
| height: 100%; | |
| line-height: 1.2; | |
| margin-left: auto; | |
| margin-right: auto | |
| } | |
| .poem-wrap1 { | |
| display: table-row; | |
| width: 100%; | |
| } | |
| .poem-wrap2 { | |
| display: table-cell; | |
| vertical-align: middle; | |
| width: 100%; | |
| } | |
| .stanza { | |
| display: block; | |
| line-height: 1.2; | |
| margin: 1em 0 1em 2em | |
| } | |
| .verse { | |
| line-height: 1.2; | |
| 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"> | |
| <div class="poem-wrap1"> | |
| <div class="poem-wrap2"> | |
| <p class="stanza"> | |
| <span class="verse">From off a hill whose concave womb reworded</span><br class="calibre3"/> | |
| <span class="verse">A plaintful story from a sistering vale,</span><br class="calibre3"/> | |
| <span class="verse">My spirits to attend this double voice accorded,</span><br class="calibre3"/> | |
| <span class="verse">And down I laid to list the sad-tuned tale;</span><br class="calibre3"/> | |
| <span class="verse">Ere long espied a fickle maid full pale,</span><br class="calibre3"/> | |
| <span class="verse">Tearing of papers, breaking rings a-twain,</span><br class="calibre3"/> | |
| <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 class="calibre3"/> | |
| <span class="verse">Which fortified her visage from the sun,</span><br class="calibre3"/> | |
| <span class="verse">Whereon the thought might think sometime it saw</span><br class="calibre3"/> | |
| <span class="verse">The carcass of beauty spent and done:</span><br class="calibre3"/> | |
| <span class="verse">Time had not scythed all that youth begun,</span><br class="calibre3"/> | |
| <span class="verse">Nor youth all quit; but, spite of heaven's fell rage,</span><br class="calibre3"/> | |
| <span class="verse">Some beauty peep'd through lattice of sear'd age.</span> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If you get a bit more explicit with
display: table|table-row|table-cellvalues you will have less breakage in non-supported e-readers and browsers.div-itis, but it works.
tested in ADE 2.0 only so far. Trying to get my hands on a 1.7 copy.