Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 07-16-2010, 05:38 PM   #16
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
Quote:
Originally Posted by troymc View Post
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.

Quote:
Originally Posted by troymc View Post
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!!).

Quote:
Originally Posted by troymc View Post
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 is offline   Reply With Quote
Old 07-16-2010, 08:45 PM   #17
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
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:
Code:
.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:
Code:
  <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 is offline   Reply With Quote
Old 07-17-2010, 05: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
Old 07-24-2010, 11:00 AM   #19
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
Just wondering if anybody tried the above on different readers and if it worked properly?
EricDP is offline   Reply With Quote
Old 07-26-2010, 03:42 PM   #20
troymc
Groupie
troymc will become famous soon enoughtroymc will become famous soon enoughtroymc will become famous soon enoughtroymc will become famous soon enoughtroymc will become famous soon enoughtroymc will become famous soon enough
 
Posts: 161
Karma: 608
Join Date: Aug 2008
Location: Plano, TX
Device: Sony PRS-505 + B&N Nook + Motion LE1700 + Motorola Xoom Wifi
Quote:
Originally Posted by EricDP View Post
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:
Code:
    <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

Code:
  <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
troymc is offline   Reply With Quote
Old 07-26-2010, 03:59 PM   #21
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
Quote:
Originally Posted by troymc View Post
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 is offline   Reply With Quote
Old 10-06-2010, 10:02 AM   #22
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
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.
EricDP is offline   Reply With Quote
Reply

Tags
css, epub

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Margin question Switch Calibre 11 05-13-2010 03:32 PM
How to shrink margin? tomsem Kindle Developer's Corner 2 12-11-2009 10:20 PM
calibre ignore margin-top and margin-bottom bender Calibre 2 12-11-2009 06:58 AM
Margin sizes... M0zza Calibre 2 09-22-2008 04:02 AM
Right Margin Control TedPark Sony Reader Dev Corner 4 07-02-2008 07:41 AM


All times are GMT -4. The time now is 04:14 PM.


MobileRead.com is a privately owned, operated and funded community.