epub table/column widths

[weberr]

Yes, thank you for the tutorial article. It is excellent, but of limited value as they only use examples using short text strings/values which works fine for short string data -- but falls apart when using long-strings. I need a way for the columns to adjust to fixed equal widths and for the text to wrap-around within that fixed width, no matter how long that may make that particular. Also, vertical-align:top, the other columns also stay fixed.

I know this has been addressed in many forums, including this one, but none of the tutorials or examples address all aspects.

I am in the epub environment. I want a table that will adjust dependent on the ebook reader/user's choice re font size or table width. But the kicker is that the first column will hold fixed length, short reference numbers, while the remaining columns will contain long text strings (paragraphs) but adjust to equal widths -- such as column 1 set at 10% and the remaining columns setting themselves to equal widths dependent on how many columns, but all add up to 100%.

Everything I have seen address the objective with a relatively non-complex code, but all assume - and the solution only works if the data going into the remaining columns is no more than the algorithm-determined width. But all fall apart if the data going into those columns is longer than the column width whereas I want an unknown amount of text (paragraphs) going into those columns. Every approach I have tried -- table-layout or not, percentages or pixels, css or html or both -- fails.

Hope someone has figured out how to this -- have a solution that works with long, wrap-around text?

[DaleDe]

Have you tried SVG? It can do text as well as pictures and you can draw lines with it for boundaries.

Dale

[Hitch]

Originally Posted by weberr

Yes, thank you for the tutorial article. It is excellent, but of limited value as they only use examples using short text strings/values which works fine for short string data -- but falls apart when using long-strings. I need a way for the columns to adjust to fixed equal widths and for the text to wrap-around within that fixed width, no matter how long that may make that particular. Also, vertical-align:top, the other columns also stay fixed.

I know this has been addressed in many forums, including this one, but none of the tutorials or examples address all aspects.

I am in the epub environment. I want a table that will adjust dependent on the ebook reader/user's choice re font size or table width. But the kicker is that the first column will hold fixed length, short reference numbers, while the remaining columns will contain long text strings (paragraphs) but adjust to equal widths -- such as column 1 set at 10% and the remaining columns setting themselves to equal widths dependent on how many columns, but all add up to 100%.

Everything I have seen address the objective with a relatively non-complex code, but all assume - and the solution only works if the data going into the remaining columns is no more than the algorithm-determined width. But all fall apart if the data going into those columns is longer than the column width whereas I want an unknown amount of text (paragraphs) going into those columns. Every approach I have tried -- table-layout or not, percentages or pixels, css or html or both -- fails.

Hope someone has figured out how to this -- have a solution that works with long, wrap-around text?

It's just one of those, "you can't have it all ways" scenarios. You can have a column with set widths--as Ruben explained. A Table that's, say, 80% of the screensize, and then columns set within that are X percent of the now-100% width of the column. These certainly do facilitate word-wrapping (albeit, you may have to ensure that hyphenation is set to "on" to get clean breaking). Assuming I understand what you're saying properly, I'm not sure I am following what you think the issue actually is, in the final analysis. And the tables will adjust, somewhat (within the limits, bear this in mind) of the font-size changes.

Perhaps you could post some exemplars here, along with a) samples of the code; b) screenshots of your results, and c) screenshots or roughs of what it is you wish to achieve with the resulting final table, both before and after a font-size-change. Maybe I'm going bonkers, but I'm pretty sure that we make tables with adjustable size columns with wrapping text pretty darned often. So: can you help us out with more details, as requested? To be sure we're all on the same page?

Hitch

[weberr]

Thank you all for your ideas, suggestions, tips. This turned out to be an extensive exercise with hours of trial-and-error.

But, I have finally created a skeleton CSS/HTML that works for me -- works regardless of eReader/User's choice of font/page width, and editor's choice of number of columns and choice of column width -- and lets me use a caption or not, assign number of columns and assign column widths directly from the html text without any changes to the css.

Just two remaining "needs". I have not found a way to have different text alignments for any column (i.e., left or center for column 1 and justify for column 2) and I have not been able to implement auto hyphenation for text columns.

<table class="table1" width="80%">
<caption></caption>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
</table>


.table1 {
margin:auto;
border:1px solid black;
font-size:12px;
border-collapse:collapse;
}
.table1 caption {
font-size:140%;
font-weight:bold;
font-style:Italic;
}
.table1 th {
border:1px solid #000;
background-color:grey;
color:white;
font-weight:bold;
border:1px solid black;
padding:10px;
}
.table1 td {
vertical-align:top;
text-align:justify;
border:1px solid black;
padding:10px;
}

