Sidenote in table head breaks spectacularly about tufte-css HOT 10 CLOSED

Could you give an example of the HTML you have or that you'd like to write and a sketch of the result you'd like to display? A screenshot of what you get now would be useful as well. Lorem ipsum'd text is fine if your project is private.

from tufte-css.

@daveliepmann
Tried to reproduce this error by adding a side note to text within a table cell.

The side note gets displayed within the table, not on the right hand side of the content as for other side notes. The side note also overlaps the table cell, wrapping itself around the content of the following cell which makes it rather hard to read.

PS: Added the HTML I used:

<td class="text">
  Inflation<label for="sn-tufte-inflation" class="margin-toggle sidenote-number"></label>
    <input type="checkbox" id="sn-tufte-inflation" class="margin-toggle"/>
    <span class="sidenote">
      Online-Encyclopedia Wikipedia explains inflation as a sustained increase in the general price level.
    </span>, high cost of living
</td>

A potential solution using jQuery might be provided here.

from tufte-css.

Thanks, @pixolin.

I am absolutely loathe to introduce a jQuery dependency to the project as a whole. I would consider that a major failure. I am also strongly opposed to even a plain JavaScript dependency, though there have been scenarios where that has almost become necessary. Thankfully this remains a pure CSS project for the time being.

My instinct tells me the solution to this particular situation might be to use prose in the paragraph of body text preceding the table, which should already be contextualizing and explaining the table. It would be great to see a technical solution, too, but we should first put the requirement through some hammock time. I'm not saying the requirement is a bad idea—I haven't even seen the requirement in context!—but one of the goals of Tufte CSS is to not just provide a set of tools, but to encourage design—that is, thinking—along Tuftean lines.

With these points in mind, if the carefully considered sidenotes are deemed the correct approach after all, then the technical solution I would investigate in situations like these is probably to recraft the table using faux <div>-based tables, as proposed by David Walsh here:

<div class="table">
    <div class="cell">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="cell">
        <div style="position:relative; overflow: auto; height: 100%;">
                <p>Lorem ipsum dolor sit amet.</p>
                <div style="position:absolute; bottom:0; right:0; background: yellow;">
                    This will be positioned at 5,5 relative to the cell
                </div>
            </div>
    </div>
</div>

.table { display: table; }
.cell { display: table-cell; }
.table, .cell { height: 100%; }

from tufte-css.

just to clarify this issue a bit: are you are looking to move table footnotes (which are a normal table feature that are almost always found at the bottom of a table), to the margin next to the table?

from tufte-css.

My intention was first of all to reproduce the issue originally reported by @jeregrine, focusing on a technical solution. (I admit, I got somewhat carried away here as positioning content of a table cell seemed more tricky than I initially imagined. The link to CSS tricks was the first solution that showed up and I thought it might at least be of some help. But I'm happy you shared the code by David Walsh, which certainly looks way more elegant, especially as it doesn't need additional JavaScript/jQuery.)
I certainly didn't want to cause confusion.

Thank you for the reminder, that the goals of Tufte CSS is to not just provide a set of tools, but to encourage design. I also love your thoughts to give it some time and review it with some distance.

from tufte-css.

@crmackay my intention is to have the sidenodes next to the table. SO I'd like to help describe a table/content or point out a specific row/column in the margin as exceptional.

from tufte-css.

@jeregrine I believe typically (at least in scientific publications) these notes are listed as footnotes in the footer of the table. Here is an example from google:

I think a table-footnote feature might make more sense than a table-sidenote feature. I think footnotes on tables would be less distracting; whereas sidenotes next to a table (especially if there is more than one) might actually distract from the data in the table.

Thoughts?

from tufte-css.

@crmackay +1

from tufte-css.

👍

—
Sent from Mailbox

On Wed, Oct 7, 2015 at 12:40 AM, Bego Mario Garde
[email protected] wrote:

@crmackay +1

Reply to this email directly or view it on GitHub:
#51 (comment)

from tufte-css.

Thanks for everyone's input. The workarounds proposed so far in this thread seem sufficient. I'm closing this.

from tufte-css.