08-15-2017, 08:47 PM | #1 |
Addict
Posts: 242
Karma: 37089
Join Date: Oct 2012
Device: none
|
Table-like block with dotted lines
I'm putting together an epub where I need something that looks like the following--excluding the lines of dashes above and below the text:
---------------------------------------------------------- I. Dark and stormy night. (1) ****Dark ............................. 1 tsp. (2) ****Storm ........................... 16 oz. ****Rain ............................. 5 qts. ****Torrents ........................ 3 It was a dark and stormy night; the rain fell in (3) torrents except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets… ---------------------------------------------------------- We have (1) a title… followed by (2) a block of lines that needs to be indented & roughly centered on the page… followed by (3) some text. Regarding the block of lines (2): [The text editor featured by this forum does not appear to support unbreakable spaces… when I preview this post they show up as stars. Please consider they are spaces. There should be a 10% or so margin on the left and right of this block. It should be centered relative to the following paragraph. (3)] Let's say that if I this were a table there would be two columns… each of them with the text left-justified: 1 - in col. 1 the nature of the "ingredient" padded by dots on the right using up the remainder of the cell. 2 - in col. 2 the corresponding quantity of the ingredient in ounces, quarts, etc. Obviously, these "tables" of ingredients all need to be the exact same width and their columns must be aligned with the columns in the previous and next "table"… otherwise the result will look rather terrible. Now the problem is that there are some 700+ recipes in this book and a majority of them use the above presentation. So I need to settle on some kind of template before I get started. I know that I could do this with Good Ol' html tables and get exactly what I want but apart from the fact that such tables are a nightmare to code and adjust, I have heard rumors that the powers that be are discouraging their use and may eventually look into phasing them out (?). So far I have played with the new display: table… display: table-row… display: table-cell… CSS properties. This looked rather promising but so far I have not been all that successful to say the least. They appear to have a mind of their own and I always end up with blocks of different widths depending on the content of the cells… which does not look right especially when more than one list of ingredients shows up on a given page… Besides I couldn't find a way to cause a vertically-aligned truncation of my lines of dots in the same spot on all lines. Some lines of dots are flush with the next column while others randomly come short by what looks like 2-3 or even 5-6 spaces on the right for no particular reason. Any suggestions as to how I could handle this and create a "template" that I could reuse for all recipes…? Without having to adjust each one manually until they look ~OK…? Keeping in mind this is an epub I'm talking about and transferring it to the Kobo e-reader I use is not a simple matter of saving my changes and hitting CTRL-R to reload the html file in Google Chrome or Firefox. |
08-16-2017, 01:58 AM | #2 | ||
Evangelist
Posts: 413
Karma: 6913952
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
|
Quote:
Quote:
Code:
table { display: table; } tr { display: table-row; } td { display: table-cell; } Code:
.mytable { margin-left: 15%; margin-right: 10%; } |
||
08-16-2017, 08:12 AM | #3 |
A Hairy Wizard
Posts: 3,069
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
You can just use overflow and/or text-overflow with a very long set of periods to cover any eventuality such as:
Code:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> .recipe {width:80%; margin:10%} .recipe h3 {font-weight:bold; font-size:1.2em; font-name:serif} .recipe p {text-align:justify; text-indent:0} .ingredients {width:80%; margin:2em auto;} .ingredients td {max-width: 500px; overflow: hidden; text-overflow: clip; white-space: nowrap} </style> </head> <body> <div class="recipe"> <h3>I. Dark and stormy night.</h3> <table class="ingredients"> <col width="50%" /> <col width="50%" /> <tr><td>Dark........................................................................................................................</td><td>1 tsp.</td></tr> <tr><td>Storm........................................................................................................................</td><td>16 oz.</td></tr> <tr><td>Rain........................................................................................................................</td><td>5 qts.</td></tr> <tr><td>Torrents........................................................................................................................</td><td>3</td></tr> </table> <p>It was a dark and stormy night; the rain fell in torrents except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets…</p> </div> </body> </html> |
08-16-2017, 11:24 AM | #4 |
Evangelist
Posts: 413
Karma: 6913952
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
|
That works with really up-to-date renderers, but "overflow" is still in "working draft" stage, and "text-overflow" is still just a "candidate recommendation" for CSS 3. A CSS 2–only renderer (which is fine with EPUB2) will either ignore it, or worse yet, skip the entire CSS rule because of a syntax error.
|
08-16-2017, 12:08 PM | #5 | |
Resident Curmudgeon
Posts: 73,654
Karma: 127838196
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
Last edited by JSWolf; 08-16-2017 at 12:15 PM. |
|
08-16-2017, 01:32 PM | #6 |
A Hairy Wizard
Posts: 3,069
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Well....if you care about old - out of date - renderers....
You'll have to use old - out of date - techniques.... You wont be able to exactly fill the remainder of the cell with perfectly spaced periods in all cases with a single template. The OP asked how to do that, I showed him/her... Have you tested the technique on your targeted devices? Devices can, and do, implement functionality that is not yet fully endorsed by the IDPF... Any compliant renderer is required to gracefully degrade on an unknown or incorrect css. If it ignores the entire css then that is a bug and should be reported as such. A non-css3 renderer should likewise skip over the css3 ... In any case, the rest of the code works fine. You will just need to manually add an approximate number of periods to fill out the remaining width of the first column for each ingredient. ...or maybe Jon can recommend an alternative code....?? |
08-16-2017, 01:43 PM | #7 |
A Hairy Wizard
Posts: 3,069
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Here's another thought....
Swap the quantity and ingredient names so you don't need all the periods: Code:
<table class="ingredients"> <col width="20%" /> <col width="80%" /> <tr><td>1 tsp.</td><td>Dark</td></tr> <tr><td>16 oz.</td><td>Storm</td></tr> <tr><td>5 qts.</td><td>Rain</td></tr> <tr><td>3</td><td>Torrents</td></tr> </table> |
08-17-2017, 01:49 AM | #8 | ||
Evangelist
Posts: 413
Karma: 6913952
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
|
Quote:
Quote:
Even if a renderer does just ignore the unknown properties/values and treats them as no-ops, you still get things that a nowhere close to "gracefully degrading". Take your example code and remove the "overflow: hidden;" line to simulate a renderer ignoring it. Not very pretty, is it? My primary reading software uses a terrible HTML/CSS implementation (but I'm stuck with it until there's a 10" reader that worth upgrading to), so I'm very aware of such limitations, but if (as Jon points out), baseline RMSDK (which is miles better than what I use) doesn't support something, then you really have to assume that a lot of reader software isn't going to, either. |
||
08-17-2017, 07:57 AM | #9 | |
Resident Curmudgeon
Posts: 73,654
Karma: 127838196
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
It does work on my H2O. It does not work as ePub, but it does work as kepub. |
|
08-17-2017, 11:53 AM | #10 | |
Bookmaker & Cat Slave
Posts: 11,447
Karma: 157030631
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
You know that the fate of all of us who deal with eReaders on a daily basis is sort of like a newspaper--write to/code to the lowest common denominator, not the highest. Those dot leaders won't work with about 95% of what is out there. I mean, let's be wildly optimistic--not 80%. I would not do this, not for any client of ours. Fixed layout? Sure. Reflowable? Not a freaking chance. Offered fwiw. Hitch |
|
08-17-2017, 12:07 PM | #11 | |
Addict
Posts: 242
Karma: 37089
Join Date: Oct 2012
Device: none
|
Quote:
Thanks…! Your solution works great in Firefox, Google Chrome… and Calibre's epub viewer. "text-overflow:clip" and "white-space:nowrap" did the trick. I just had to add "margin: auto" and "table-layout:fixed" to the class definition for my table to make it sit dead center on the page AND stop the renderer(s) from expanding the columns to fit in more content. The only thing I was unable to achieve was getting rid of the (very) thin line of maybe 1px.? of extra space between table rows that appears to be added by default. I could see at a glance (on a ~130 ppi computer screen) that something about the line spacing didn't look right as compared with the line spacing of the ensuing text. Adding a "background-color: #f0f0f0" to my table-cell def's confirmed this. In order to fix this minor annoyance (and for a number of other reasons…) I tried getting rid of the table definition and its tr/td's and replacing it all with div's but I didn't get anywhere using that approach either. Obviously the spacing is not the major issue… but all the same I would be curious to learn how one is supposed to address this. May come in handy at some point. Now here's the bad news. The two new/experimental "CSS properties" you pointed me to are not recognized by Kobo's crappy renderer (upgraded their software a few weeks ago… so if not state-of-the-art it should be pretty current…)… And it's not just Kobo… I had the same problem with the FBReader app on Android. So in spite of the excellent help on this forum… I'm pretty much back to where I was… with the added difficulty that it's becoming more & more of a pain finding doc & samples of html 4 and CSS 2 online than it was a few years ago. I could swear I once did something similar (fixed table layout… fixed-width columns… forcing an extra-long line of dots to be truncated so it ends just one space short of the next column… I mean… it's a fairly common presentation that's been used over and over in many contexts for all kinds of purposes…) but that was years ago and try as I may… so far I haven't been able to remember the circumstances. Can you (or anyone following following this thread…) think of a more conservative html/CSS approach that might do what I need (centered fixed-width block and columns with text padded by dots…) AND have a better chance of working on "older" hardware/software…? … keeping in mind that I have my doubts about even the more recent Kobo models and renderer being able to handle correctly new/experimental CSS features… and that for all we know… since there is next to zero demand for this kind of stuff… this may not change for some time to come…? |
|
08-21-2017, 02:37 PM | #12 | |
Resident Curmudgeon
Posts: 73,654
Karma: 127838196
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
The code as written doesn't work with version RMDSK Kobo is using. It mostly works with whatever version ACCESS that Kobo uses for ePub 3. So you might be able to get it to work by tweaking it to be used with ACCESS. Most ePub Readers for Android don't acually work well enough for plain ePub 2 code never mind code like that. The real problem is that you'll find that most versions of RMDSK used in Readers and apps are older versions and even if the code worked with the current version, there are too many Reader/apps where it won't work. As Hitch said, it's not worth the return because it cannot be done reflowable in most cases. |
|
08-21-2017, 02:45 PM | #13 | ||||||
Bookmaker & Cat Slave
Posts: 11,447
Karma: 157030631
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
Quote:
Quote:
Quote:
Quote:
Quote:
Sorry, but...is there NO way you can give up the dot leaders? Aren't they a bit redundant, given you'll be making a linked TOC? Hitch |
||||||
08-21-2017, 03:54 PM | #14 |
Resident Curmudgeon
Posts: 73,654
Karma: 127838196
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
I just had a thought. Even if the code used did actually work in most places, there would be a problem. If someone wanted wide margins, a different font that's wider and a large enough font. You have to take all of those things into consideration with whatever code you use even if it does work.
|
08-21-2017, 10:50 PM | #15 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977556
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
@Chris Jones --- Query --- do you intend for this "template" to be used for *actual recipes*?
You might consider using <dl> definition list ---- use your ingredient name as the <dt> "term" and the quantities as the <dd> "definition" --- definition is offset like a hanging indent. You can experiment a lot with the formatting. I don't think you have to be married to a print-style layout, as long as the information is clearly displayed. Dot leaders are a sink-hole in reflowable epub, as you are discovering. Too many ways for the swamp to suck them down.... EDIT TO ADD : A rough idea--- this is with the "ingredients" centered. You might otherwise go with a fairly wide left margin for those. CSS: Code:
.acentr dl, .acentr .header { text-indent: 0; text-align: center; } .header { font-size: 1.3em; font-weight: bold; } .instr { /* whatever paragraph layout desired */ } dl { /* margin-left: 1em; */ /* margin not wanted if centering text */ } dt { margin-top: .75em; font-weight: bold; } dd { margin-left: 3em; } HTML: Code:
<div class="acentr"> <p class="header">I. Dark and stormy night.</p> <dl> <dt>Dark</dt> <dd>1 tsp.</dd> <dt>Storm</dt> <dd>16 oz.</dd> <dt>Rain</dt> <dd>5 qts.</dd> <dt>Torrents</dt> <dd>3 ea.</dd> </dl> </div> <p>It was a dark and stormy night; the rain fell in (3) torrents except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets…</p> Last edited by GrannyGrump; 08-21-2017 at 11:51 PM. Reason: add code |
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Why does this thread have green dotted posts | BetterRed | Feedback | 6 | 05-12-2015 03:37 PM |
How to adjust table spacing/lines in Calibre conversion? | mischko | Calibre | 5 | 03-02-2012 09:43 AM |
Touch Dark lines between lines of text | taming | Kobo Reader | 12 | 06-13-2011 07:20 PM |
DR800 Removing dotted bookmark icon | HauntedAttic | iRex | 10 | 08-06-2010 10:05 AM |