[Hitch]

Originally Posted by weberr

Thank you all for your ideas, suggestions, tips. This turned out to be an extensive exercise with hours of trial-and-error.

But, I have finally created a skeleton CSS/HTML that works for me -- works regardless of eReader/User's choice of font/page width, and editor's choice of number of columns and choice of column width -- and lets me use a caption or not, assign number of columns and assign column widths directly from the html text without any changes to the css.

Just two remaining "needs". I have not found a way to have different text alignments for any column (i.e., left or center for column 1 and justify for column 2) and I have not been able to implement auto hyphenation for text columns.

Spoiler:

<table class="table1" width="80%">
<caption></caption>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
</table>


.table1 {
margin:auto;
border:1px solid black;
font-size:12px;
border-collapse:collapse;
}
.table1 caption {
font-size:140%;
font-weight:bold;
font-style:Italic;
}
.table1 th {
border:1px solid #000;
background-color:grey;
color:white;
font-weight:bold;
border:1px solid black;
padding:10px;
}
.table1 td {
vertical-align:top;
text-align:justify;
border:1px solid black;
padding:10px;
}

Doesn't the 12px font sort of demolish the entire, "user-chooses-the-font-size" element? I mean, I know it would for Nook...? Maybe I'm just looking at this too quickly, or misremembering the original post, but wasn't the point that you wanted to be able to change devices, fontsizes, etc., and have everything magically resize?

Also, n.b.: any table with more than 4 columns starts to be seriously problematic in ANY reader; but that's not directly related to your issue. I thought I'd mention it to you, however.

Hitch

[odedta]

Originally Posted by weberr

I have not found a way to have different text alignments for any column (i.e., left or center for column 1 and justify for column 2) and I have not been able to implement auto hyphenation for text columns.

That just sounds weird... of course you can?

[weberr]

Well, I don't know what to say. I guess from what you say, I might be in trouble if I use some other viewer. But for now, its only for me and I only have the calibre viewer and my Kindle Fire and all is well -- the font adjusts proportionally to the user's changes as do the table themselves; in fact, I have one table that is 10 columns and the font can get so small it is not readable, but I can put the Kindle on its side and the table and font will change to the larger width. I don't pretend to understand what's going on or why this particular coding works for me -- it was created by trying virtually every combination of rules I could think of until I hit upon one that did what I want. Its very frustrating to see so many rules producing different results when used in the presence of some other seemingly unrelated rule.

Now I am going through the same try-fix-try process to find a set of rules for having different text alignment for each column and hyphenation. I study all examples I can find and follow the instructions carefully but have not found a set of rules that reliably produce the desired results.

[odedta]

Yeah, I can understand, Hitch is the boss when it comes to ranting about those things
In any case, I don't see why a simple CSS rule for alignment wouldn't work on a table cell or a table row if you use the class properly.

[Toxaris]

If you use a fixed font size, like 12px, you will not be able to use another font size on (most?) readers.

[GrannyGrump]

@Weberr -- I don't know if this is what you are looking for for text alignment, but this works for me. I set the alignment in the individual cells. (I have never worried about hyphenation and let the app/device worry about it instead.) I don't set a fixed font size, and only use relative font-sizing, ie, 80% or .8em.

Of course, I only work with fiction, so my needs are very simple. This is what I used recently, with an embedded monospace font (it is a bit more attractive than the default reader font).

Sample css code

Spoiler:

.ttable {
display: table;
width: 90%;
margin-left: 5%;
margin-right: 5%;
border:0;
border-collapse: separate;
border-spacing: 2px;
text-indent: 0;
}
.ttbody {
display: table-row-group;
vertical-align: bottom;
}
.trows {
display: table-row;
vertical-align: inherit;
}
.tcelLeft, .tcelMid, 
.tcelRite, .tcelTop  {
display: table-cell;
padding: .35em 1px 1px 1px;
vertical-align: bottom;
text-align: left;
}
.tcelLeft { text-align: left; }
.tcelMid  { text-align: center;}
.tcelRite { text-align: right;}
.tcelTop  { vertical-align: top;}

