Should Sidenotes and Marginnotes be hidden on index (and other full-width pages)?

[MatthiasWinkelmann]

I've run into a problem with using sidenotes (and marginnotes) within the excerpted part of posts and I'd like to confirm that I'm not doing something completely stupid.

The notes are rendered on the default index and break the layout because index is full-width while posts are not. I have added the following scss as a quick fix, but it seems unlikely to me that I'm the first to run into this problem so I am wondering if I missed a more canonical way to deal with this problem.

.full-width {
  .sidenote, .sidenote-number, .marginnote  {
    display: none;
  }
}

[ghost]

There's 2 ways of doing this. The first way is your suggestion of disabling sidenotes and marginnotes on all full-width pages. This requires denoting in the Readme that full-width layouts do not support sidenotes and marginnotes. Users will need to use post or page layouts for special tags.

The second way is to disable only on indexes. The index could have a special class and hide sidenotes and marginnotes by default:

body.index {
    .sidenote, .sidenote-number, .marginnote {
        display: none;
    }
}

The full-width layout could accommodate sidenotes and marginnotes in some way. This will require adding some additional SCSS to the stylesheet.

@clayh53 what do you think?

[clayh53]

I am busy on some other things this week, but my thought is similar to Nick's : that the full-width layout should acommodate sidenotes and footnotes. My idea would be to use the same technique that is used on narrow screens and just hide them normally and reveal them when the superscript or marginnote symbol is clicked.

Would that make sense from a UI perspective?

I'm wondering if it would be as simple as targeting the same narrow screen CSS behavior with an additional full-width .sidenotes etc selector.

On Jan 5, 2016, at 12:12 AM, Nick notifications@github.com wrote:

There's 2 ways of doing this. The first way is your suggestion of disabling sidenotes and marginnotes on all full-width pages. This requires denoting in the Readme that full-width layouts do not support sidenotes and marginnotes. Users will need to use post or page layouts for special tags.

The second way is to disable only on indexes. The index could have a special class and hide sidenotes and marginnotes by default:

body.index { .sidenote, .sidenote-number, .marginnote { display: none; } } The full-width layout should accommodate sidenotes and marginnotes in some way. This will require adding some additional SCSS to the stylesheet.

— Reply to this email directly or view it on GitHub.

[ghost]

Full-width layout is already a deviation from tufte-css, but a necessary one for display of blog indexes. I don't think it makes sense to implement sidenotes and marginnotes for full-width layouts, since by their very nature they imply a margin which is not present in a full-width layout.

So to retain consistency with tufte-css I suggest to disable sidenotes and marginnotes on all full-width pages. This can be done with CSS, or can be done by not processing these respective Liquid tags in a full-width layout.

If the user wants marginnotes and sidenotes, they will be required to use a post or page layout which contains the necessary right margin.

[ghost]

Additional thought: Tufte himself seems to favor a margin and I can't recall very many of his publications that are full width. (if any) If in future tufte-css implements a full-width layout then it would make sense to incorporate that into tufte-jekyll.

[clayh53]

I think you make a good argument that it makes sense to keep this repo on rough feature parity with tufte-css since that is the reason it exists at all.

In the Visual Display of Quantitative Information book, the table of contents maintains the layout of the rest of the book with an empty right margin, and the index at the end of the book is a 3-column list. Neither of these particular use cases would have any need for marginnotes or sidenotes.