Mobileread
Table-like block with dotted lines
#1  Chris Jones 08-15-2017, 08:47 PM
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.
Reply 

#2  nabsltd 08-16-2017, 01:58 AM
Quote Chris Jones
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.
Reply 

#3  Turtle91 08-16-2017, 08:12 AM
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>
Capture.PNG 
Reply 

#4  nabsltd 08-16-2017, 11:24 AM
Quote Turtle91
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.
Reply 

#5  JSWolf 08-16-2017, 12:08 PM
Quote nabsltd
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.

show attachment »
Reply 

#6  Turtle91 08-16-2017, 01:32 PM
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....??
Reply 

#7  Turtle91 08-16-2017, 01:43 PM
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>
Capture.PNG 
Reply 

#8  nabsltd 08-17-2017, 01:49 AM
Quote Turtle91
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.
Reply 

#9  JSWolf 08-17-2017, 07:57 AM
Quote Turtle91
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.
Reply 

#10  Hitch 08-17-2017, 11:53 AM
Quote Turtle91
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
Reply 

  Next »  Last »  (1/3)
Today's Posts | Search this Thread | Login | Register