07-16-2010, 05:38 PM | #16 |
Groupie
Posts: 165
Karma: 339490
Join Date: May 2010
Device: nook, BlackBerry
|
I've tried it in ADE on my laptop. That's the closest thing to a reader that I have right now.
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!!). 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. |
07-16-2010, 08:45 PM | #17 |
Groupie
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 Code:
<p class="paragraph-center">ANNIVERSARY ODE</p> <hr class="small" /> <div class="centerblock"> <p class="verse vneg320">Again we meet to celebrate<br /> With badge and solemn rite,<br /> Our fifty-second anniversary,<br /> In Pickwick Hall, tonight.</p> </div> <div class="centerblock"> <p class="verse vneg090">We all are here in perfect health,<br /> None gone from our small band:<br /> Again we see each well-known face,<br /> And press each friendly hand.</p> </div> <div class="centerblock"> <p class="verse vneg200">Our Pickwick, always at his post,<br /> With reverence we greet,<br /> As, spectacles on nose, he reads<br /> Our well-filled weekly sheet.</p> </div> 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 for spacing. Bad habit of mine... |
Advert | |
|
07-17-2010, 05:56 PM | #18 |
Groupie
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; } Code:
<div class="centerblock"> <table class="tableblock vneg1"> <tr> <td class="verse">Again we meet to celebrate<br /> With badge and solemn rite,<br /> Our fifty-second anniversary,<br /> 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 /> None gone from our small band:<br /> Again we see each we,nn,mll-known face,<br /> And press each friendly hand.</td> </tr> </table> </div> 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! |
07-24-2010, 11:00 AM | #19 |
Groupie
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?
|
07-26-2010, 03:42 PM | #20 | |
Groupie
Posts: 161
Karma: 608
Join Date: Aug 2008
Location: Plano, TX
Device: Sony PRS-505 + B&N Nook + Motion LE1700 + Motorola Xoom Wifi
|
Quote:
1) similar to what you showed: Code:
<div class="centerblock"> <p> ... ... ... </p> </div> 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> 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 |
|
Advert | |
|
07-26-2010, 03:59 PM | #21 | |
Groupie
Posts: 165
Karma: 339490
Join Date: May 2010
Device: nook, BlackBerry
|
Quote:
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 |
|
10-06-2010, 10:02 AM | #22 |
Groupie
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. |
Tags |
css, epub |
|
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 |