MobileRead Forums - View Single Post - Table-like block with dotted lines

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.

08-15-2017, 08:47 PM	#1
Chris Jones 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.