Weird tables in epub

[Psymon]

Yes, it's me, I'm back again with another problem.

I'm still working here on Thoreau's "Walden" (and various other Thoreau-related works) and especially in that particular book he has quite a few different tables. I've included here one of the weirder ones that I had to -- or tried to -- duplicate, and if I could get this one table figured out then I'm sure I'll manage with all the other ones.

I'm sure the three attachments here should illustrate what I'm trying to accomplish, and the problem(s) I'm having.

walden-table-original.jpg is the page from the 1906 edition (i.e. the original print edition, of course) of "Walden" showing the table that I'm trying to duplicate.

walden-table.epub is basically what I came up with for my ebook, with the following two attachments being screenshots of that...

walden-table-ipad.png is a screenshot of this latter epub as it display on the iPad -- basically what I'd expected and hoped for, although apart from other issues (which you'll see with the ADE screenshot, below), I do wish that I could conjure up a way to do up a long (tall), "stretchy" curly bracket (brace), one that would increase/decrease in length (i.e. height) without getting fatter in the process. Any ideas on that one, while I'm here?

walden-table-ade.png is a screenshot of the same in ADE, which shows the problems I'm having. Obviously, this is far more important for me to get right than it is to do so on the iPad -- although I do find it odd that things displayed as I'd hoped, as I'd coded it, on the latter, but things just go haywire in ADE.

I guess the issues I see with this are...

