margin: 0 auto;

[EricDP]

Originally Posted by troymc

Have you tried that on any ADE based ereader?

I've tried it in ADE on my laptop. That's the closest thing to a reader that I have right now.

Originally Posted by troymc

I didn't think inline-block was supported in epubs.

Argh! Reviewing the standard, it looks like you're right. I have too much CSS/XHTML history that I need to break out of and get used to this limited set.

Anyhow, it works in ADE for now... But I will try using another display form to see if I can replicate this in a way that conforms to the standard (even though none of the readers do!!).

Originally Posted by troymc

And how did you center the outside block without auto margins?

The outer block isn't actually centered - it's just a block of centered 'text' using 'text-align: center'. Then the inline-block becomes the only 'character' of text. An inline-block is basically a block of anything that flows 'inline' as if it were just another piece of text. I wonder if just doing 'display: inline' will work?

I will try when I get home - if it works, I'll post the new code. If not, I'll post the old (works but not standard) code.

[EricDP]

Well, just changing it to inline didn't work, so here's the code that currently works. I'll play with it over the weekend and see if I can get it working with 'compliant' code.

Here's the CSS:

.centerblock {
	text-align: center;
	display: block;
	text-indent: 0em;
}
.verse {
	text-align: left;
	display: inline-block;
	text-indent: 0em;
	font-size: 0.85em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
.vneg090 {
	margin-left: -0.90em;
}
.vnegxxx - etc for other indent amounts

And here's some text:

  <p class="paragraph-center">ANNIVERSARY ODE</p>
  <hr class="small" />

  <div class="centerblock">
    <p class="verse vneg320">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.</p>
  </div>

  <div class="centerblock">
    <p class="verse vneg090">We all are here in perfect health,<br />
    &nbsp;&nbsp;&nbsp;&nbsp;None gone from our small band:<br />
    Again we see each well-known face,<br />
    &nbsp;&nbsp;&nbsp;&nbsp;And press each friendly hand.</p>
  </div>

  <div class="centerblock">
    <p class="verse vneg200">Our Pickwick, always at his post,<br />
    &nbsp;&nbsp;&nbsp;&nbsp;With reverence we greet,<br />
    As, spectacles on nose, he reads<br />
    &nbsp;&nbsp;&nbsp;&nbsp;Our well-filled weekly sheet.</p>
  </div>

And here's how it renders in ADE:



Those couple of verses don't appear perfectly centered, but notice I have 'vneg' on each of them because lower down there is an even wider verse. I use the widest verse as calibration (it would be 'vneg000') and everything else is negative-indented to align.

Also, before somebody says it, I know I could <span> and indent for the alternate lines rather than using repeated &nbsp; for spacing. Bad habit of mine...

[EricDP]

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:

.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:

  <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]

Just wondering if anybody tried the above on different readers and if it worked properly?

[troymc]

Originally Posted by EricDP

Just wondering if anybody tried the above on different readers and if it worked properly?

Yes. Well - somewhat. Using what you posted I have found two ways which do what I want:

1) similar to what you showed:

    <div class="centerblock">
      <p>
          ... ... ...
      </p>
    </div>

Where div.centerblock is "text-align: center; display: block;" and div.centerblock p is "text-align: left; display: inline-block;"

2) left-justified text in a centered blockquote

  <div class="poetry">
    <blockquote class="verse">
      <p>The Patron of true Holineſſe,<br />
      Foule Errour doth defeate:</p>

      <p>Hypocriſie him to entrappe,<br />
      Doth to his home entreate.</p>
    </blockquote>
  </div>

Where div.poetry is "text-align: center; display: block;" and blockquote.verse is " text-align: left; display: inline-block;". With inline-block the blockquote is only as wide as the included text. I found this because I wanted to put a border around the text.

Both of these appear to work fine in ADE (Sony/Nook) & webkit (Sigil/Calibre) readers. But don't ask why since I thought inline-block was not part of the spec.


Troy

[EricDP]

Originally Posted by troymc

Both of these appear to work fine in ADE (Sony/Nook) & webkit (Sigil/Calibre) readers. But don't ask why since I thought inline-block was not part of the spec.

Indeed, my original method (see up in this thread) was similar to yours - just an 'inline-block' paragraph inside a block div. But inline-block is not in the standard - I looked it up. It may work now, but a firmware upgrade on a reader might make it stop working. That's why I came up with the convoluted 'inline-table' method. Personally, I'd prefer to use inline-block but I'm trying to offer a standards-compliant method that will hopefully continue to work as these machines mature and become more strict about the standard.

I think inline-block works in Sigil and Calibre because they implement the full CSS spec instead of the subset that is EPUB. I've stopped using them for proofing because of that unreliability (although I still use Sigil for editing). I have no idea why it works in ADE - ADE is missing a lot of other CSS (and HTML) features, so it doesn't make sense that it would implement this one.

The standard supports the following visual display models: none, inline, block, run-in, table, inline-table, table-row-group, table-header-group, table-footer-group, table-column-group, table-row, table-column, table-cell, table-caption, inherit, oeb-page-head, and oeb-page-foot.

Reference: http://www.idpf.org/2007/ops/OPS_2.0...tml#Section3.3

[EricDP]

Update on this: using the "vneg" method I described above works quite well on my (new) nook, except if the font is x-large or xx-large. Basically, if the font is so big that the longest line ends up touching the left edge, then the negative margins on the other lines may push them beyond the edge, so that you lose some letters.

Also, using inline-table, each verse stays together as a block and won't break over pages, so if a single verse is so large that it can't fit on a single page, the bottom will be chopped off.

As a work-around for books that have a lot of centred verse, I've considered making a 'large-type' version that is just left-aligned (since it will fill the line anyway) and a 'normal' version that centres. But I hate the idea of having more than one version of a book. It just may not be possible to have a perfect reflowable book that works in all cases, though.