User:Windymilla/Poetry

From DPWiki

The Best Practices information on poetry shows how to have centered poems, but not how to include line numbers. Here are a couple of ideas, which seem to work as expected on all devices, except Kindle DX only, where they degrade reasonably. They put linenumbers to the left of the poem, but not on the left margin, leaving space for pagenumbers on the right. In the second example, the linenumbers appear on the right margin in epub.

1) Zero width linenum span: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <title>Centred Poem Example</title>

  <style type="text/css">


.poetry-container {
  text-align: center;
}
.poetry {
  text-align: left;
  display: inline-block;
}
@media handheld {
  .poetry {
    display: block;
    margin-left: 3em;
  }
}

.poetry .stanza { margin: 1em auto; }
.poetry .verse { padding-left: 3em; }

.linenum {
  padding: 0em;
  width: 0em;
  display: inline-block;
}

.poetry  .verse   { text-indent: -3em; }
.verse   .linenum { text-indent: -3em; } /* 3 + 3 = 6 */
.poetry  .indent2 { text-indent: -2em; }
.indent2 .linenum { text-indent: -4em; } /* 2 + 4 = 6 */
.poetry  .indent4 { text-indent: -1em; }
.indent4 .linenum { text-indent: -5em; } /* 1 + 5 = 6 */

.pagenum { /* uncomment the next line for invisible page numbers */
  /*  visibility: hidden;  */
  position: absolute;
  right: 2em;
  font-size: smaller;
  text-align: right} /* page numbers */

   </style>
 </head>
<body>
<div class="poetry-container">
  <div class="poetry">
    <div class="stanza">
      <div class="verse"><span class="linenum">100 </span><span class='big'>U</span>NHAPPY is Bo-Peep,</div>
      <div class='verse indent2'>Her tears profusely flow,</div>
      <div class='verse'>Because her precious sheep</div>
      <div class='verse indent2'>Have wandered to and fro,</div>
      <div class='verse indent2'>Have chosen far to go,</div>
      <div class='verse'>For "pastures new" inclined,</div>
      <div class='verse indent2'>(See Lycidas)—and lo!</div>
      <div class='verse'>Their tails are still behind!</div>
    </div><div class='stanza'>
      <div class='verse'>How catch them while asleep?</div>
      <div class='verse indent2'>(I think Gaboriau</div>
      <div class='verse'>For machinations deep</div>
      <div class='verse indent2'>Beats Conan Doyle and Co.)</div>
      <div class='verse indent2'>But none a hint bestow</div>
      <div class='verse'>Save this, on how to find</div>
      <div class='verse indent2'>The flocks she misses so—</div>
      <div class='verse'>"Their tails are still behind!"</div>
    </div><div class='stanza'>
      <div class='verse'>This simple faith to keep</div>
      <div class='verse indent2'>Will mitigate her woe,</div>
      <div class='verse'>She is not Joan, to leap</div>
      <div class='verse indent2'>To arms against the foe</div>
      <div class='verse indent2'>Or conjugate τύρτω;</div>
      <div class='verse'>Nay, peacefully resigned</div>
      <div class='verse indent2'><span class="linenum">125 </span>She waits, till time shall show
          <span class="pagenum"><a name="Page_295" id="Page_295">[295]</a></span></div>
      <div class='verse'>Their tails are still behind!</div>
    </div><div class='stanza'>
      <div class='verse'>Bo-Peep, rejoice! Although</div>
      <div class='verse indent2'>Your sheep appear unkind,</div>
      <div class='verse'>Rejoice at last to know</div>
      <div class='verse indent2'>Their tails are still behind!</div>
      <div class='sig'><i>Anthony C. Deane.</i></div>
    </div>
  </div>
</div>

</body>

</html>


2) Floated linenum span - this could be changed to float:right and change left:-3em to right:3em in order to get linenums on the right 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <title>Centred Poem Example</title>

  <style type="text/css">


.poetry-container {
  text-align: center;
}
.poetry {
  text-align: left;
  display: inline-block;
}
@media handheld {
  .poetry {
    display: block;
    margin-left: 3em;
  }
}

.poetry .stanza { margin: 1em auto; }
.poetry .verse { padding-left: 3em; }

.linenum {
  float: left;
  position: relative;
  left: -3em;
}
@media handheld {
  .linenum { float: right; left: 0em; }
}

.poetry  .verse   { text-indent: -3em; }
.poetry  .indent2 { text-indent: -2em; }
.poetry  .indent4 { text-indent: -1em; }

.pagenum { /* uncomment the next line for invisible page numbers */
  /*  visibility: hidden;  */
  position: absolute;
  right: 2em;
  font-size: smaller;
  text-align: right} /* page numbers */

   </style>
 </head>
<body>
<div class="poetry-container">
  <div class="poetry">
    <div class="stanza">
      <span class="linenum">100 </span><div class="verse"><span class='big'>U</span>NHAPPY is Bo-Peep,</div>
      <div class='verse indent2'>Her tears profusely flow,</div>
      <div class='verse'>Because her precious sheep</div>
      <div class='verse indent2'>Have wandered to and fro,</div>
      <div class='verse indent2'>Have chosen far to go,</div>
      <div class='verse'>For "pastures new" inclined,</div>
      <div class='verse indent2'>(See Lycidas)—and lo!</div>
      <div class='verse'>Their tails are still behind!</div>
    </div><div class='stanza'>
      <div class='verse'>How catch them while asleep?</div>
      <div class='verse indent2'>(I think Gaboriau</div>
      <div class='verse'>For machinations deep</div>
      <div class='verse indent2'>Beats Conan Doyle and Co.)</div>
      <div class='verse indent2'>But none a hint bestow</div>
      <div class='verse'>Save this, on how to find</div>
      <div class='verse indent2'>The flocks she misses so—</div>
      <div class='verse'>"Their tails are still behind!"</div>
    </div><div class='stanza'>
      <div class='verse'>This simple faith to keep</div>
      <div class='verse indent2'>Will mitigate her woe,</div>
      <div class='verse'>She is not Joan, to leap</div>
      <div class='verse indent2'>To arms against the foe</div>
      <div class='verse indent2'>Or conjugate τύρτω;</div>
      <div class='verse'>Nay, peacefully resigned</div>
      <span class="linenum">125 </span><div class='verse indent2'>She waits, till time shall show
          <span class="pagenum"><a name="Page_295" id="Page_295">[295]</a></span></div>
      <div class='verse'>Their tails are still behind!</div>
    </div><div class='stanza'>
      <div class='verse'>Bo-Peep, rejoice! Although</div>
      <div class='verse indent2'>Your sheep appear unkind,</div>
      <div class='verse'>Rejoice at last to know</div>
      <div class='verse indent2'>Their tails are still behind!</div>
      <div class='sig'><i>Anthony C. Deane.</i></div>
    </div>
  </div>
</div>

</body>

</html>
Retrieved from "https://www.pgdp.net/w/index.php?title=User:Windymilla/Poetry&oldid=89406"