Change <span class="sidenote"> to <small>

[tigt]

It seems like a perfect match, really.

[ryanwmarsh]

+1

[daveliepmann]

Relevant:

4.12.5 Footnotes

HTML does not have a dedicated mechanism for marking up footnotes.

For side notes, longer annotations that apply to entire sections of the text rather than just specific words or sentences, the aside element should be used.

For figures or tables, footnotes can be included in the relevant figcaption or caption element, or in surrounding prose.

This sounds like a good idea. A pull request swapping out the styles in tufte.css and the examples in index.html would be welcome. Issue #7 is related and could be addressed simultaneously.

[tigt]

Would the pull request involve the front-facing site, too? I'm just trying not to overstep any bounds.

[daveliepmann]

@tigt Yeah, index.html is what I use for www.daveliepmann.com/tufte-css. Like I say in the README for contributing, the goal is to test all changes on that document, and to keep it current as a demonstration of using Tufte CSS.

Be aware that <aside> is not an inline element, as @xhn35rq points out. If this means we can't keep the correct height of sidenotes, <aside> is a no-go.

[tigt]

<aside> does not play nicely with auto-closing <p> tags at all. Not replaceable without making all paragraphs inline or something equally horrible. (Too bad display: run-in got dropped!)

I'm iffy about putting sidenotes in the actual text, since it really shouldn't be inside the paragraph in the first place. The HTML would ideally go like this:

<p>Words words words words. <sup><a href="#sidenote-1" aria-label="Side note 1">1</a></sup></p>

<!-- bunch more paragraphs and such... -->

<footer>
  <h3>Footnotes</h3>
  <ol>
    <li id="sidenote-1">Words words words words words.</li>
    <li id="sidenote-2">Words.</li>
   <!-- etc. -->
  </ol>
</footer>

But without something like the new position-relatively-to-element spec the Community Group is hashing out, it wouldn't be possible to CSS that into the effect you need.

So! An acceptable compromise:

<span class="sidenote" role="complementary">

What do you think?

[daveliepmann]

I think several things. First, thanks for your deep thinking on this.

Second, I agree that I don't see a way forward for <aside>, which is indeed a bummer.

Third, while I agree that sidenote tags would ideally be outside paragraph tags, I specifically do not think they should be at the bottom in a footnote section. Sidenotes aren't just footnotes displayed to the side; they are a semantically distinct object: an aside or citation located immediately adjacent to the content it is related to.

Ideally, I would locate each sidenote tag either before or after their associated paragraph tag, and the CSS would, using magic, correctly align them vertically (or hide them on small screens). I don't see a way to accomplish this at the moment. The HTML I want would be like so:

<section>
   <p>Blah blah <sup><a href="#sidenote-1" aria-label="Side note 1">1</a></sup> etc</p>
   <span id="sidenote-1">doot doot doo</span>
   <p>lorem ipsum...</p>
</section>

Fourth, a multi-part thought about roles. I like the idea of marking up the data semantically, for all the reasons that one should add semantic markup: accessibility, clarity, ease of API integration, et cetera. But I'm worried about complicating the demo code with technically unnecessary non-MVP attributes. I'm also not sure whether all sidenotes would have the role complementary, or all note, or if it is a case-by-case situation. Lastly, if we semantically mark up sidenote <span> tags, then I think we must semantically mark up the rest of our content as well.

[tigt]

You've definitely convinced me on the foot/sidenotes issue. Keeping them close at hand is a subtle but important distinction.

Also, good catch on role="note". Much better fit; complementary seems more like it's for complete packaged sections, whereas a note is what it says it is.

One could change their styling selector to [role~="note"] to enforce the technical necessity like you acknowledged, but perhaps that's undesirable for other reasons.

Ah well. Maybe in a few years the element(#id) positioning syntax will work, and this will have a very different solution. I'll add this as a use-case, at least. ;)

[tigt]

New development: Dudley Storey makes the case that these should be <small>, which is apparently an inline <aside>.

This would be a lot easier to implement, but do you agree with his logic?

[daveliepmann]

@tigt Thanks for bringing that to my attention. Quite interesting, as I was not aware of this changed usage of the tag.

This HTML5.1 draft spec specifically mentions side comments as a use case for <small>. But it also says that large chunks of sidebar content are more akin to sidebars, which are represented as <aside>. This begs the question, are we writing side comments or a sidebar? Margin notes for citations are definitely side comments, but I might think of margin figures or extended sidenotes as sidebars. I may be overcomplicating this.

I suppose I do agree with Storey's logic. I will think on it a bit more. Honestly I think the best course of action may be to find the people working on <aside> etc in the HTML5 spec and ask them what to do, since our use case kind of straddles these two very new tags.

If I have time in the next week or two I'll modify tufte.css and index.html to use <small> and see how it goes. However, I have other work at the moment, so if anybody else wants to take a stab at it, I'd love to see how it looks. I can't promise

[tigt]

The W3C's HTML5: Edition for Web Authors has some advice for <aside> which I thought was relevant:

Note: It's not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.

The advice for <small> clears up the matter a bit more.

I'd like to go ahead and submit a pull request (once I figure out git), but in your opinion, would you prefer leaving the classes on? <small class="side-note"> or margin-note makes a small distinction, but it could be just article small as a selector for both, and then margin-note would turn off the numbering.

[daveliepmann]

I got the opposite impression from the W3C's <aside> advice. Their examples seem like fine use cases for sidenotes, for instance:

<aside>
 <h1>Switzerland</h1>
 <p>Switzerland, a land-locked country in the middle of geographic
 Europe, has not joined the geopolitical European Union, though it is
 a signatory to a number of European treaties.</p>
</aside>

...they even say that <aside> "can be used for typographical effects like pull quotes or sidebars". A sidebar is very, very similar to a sidenote in my mind.

On the <small> side, I also think plenty of sidenotes are much more than "disclaimers, caveats, legal restrictions, or copyrights...[or] attribution, or for satisfying licensing requirements."

A pull request to see would be good to look into, but I can't promise it will get accepted. In any case, definitely keep the side-note class, since we don't want to conflict with user's other applications of basic HTML tags.

[tigt]

Yeah, I guess I'm confused too. <aside> is still a no-go since it can't be inline, so perhaps things are better off as they are.

[daveliepmann]

This thread is one of the best back-and-forths regarding concerns about which tags to use. However, since there is nothing actionable, I will close it now.