View Single Post
Old 02-23-2014, 02:54 AM   #6
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,558
Karma: 19620479
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Code:
<div class="poetry">
<div class="stanza">
<div class="line">There lived a lady in Scotland,</div>
<div class="line in">Hey my love and ho my joy</div>
<div class="line">There lived a lady in Scotland,</div>
<div class="line in">Who dearly loved me</div>
<div class="line">There lived a lady in Scotland,</div>
<div class="line">An she's fa'n in love wi an Englishman,</div>
<div class="line in">And bonnie Susie Cleland is to be burnt in Dundee</div>
</div>

<div class="stanza">
<div class="line">The father unto the daughter came,</div>
<div class="line in">Hey my love and ho my joy</div>
<div class="line">The father unto the daughter came,</div>
<div class="line in">Who dearly loved me</div>
...
</div>
</div>
Code:
div.poetry {
  margin: 1em 0 2em;
  text-align: left;
}
div.poetry div.stanza {
  margin-top: 0.5em;
}
div.poetry div.line {
  padding-left: 3em;
  text-indent: -3em;
}
div.poetry div.in {
  margin-left: 2em;
  font-style: italic;
}
I've decided against using "<p>" in poetry, since lines are not paragraphs, although "<p>" is more convenient than "<div class="line">", but the latter behaves nicer when the CSS is not supported at all.
Jellby is offline   Reply With Quote