Comments (13)
+1
from tufte-css.
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.
from tufte-css.
Would the pull request involve the front-facing site, too? I'm just trying not to overstep any bounds.
from tufte-css.
@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.
from tufte-css.
<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?
from tufte-css.
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.
from tufte-css.
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. ;)
from tufte-css.
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?
from tufte-css.
@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
from tufte-css.
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.
from tufte-css.
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.
from tufte-css.
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.
from tufte-css.
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.
from tufte-css.
Related Issues (20)
- Tables are all black HOT 2
- navbar support/advice? HOT 1
- links look weird when highlighted HOT 2
- tufte.css and tufte.min.css have different update dates HOT 1
- Inconsistent spacing due to inline labels as sidenote numbers HOT 1
- dark mode HOT 4
- Sidenotes on list items are misaligned
- Lists in sidenotes have body-sized fonts.
- Figcaption text overlays the image on fullwidth iframe-wrapper
- Apply section style to header and footer elements, too
- Embedding superscripts breaks line height.
- Anything in the margin disappears with narrow browser window HOT 2
- Sidenote indexing HOT 8
- .margin-toggle:checked + .sidenote ... {vertical-align: ...}
- Underlines missing at certain zoom levels HOT 8
- sidenote becomes footnote
- Using srcset inside fullwidth figure renders an image that is not full width
- Darkmode background is too dark HOT 2
- Does tufte-css play nicely with screen readers? HOT 1
- Academicicons are very strangely underlined HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tufte-css.