Odd line breaks in tables

[DTM]

The best way I've found to format endnotes is to use a table. That's worked well previously, but in my latest effort, I've got a problem. Notes that are more than one line work just fine. But for some of the notes that are less than a full line, I'm seeing the last word wrap to the next line, even though it shouldn't. Thus, I get something like:

[12] Louis David, a famous French
Painter

[18] Lake
Maggiore.

There are two qualifiers to that: (1) It doesn't happen on every "short" note, and (2) I see it only on my Nook classic (firmware version 1.7.0). I don't see a problem reading it in Sigil, Calibre or Firefox.

I've attached a copy of the offending book, trimmed down to two chapters and the endnotes. Of the "short" notes, 2, 3, 4, 6, 8 and 9 display correctly, but 12, 14, 17, 18, 20, 21, 26 and 30 don't. Notice that the ones that work are all grouped at the beginning, followed by those that fail.

I'd be inclined to write it off as a bug in the Nook, but the fact that only some fail, and the odd groupings makes me think that maybe there's something in the code that I'm overlooking.

Any ideas?

(Moderators: the text is from a Gutenberg edition, so this translation is in the public domain. There should be no copyright issues with posting it here.)

[DaleDe]

It is definitely an ADE problem. It shows up in the PC version so it is not unique to Nook. In CSS I set the borderless to width: 100% which fixed your problem but introduced another problem of short lines trying to center themselves.

New information: The short lines are not centering themselves but the width of the reference being set to 1.5em is a problem. I am experimenting with different settings. Setting the border to dotted, or solid helps show what is going on.

[DaleDe]

Final solution: The only change necessary to fix this is to remove the width parameter from the reference statement in the CSS.

Dale

[DTM]

Thanks Dale!

You have no idea how well that worked out. I posted the problem, went out and mowed the lawn, came back, problem solved!

And you get a double thumbs-up because you actually solved another problem I had not mentioned. I'll list it here in case anyone else runs into it. (And to make it easier to find, let's call it "tables don't break across pages".)

I'm sure you noticed that I had each note as a separate table. I originally had them simply as rows in a single table, but found that the Nook wouldn't break it across pages, so I could read only the first 8 or 9 notes; the rest ran off the page. I thought that was just a table rendering bug, and so made separate tables. That way, each was short enough that page breaks were not needed. But then, I noticed in another book, that a table (not endnotes) did break across pages. So it wasn't all tables, just some of them. Now, the one that worked did not have a td width specification. When I removed the width spec from my endnotes per your suggestion, I also converted it all to a single table and now it breaks across pages.

Never in a million years would I have guessed that the width spec on one column would disrupt text flow in a different column and keep the table from breaking across pages!

Thanks again!

[DaleDe]

You are welcome. The width might have worked had you made it wide enough to actually contain the data. 1.5em is not wide enough to hold 4 characters. ADE is very fussy and will not behave well in the case of errors. I am glad it worked for you.

Dale

[DTM]

Yes! The one thing still bothering me was why only some failed and others worked. Notice that those that worked were all single-digit references. Brackets are pretty narrow, so 1.5 em might be enough for one digit and a pair of brackets. But not two digits.

[Jellby]

... but why do you use a table to format endnotes? I guess it's only the hanging indent you are after. I'd rather just have a different alignment than use a table. Of course, you are free to use whatever you want, but tables tend to give headaches.

<p class="endnote"><span class="en_number">[12]</span> Louis David, a famous French Painter.</p>

with, for instance:

p.endnote {
  margin-left: 2em;
  text-indent: -2em;
  page-break-before: always;
}
span.en_number {
  font-weight: bold;
  padding-right: 0.5em;
}

[DTM]

Yes, tables are tricky and are not fully and properly supported everywhere. But I tried numerous approaches, including the one you suggest, before deciding that tables are the only way to get the alignment right. I'm very picky about that kind of thing.

Still, for anyone who isn't as picky as I am, what you're suggesting is probably the easiest and safest way to go.

[Jellby]

I'm probably no less picky than anyone, but would be satisfied with just:

<p><b>[12]</b> Louis David, a famous French Painter.</p>

or equivalent, because I'm usually not trying to replicate a given layout, but to create one that looks fine and comfortable. Also, note that by using a table (or a hanging indent) you are effectively reducing the available text width, which might not be a very good idea for verbose footnotes on a narrow screen...

[DaleDe]

Originally Posted by Jellby

I'm probably no less picky than anyone, but would be satisfied with just:

<p><b>[12]</b> Louis David, a famous French Painter.</p>

or equivalent, because I'm usually not trying to replicate a given layout, but to create one that looks fine and comfortable. Also, note that by using a table (or a hanging indent) you are effectively reducing the available text width, which might not be a very good idea for verbose footnotes on a narrow screen...

I do not see how you would be reducing the text width much more than with a hanging indent. His way makes [1] and [12] take the same width but otherwise the text can be the full width of the rest of the screen.

Dale