- How come the widths of my table columns are being ignored in ADE? They should be coming out more nicely spaced (as I'd specified in my code) as they do on the iPad, but it seems like ADE just completely ignores what I set them as.

- How come there's no hyphenation of the word "experiments" in the bottom-right hand column in that table?

- Although you don't see it in this ADE screenshot (in the two-page layout), in a one-page, wider layout the table defaults to aligning itself on the left of the page. Although this is a "bigger" table, I do have a whole bunch of other smaller table to deal with, too, and it would be nice if I could get them all to center (horizontally) in the page -- I just can't seem to figure out how to do so, though! It almost makes me long for ye olden days, when we had the simple <center></center> tag, because text-align:center doesn't cut it.

Right now, I just have no idea what to do about these various tables -- and there's lots of them, and in another book of Thoreau's ("The Maine Woods") I just realized that I'm going to have a TON of them (in the appendix), too.

Thanks in advance, as always, for any and all help!

[RbnJrg]

Originally Posted by Psymon

Yes, it's me, I'm back again with another problem.
...
I guess the issues I see with this are...

- How come the widths of my table columns are being ignored in ADE? They should be coming out more nicely spaced (as I'd specified in my code) as they do on the iPad, but it seems like ADE just completely ignores what I set them as.

Yes, code that works in iPad may not work in ADE. So, you have to use code that works in both ereaders. Regarding this issue, don't use

    <colgroup>
      <col span="1" style="width: 35%;" />
      <col span="1" style="width: 5%;" />
      <col span="1" style="width: 5%;" />
      <col span="1" style="width: 5%;" />
      <col span="1" style="width: 25%;" />
      <col span="1" style="width: 2%;" />
      <col span="1" style="width: 23%;" />
    </colgroup>

to indicate the columns' width. Below I attach an epub with changes I made; see the used code to watch how I managed the columns' width, but basically, I created five new styles:

.width_1 {
    width: 35%;
}

.width_2 {
    width: 5%;
}

.width_3 {
    width: 25%;
}

.width_4 {
    width: 2%;
}

.width_5 {
    width: 23%;
}

and I used them by adding them in the respective <td> tag; for example:

Before:

<td align="left" class="tdtext" valign="middle">Rice,</td>

After:

<td align="left" class="tdtext width_1" valign="middle">Rice,</td>

- How come there's no hyphenation of the word "experiments" in the bottom-right hand column in that table?

Your problem here is due to the column width. Once you had solve this issue, the word "experiments" will be fine.

- Although you don't see it in this ADE screenshot (in the two-page layout), in a one-page, wider layout the table defaults to aligning itself on the left of the page. Although this is a "bigger" table, I do have a whole bunch of other smaller table to deal with, too, and it would be nice if I could get them all to center (horizontally) in the page -- I just can't seem to figure out how to do so, though! It almost makes me long for ye olden days, when we had the simple <center></center> tag, because text-align:center doesn't cut it.

You have to set a width for the whole table, and then a margin-left to get what you want. For example your table will be centered if you give the table a width of 95% and a margin-left of 2.5%. But do that by enclosing the table in a div tag with the desired width. In this case I used a width of 80% (of the screen) and a left/rigth margins of 10% (because 80% + 10% + 10% = 100%). But you, use the values you like.

Below you can watch screenshots of my ADE 3.0 (with one and two columns layout):



I hope all this can help you

Regards
Rubén

[Psymon]

Oh, thank you (once again!), Rubén! Indeed, that does seem to work out just fine! I was worried that I was going to have to do something really major (like not use tables at all -- eek!), but that should be fairly easy to change.

So I gather what you're saying is to use styles to set the column width, rather than that <colgroup> method? It's funny, but I'd never even heard of that <colgroup> tag until I did this, and I forget where I saw it, but I think I read somewhere that that was the way to do it for ebooks -- but obviously it doesn't quite work.

As for centering the table, what you did for this particular table worked out just fine, but I have so many other tables, each all a little "weird" in their own way, and there are some that I wish I could just have centered on the page if the viewing area is wide (for example, single-page landscape), but if necessary could be 100% the width of the screen if it's not-so-wide.

Or, to put it another way, I just wish there was a simple, stupid <center> tag, like there used to be!

Is there no way to have an item -- like a table -- and just have it "center" on the page, but without having to do it by setting a specific margin size? Like, just center the stupid thing, and if it needs to be 100% wide, then it just is, and if it doesn't then it just adjusts itself?

I find it so crazy that "centering" something is one of the most common and useful things that one can do in design, and yet they tossed that out the window as CSS got more "advanced" (supposedly). I really find that incomprehensible...

...but anyway, I digress.

[RbnJrg]

Originally Posted by Psymon

Oh, thank you (once again!), Rubén! Indeed, that does seem to work out just fine! I was worried that I was going to have to do something really major (like not use tables at all -- eek!), but that should be fairly easy to change.

You are welcome!

So I gather what you're saying is to use styles to set the column width, rather than that <colgroup> method? It's funny, but I'd never even heard of that <colgroup> tag until I did this, and I forget where I saw it, but I think I read somewhere that that was the way to do it for ebooks -- but obviously it doesn't quite work.

To use the <colgroup> tag to set the columns width of a table is valid method, except in ADE And since you were looking for a way that not only worked in iPad but also in ADE, we need to prescind from <colgroup> and to use styles.

As for centering the table, what you did for this particular table worked out just fine, but I have so many other tables, each all a little "weird" in their own way, and there are some that I wish I could just have centered on the page if the viewing area is wide (for example, single-page landscape), but if necessary could be 100% the width of the screen if it's not-so-wide.

Or, to put it another way, I just wish there was a simple, stupid <center> tag, like there used to be!

Is there no way to have an item -- like a table -- and just have it "center" on the page, but without having to do it by setting a specific margin size? Like, just center the stupid thing, and if it needs to be 100% wide, then it just is, and if it doesn't then it just adjusts itself?

No I could think some code that would work in iPad in order to get what you want. But the problem here is that you want something that ALSO works in ADE. And regrettably, ADE is quite limited As I see the things, set the tables width to 100% (or 95% with a left margin of 2.5% in order to get some indent) and forget to center them. With the columns width issue fixed, your tables will look fine

Regards

[Psymon]

Originally Posted by RbnJrg

I could think some code that would work in iPad in order to get what you want. But the problem here is that you want something that ALSO works in ADE. And regrettably, ADE is quite limited As I see the things, set the tables width to 100% (or 95% with a left margin of 2.5% in order to get some indent) and forget to center them. With the columns width issue fixed, your tables will look fine

Thanks, I'm soooooo glad for you (and everyone else here), I don't know what I'd do without you (all of you)! For this book, I think what I'll do is just "indent" them the same amount that I've indented all the various poems and "blockquotes" in my text, and at least achieve some offset from the left margin that way, as well as some consistency with how I've been typesetting everything else. That should work out okay, I'm sure.

Gawd, I have sooooooo many tables to fix up and re-do now, though! At least as far as inserting specific code into each <td> tag -- having done it the <colgroup> way at first, I won't be able to just do a simple search & replace. :/

Oh well -- worth the effort, though, and I'm glad I realized this before I continued on with the next pile of tables that I still have to do now.

Thanks again, Rubén!

[Psymon]

Houston, we have a problem!

I thought I'd stay up all night and try to get all my tables re-done, and as soon as I started on the first one in the book I ran into a problem. Here's a screenshot of how it ended up looking in ADE. As I mentioned in my last reply, I thought I'd give it (the table, and all tables) a left margin of 3.2em -- which is the same that I have my poems and "blockquotes" set at -- but giving the table that margin seems to move the whole table into the right-hand margin by that much (if I delete that margin-left:3.2em then everything looks okay).

I tried different things -- using padding instead of margin (then the table goes flush-left, no indentation at all), and giving the table a right margin of 3.2em, too (no effect all), and I have no idea what to do.

Any ideas? If you need more info, feel free to ask away -- here's a screenshot of how it's turning out, though. You can see the problem toward the bottom of the table, where there's the line in the right-hand column that says "I carried a good part on my back."

[Jellby]

Does your table have a 100% width (on its own, or all columns summed up)? Then it's not surprising that it happens.

You could try wrapping a <div> around the table, putting the 3.2em margin in the <div>, and leaving the table without margins, with 100% width. Otherwise just reduce the table's width and write the margin as a % too.

[Psymon]

Originally Posted by Jellby

Does your table have a 100% width (on its own, or all columns summed up)? Then it's not surprising that it happens.

You could try wrapping a <div> around the table, putting the 3.2em margin in the <div>, and leaving the table without margins, with 100% width. Otherwise just reduce the table's width and write the margin as a % too.

To answer out of order a bit... no, I hadn't specified any width for the table at all, although indeed the percentages for all the columns did add up to 100%. I would have thought (and expected), though, that the "100%" would take into account whatever the margins were -- apparently not.

And as for changing the margin from ems to %, then I'd lose out on keeping things consistent with my poem and blockquote paragraphs.

However! On a happy note, your solution to wrap the whole table in a div and give that a 3.2em margin seems to have done the trick! At least, in ADE it's worked out fine -- I haven't tried it on the iPad yet, but I'm assuming that it'll come out okay in that.

Thanks so much -- you saved the day once again, Jellby!

[RbnJrg]

Originally Posted by Psymon

Houston, we have a problem!

I thought I'd stay up all night and try to get all my tables re-done, and as soon as I started on the first one in the book I ran into a problem. Here's a screenshot of how it ended up looking in ADE. As I mentioned in my last reply, I thought I'd give it (the table, and all tables) a left margin of 3.2em -- which is the same that I have my poems and "blockquotes" set at -- but giving the table that margin seems to move the whole table into the right-hand margin by that much (if I delete that margin-left:3.2em then everything looks okay).

I tried different things -- using padding instead of margin (then the table goes flush-left, no indentation at all), and giving the table a right margin of 3.2em, too (no effect all), and I have no idea what to do.

Any ideas? If you need more info, feel free to ask away -- here's a screenshot of how it's turning out, though. You can see the problem toward the bottom of the table, where there's the line in the right-hand column that says "I carried a good part on my back."

Hi Psymon:

It seems that you didn't read this part of my original post:

You have to set a width for the whole table, and then a margin-left to get what you want. For example your table will be centered if you give the table a width of 95% and a margin-left of 2.5%. But do that by enclosing the table in a div tag with the desired width. In this case I used a width of 80% (of the screen) and a left/rigth margins of 10% (because 80% + 10% + 10% = 100%). But you, use the values you like.

And don't use "em" as margin-left (because that margin will vary when users change font size). Instead of "em" USE "%". Try different percentages to know what is -more or less- equal to 3.2em. Of course, after that you have to change the width of the tables according to that margin (remember table width is equal to 100% - left margin % * 2). Once you have the table width, you can set that width for all tables by adding to your .css stylesheet the following:

.table_width { /* this class is for the <div> tag that will enclose any of your tables */
    width: X%; /* Here instead of X you'll write your desired width */
}

table {
    width: 100%;
}

Then in your .xhtml file you should use something like:

<div class="table_width">
     <table>
       ....
       ....
     </table>
</div>

Regards
Rubén

[Psymon]

Originally Posted by RbnJrg

It seems that you didn't read this part of my original post:

Oops -- I probably read it, but then promptly forgot about it.

And don't use "em" as margin-left (because that margin will vary when users change font size). Instead of "em" USE "%".

But what would be wrong with that? By using em, my tables are indented the same as my poems and blockquotes, so everything looks nice and consistent -- and if people changed the font size, then everything changes the same.

On the other hand, if I used % to indent the tables, even if I get it looking "similar" to how I've indented those other bits of text in, say, landscape mode, then that will change when I go in portrait mode (or by changing between one-page or two-page landscape) and then things won't be consistent. At least with em, everything looks nice and consistent.

Wouldn't that make more sense?

[Psymon]

Interesting... I just noticed that tables don't break across pages in ADE, like they do in iBooks -- although I suppose they would if they "had" to, if it was an especially long table or something (note: I just tried it, made a reeeeeeeeeeeeally long table, and indeed it does break across pages no problem).

I thought maybe it might be because of the addition of that <div> wrapping around the table -- hey, what the heck do I know? -- but in trying that out (getting rid of the div) that's not the case.

This might be a stupid question, but is there perchance some "secret code" (secret to me, anyway) that allows the table to break across pages? As it is, I've got several tables that are relatively big -- like, maybe half a page in size or something -- and I can see that there will be times where you'd end up with the regular text paragraphs coming just before that table having a big blank space at the bottom, and then the table on the next page, just to keep that table "all together." I'd rather that the table broke across pages, and didn't inadvertently insert all that white space (which I think would potentially be more confusing to readers -- leaving them thinking that there was an intentional "section break" within the chapter -- than having the table split across pages).

[RbnJrg]

Originally Posted by Psymon

But what would be wrong with that? By using em, my tables are indented the same as my poems and blockquotes, so everything looks nice and consistent -- and if people changed the font size, then everything changes the same.

On the other hand, if I used % to indent the tables, even if I get it looking "similar" to how I've indented those other bits of text in, say, landscape mode, then that will change when I go in portrait mode (or by changing between one-page or two-page landscape) and then things won't be consistent. At least with em, everything looks nice and consistent.

The problem by using "em" is that -since your tables will have a fixed width- when the left margin increases (because the user changed the font size) then the right side of your tables will exceed your right margin. In other words, you'll reproduce the problem you posted here:

https://www.mobileread.com/forums/sho...48&postcount=6

Think about it

Regarding your new issue with long tables under ADE, could you post an epub with one of those tables?

Regards
Rubén

[Psymon]

Originally Posted by RbnJrg

The problem by using "em" is that -since your tables will have a fixed width- when the left margin increases (because the user changed the font size) then the right side of your tables will exceed your right margin.

Except that they don't have a fixed width, I haven't even specified any width at all for the table itself, it just left-aligns to the page, with a 3.2em left margin, and then fills up the right side as much as it needs to. My columns do all add up to "100%", though, but in that regard I don't know how a user changing the font size would make things "overflow" into the right margin, because if it did then naturally that would be happening already -- and it's not. Indeed, just to confirm, I just tried doing what you said, increasing the font size (even to the largest size), both in iBooks and in ADE, and there's no problems at all.

[RbnJrg]

Originally Posted by Psymon

Except that they don't have a fixed width, I haven't even specified any width at all for the table itself, it just left-aligns to the page, with a 3.2em left margin, and then fills up the right side as much as it needs to. My columns do all add up to "100%", though, but in that regard I don't know how a user changing the font size would make things "overflow" into the right margin, because if it did then naturally that would be happening already -- and it's not. Indeed, just to confirm, I just tried doing what you said, increasing the font size (even to the largest size), both in iBooks and in ADE, and there's no problems at all.

Ok If you don't set a width for your tables, a left margin in "em" can work. But also take in count that in some tables, those ones with many columns, with font sizes big and bigger, the columns of those tables will be thin and thinner and could happen that words appear with "hyphenation" (like the word "experiments" in your first post).

[Psymon]

Originally Posted by RbnJrg

Ok If you don't set a width for your tables, a left margin in "em" can work. But also take in count that in some tables, those ones with many columns, with font sizes big and bigger, the columns of those tables will be thin and thinner and could happen that words appear with "hyphenation" (like the word "experiments" in your first post).

Yeah, I understand that, but I guess there really isn't all that much alternative, is there? I mean, even if I didn't have that 3.2em margin at all, if it was just flush ("0") with no margins on either side, naturally the same sort of thing could happen if the user is going to increase the font size THAT big.

And I am actually quite happy with how this has all turned out. I do have to go over and re-do all my tables (to some extent), one-by-one, but in the process I've discovered some other ways that I can simplify everything, too, and so overall those tables will be much nicer (both in how they display, as well as "behind-the-scenes" for me to work with in coding them).

Thanks again, Rubén -- and I do appreciate your concerns, too!