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 08-15-2017, 08:47 PM   #1
Chris Jones
Addict
Chris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five words
 
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.
Chris Jones is offline   Reply With Quote
Old 08-16-2017, 01:58 AM   #2
nabsltd
Evangelist
nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.
 
Posts: 413
Karma: 6913952
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
Quote:
Originally Posted by Chris Jones View Post
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 (?).
I've got many major publisher ebooks that use tables. The real issue is that you can't make many assumptions about the reader width and font size, which means that even a really good layout on a decent sized device with reasonable font size can end up looking bad.

Quote:
So far I have played with the new display: table… display: table-row… display: table-cell… CSS properties.
This really isn't any different from using tables, since every renderer uses a default stylesheet like:
Code:
table { display: table; }
tr { display: table-row; }
td { display: table-cell; }
What I'd suggest would be to just fudge the whole table centering a bit so that you simulate the "indent" you want. Something like:
Code:
.mytable {
margin-left: 15%;
margin-right: 10%;
}
Then, you end up with a table with two columns, and you can set the width of each column to something reasonable (like 70% and 30%). After that, if you have an easy way to fill with periods (I really don't know of a way using just HTML and CSS 3), everything will be as good as it can ever be.
nabsltd is offline   Reply With Quote
Old 08-16-2017, 08:12 AM   #3
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
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>
Attached Thumbnails
Click image for larger version

Name:	Capture.PNG
Views:	193
Size:	21.5 KB
ID:	158485  
Turtle91 is offline   Reply With Quote
Old 08-16-2017, 11:24 AM   #4
nabsltd
Evangelist
nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.
 
Posts: 413
Karma: 6913952
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
Quote:
Originally Posted by Turtle91 View Post
You can just use overflow and/or text-overflow with a very long set of periods
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.
nabsltd is offline   Reply With Quote
Old 08-16-2017, 12:08 PM   #5
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
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:
Originally Posted by nabsltd View Post
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.
I just tested this with ADE 2.0.1 and it doesn't work properly.

Click image for larger version

Name:	Untitled.jpg
Views:	196
Size:	59.3 KB
ID:	158494

Last edited by JSWolf; 08-16-2017 at 12:15 PM.
JSWolf is online now   Reply With Quote
Old 08-16-2017, 01:32 PM   #6
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
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....??
Turtle91 is offline   Reply With Quote
Old 08-16-2017, 01:43 PM   #7
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
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>
Attached Thumbnails
Click image for larger version

Name:	Capture.PNG
Views:	221
Size:	15.4 KB
ID:	158495  
Turtle91 is offline   Reply With Quote
Old 08-17-2017, 01:49 AM   #8
nabsltd
Evangelist
nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.nabsltd ought to be getting tired of karma fortunes by now.
 
Posts: 413
Karma: 6913952
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
Quote:
Originally Posted by Turtle91 View Post
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.
Nope, CSS spec allows any syntax error in a rule to invalidate the entire rule. An unrecognized property could certainly be considered a syntax error, although most renderers just ignore it.

Quote:
A non-css3 renderer should likewise skip over the css3 ...
A property with additional values in CSS3 than in CSS2 can also be considered a syntax error if a CSS2 renderer sees one of those new values, and this happens in quite a few renderers.

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.
nabsltd is offline   Reply With Quote
Old 08-17-2017, 07:57 AM   #9
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
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:
Originally Posted by Turtle91 View Post
Well....if you care about old - out of date - renderers....
You'll have to use old - out of date - techniques....
The problem is that most apps and most Readers that use RMDSK are not the latest version and are out-of-date. If your target audience is the general population, then you have no choice but to change how it's formatted if it won't work in most cases.

It does work on my H2O. It does not work as ePub, but it does work as kepub.
JSWolf is online now   Reply With Quote
Old 08-17-2017, 11:53 AM   #10
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
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:
Originally Posted by Turtle91 View Post
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....??
Dion, c'mon:

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
Hitch is offline   Reply With Quote
Old 08-17-2017, 12:07 PM   #11
Chris Jones
Addict
Chris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five wordsChris Jones can name that ebook in five words
 
Posts: 242
Karma: 37089
Join Date: Oct 2012
Device: none
Quote:
Originally Posted by Turtle91 View Post
You can just use overflow and/or text-overflow with a very long set of periods to cover any eventuality such as:

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…?
Chris Jones is offline   Reply With Quote
Old 08-21-2017, 02:37 PM   #12
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
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:
Originally Posted by Chris Jones View Post
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.
Kobo's renderer is not crappy. It's just not the latest version. FBReader is crappy.

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.
JSWolf is online now   Reply With Quote
Old 08-21-2017, 02:45 PM   #13
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
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:
Originally Posted by Chris Jones View Post
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.
With all due respect, unless you are solely going to sell your ebook on Azardi and Readium, testing in browsers is utterly worthless. I should add, if you mean, built-in ePUB readers, then of course, that helps SOMEWHAT, but still....browser rendering has bupkus to do with what ebook renderers will or won't do. What we can all do with, say, FFePUBReader isn't the same thing as what we can do in Nook, etc.

Quote:
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.
Well, you're assuming that it is addressable. Don't make that assumption, it's far safer.

Quote:
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.
Do you know if it's recognized on any of the other desktop readers, either? ADE 2.xx or 4.x?

Quote:
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.
I take it you don't think you have the original ePUB, in which you did this?

Quote:
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…?
No. I can't, anyway. Someone else might.

Quote:
… 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…?
Using any experimental features is a total crapshoot. There is precisely zero reason to think that they'd work on any existing device. More than half the existing are still back in ADE 2.x era rendering.

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
Hitch is offline   Reply With Quote
Old 08-21-2017, 03:54 PM   #14
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
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.
JSWolf is online now   Reply With Quote
Old 08-21-2017, 10:50 PM   #15
GrannyGrump
Obsessively Dedicated...
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
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>
Attached Thumbnails
Click image for larger version

Name:	RECIPE.png
Views:	178
Size:	16.9 KB
ID:	158611  

Last edited by GrannyGrump; 08-21-2017 at 11:51 PM. Reason: add code
GrannyGrump is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 03:01 PM.


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