Show HN: Marginotes, quick and elegant side notes for your paragraphs

Looks nice!

I was a little surprised at the last line in your code:

window.jQuery.prototype.marginotes = window.$.prototype.marginotes = marginotes

Last I checked (one minute ago) jQuery and $ refer to the same object. jQuery === $ unless somebody is using $ to refer to something else in which case thanks you just clobbered $'s prototype. You should follow the jQuery conventions https://learn.jquery.com/plugins/basic-plugin-creation/

Notes on web pages are tricky because there are so many edge cases, and they tend to expose the limitations of our current HTML+CSS model.

For example, we can achieve an effect similar to the one shown here using just CSS (no JS) if we’re able to use position:relative on the containing paragraph without breaking anything else in the styling:

HTML:

    <p class="note-container">This is some text with a <span class="note" desc="Style me!">marginal note</span>. Lorem ipsum dolor sit amet...</p>

    .note-container {
      position: relative;
      width: 400px;
    }
    
    .note {
      text-decoration: underline;
    }
    
    .note:hover::after {
      content: attr(desc);
      position: absolute;
      top: 0;
      left: 440px;
      width: 150px;
      height: 100%;
      border-left: 1px solid black;
      padding-left: 9px;
    }

https://jsfiddle.net/2ejk2who/

However, what happens if we need to work with touch-only devices, where hover effects aren’t available? Two options would be to show the notes all the time, or to embed a hidden checkbox and make the anchor text its label. In the latter case, tapping on the text could then toggle whether the marginal note appears if we used something based on :checked instead of :hover.

But now what if more than one note is set to visible at once? We can’t combine the position:absolute technique to get neat alignment at the top of the paragraph with using floats so multiple notes automatically fall under one another. I don’t have a good pure-CSS answer for this one.

In any case, on a smaller screen we might not want to show marginal notes alongside the main text anyway. It would be helpful if there were a way to have the notes drop underneath the paragraph and stack up, but again, we can’t combine the kind of absolute positioning that would place a note there with something that extends the paragraph’s box so later content moves down after any visible notes.

Perhaps one day we’ll have more flexible options for generated content and CSS positioning that will let us do these things, but for now the only ways I know to achieve some of these effects still rely on JS.

I made a little experiment, and converted this to a vanilla Javascript library. Relevant to some of the questions below about whether this should use jQuery or not.

Edit: There were two gotchas beyond browser compatibility. jQuery provides a consistent interface to set numeric style values - in vanilla Javascript you have to remember to turn these numbers into strings suffixed with "px". And I hacked together the code that stops fadein and fadeout from stepping on each other.

Changes: https://github.com/fdansv/marginotes/pull/2 Working Example: http://mshenfield.github.io/fdansv.github.io/

Very nice. It would be even better if it had some CSS media query-based fallbacks for the case when the page is being printed. And yes, jQuery should not be a requirement.

This is excellent. I've been thinking about rolling my own blog software since Medium took away their marginal note feature (IIRC, you can now make notes but they're for yourself only, readers can't see them). Since reading Ed Tufte's books, I'm convinced that margin notes are infinitely better than footnotes or (egad) endnotes for sharing little "extras" with your readers.

Mouse-over actions are nice on desktop. But what happens if I use a touch device?

Last time I checked you couldn't add HTML properties that don't exist. It's not valid HTML code. The exception are "data-*" properties. So the HTML markup should be <span data-desc="whatever">whatever</span>.

What happens if I have JavaScript disabled (and I do have)?

Pretty. Thanks.

http://youmightnotneedjquery.com/