Thread: margin: 0 auto;
View Single Post
Old 07-17-2010, 06:56 PM   #18
EricDP
Groupie
EricDP ought to be getting tired of karma fortunes by now.EricDP ought to be getting tired of karma fortunes by now.EricDP ought to be getting tired of karma fortunes by now.EricDP ought to be getting tired of karma fortunes by now.EricDP ought to be getting tired of karma fortunes by now.EricDP ought to be getting tired of karma fortunes by now.EricDP ought to be getting tired of karma fortunes by now.EricDP ought to be getting tired of karma fortunes by now.EricDP ought to be getting tired of karma fortunes by now.EricDP ought to be getting tired of karma fortunes by now.EricDP ought to be getting tired of karma fortunes by now.
 
Posts: 165
Karma: 339490
Join Date: May 2010
Device: nook, BlackBerry
OK, I think I've solved this using only standard code - I fell back to 'inline-table' instead of 'inline-block'. Somewhat comical since one of the reasons the display parameters were created was to eliminate the abuse of tables for non-tabular data. Oh well...

Here's the CSS:
Code:
.centerblock {
	text-align: center;
	display: block;
	text-indent: 0em;
}
.tableblock {
	text-align: left;
	display: inline-table;
}
.verse {
	text-align: left;
	text-indent: 0em;
	font-size: 0.85em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
td {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
And here is a sample of two verses:

Code:
  <div class="centerblock">
    <table class="tableblock vneg1">
      <tr>
        <td class="verse">Again we meet to celebrate<br />
        &nbsp;&nbsp;&nbsp;&nbsp;With badge and solemn rite,<br />
        Our fifty-second anniversary,<br />
        &nbsp;&nbsp;&nbsp;&nbsp;In Pickwick Hall, tonight.</td>
      </tr>
    </table>
  </div>

  <div class="centerblock">
    <table class="tableblock vneg2">
      <tr>
        <td class="verse">We all are here in perfect health,<br />
        &nbsp;&nbsp;&nbsp;&nbsp;None gone from our small band:<br />
        Again we see each we,nn,mll-known face,<br />
        &nbsp;&nbsp;&nbsp;&nbsp;And press each friendly hand.</td>
      </tr>
    </table>
  </div>
Yes, you do need a separate div for each verse. Otherwise the verses go side-by side.

I tested this in ADE and in Sigil and it seems to render well, and it will break across pages in ADE (it won't break a single verse across a page, but the entire poem will break between verses).

Please provide feedback on how this works in different readers. Thanks!
EricDP is offline   Reply With Quote