.tcelSign {
display: table-cell;
padding: .35em 2px 2px 2px;
text-align: center;
vertical-align: top;
border: solid 1pt;
border-color: black;
}
.tcelSpacer {
display: table-cell;
padding: 0 1px;
text-align: center;
vertical-align: middle;
font-size: 60%;
}
.mono { 
font-family: "Linux Libertine Mono", serif;
font-size: 90%;
}

sample HTML

Spoiler:

<div class="mono">
<p class="acentr"><em>The United States of America<br />
 in account with<br />
 the Hon. Clerk of the Senate Committee on Conchology,&nbsp; Dr.</em></p>

<table class="ttable">
<tbody class="ttbody">
<tr class="trows">
<td class="tcelLeft">
<div class="hang">
To consultation with Secretary of War,
</div>
</td>
<td class="tcelMid">&nbsp;</td>
<td class="tcelRite">$50</td>
</tr>

<tr class="trows">
<td class="tcelLeft">
<div class="hang">
To consultation with Secretary of Navy,
</div>
</td>
<td class="tcelMid">&nbsp;</td>
<td class="tcelRite">$50</td>
</tr>

<tr class="trows">
<td class="tcelLeft">
<div class="hang">
To consultation with Secretary of the Treasury,
</div>
</td>
<td class="tcelMid">&nbsp;</td>
<td class="tcelRite">$50</td>
</tr>

<tr class="trows">
<td class="tcelLeft">
<div class="hang">
Cabinet consultation,
</div>
</td>
<td class="tcelMid">&nbsp;</td>
<td class="tcelRite">No charge</td>
</tr>

<tr class="trows">
<td class="tcelLeft">
<div class="hang">
To mileage to and from Jerusalem, via Egypt, Algiers, Gibraltar, and Cadiz, 14,000 miles, at 20c. a mile,
</div>
</td>
<td class="tcelMid">&nbsp;</td>
<td class="tcelRite">$2800</td>
</tr>

<tr class="trows">
<td class="tcelLeft">
<div class="hang">
To salary as Clerk of Senate Committee on Conchology, six days, at $6 per day,
</div>
</td>
<td class="tcelMid">&nbsp;</td>
<td class="tcelRite">$36</td>
</tr>

<tr class="trows">
<td class="tcelSpacer">&nbsp;</td>
<td class="tcelSpacer">&nbsp;</td>
<td class="tcelSpacer" style="border-bottom:1pt solid">&nbsp;</td>
</tr>

<tr class="trows">
<td class="tcelRite">Total,&nbsp;&nbsp;</td>
<td class="tcelMid">&nbsp;</td>
<td class="tcelRite">$2986</td>
</tr>
</tbody>
</table>
</div>

This is a very simple three-column table with no borders. The middle column is just to provide more spacing between the text and the numbers.

[mrmikel]

The way to get the alignments as you like is to tediously provide the alignment for every single cell, as is shown by GrannyGrump. You'd think it would be easier but after get set up to do it, it isn't so bad and it is gratifying to see it finally work after trying everything else.

[JSWolf]

Originally Posted by Toxaris

Yes, she is and so am I. There is absolutely no reason to switch over besides personal preference. I am still working with Sigil and it works more than fine. There is no feature currently in Calibre that I miss in Sigil. Just that Sigil is not maintained anymore does not make it stop working.
What I really don't like is that you can create an invalid (according to the specs) ePUB in the Calibre Editor and that the check-book function will not complain about it. The explanation from Kovid that if a non-compliance does not create an issue in the devices (as far as he knows), he is fine with it, does not cut it. If you want to publish an ePUB, most services require full compliance.

The biggest issue I have with Sigil is FlightCrew. That doesn't work all that well. It misses things it should not. When validating ePub, use epubcheck 3.0.1 as that catches more errors. EPUB-Checker is what I use as it is a GUI wrapped around epubcheck 3.0.1 and makes it a lot easier to see the errors. You still need to have Java installed.

[JSWolf]

But don't forget, if you are not using a fixed size for the font in the table, don't forget to increase the font size to see when things will break and they probably will break with a large enough font.

[mrmikel]

The calibre viewer is a terrible test for existing devices. It shows working things that will fail in many devices. It is not designed to be any sort of test, but a convenience for looking through material you have stored in your library.

[Hitch]

Originally Posted by mrmikel

The calibre viewer is a terrible test for existing devices. It shows working things that will fail in many devices. It is not designed to be any sort of test, but a convenience for looking through material you have stored in your library.

MM:

Did he say he was using Calibre somewhere? I missed that?

Hitch