search

edwardtufte / tufte-css

Style your webpage like Edward Tufte’s handouts.
https://edwardtufte.github.io/tufte-css/
MIT License
5.98k stars 458 forks source link

aside tag #153

Closed WalkerY closed 4 years ago

WalkerY commented 4 years ago

What do you think about using <aside> for marginnotes/sidenotes instead of <span> tag? It's more semantic and coherent with the use of <article>, <section>. Please have a look a this example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

daveliepmann commented 4 years ago

When we've checked in the past, the semantic benefits were overwhelmed by practical concerns. See https://github.com/edwardtufte/tufte-css/issues/24#issuecomment-128699026 and other discussion.

If that isn't still the case then let me know and I'll reopen this, and a PR would be welcome.

WalkerY commented 4 years ago

@daveliepmann Ok, I see. Unfortunately, I am not proficient with this at the time. Nonetheless, I read some of the discussions and I am sharing some thoughts about this for your consideration:

  1. I don't like the idea of making any content toggable on small screens, especially that the source html is obfuscated. Both versions should provide the same information without this. A much better solution, as far as I am concerned, is to allow horizontal scroll on small screens. Nowadays, readers are accustomed to fast finger-scroll (like in the android home screen!!!! ;) ) without any toggling. It would also make it more coherent stylistically with a full-width version and also less complex to design and maintain. One would just need to make sure that the main column is displayed in full on small screens and perhaps a small part of sidenotes/marginnotes or some indicator at the edge of the screen so that it is intuitively obvious that there is some content that can be scrolled into view.

  2. perhaps aside not being inline is not such a big issue. One can always split a paragraph into two and insert an aside-marginnote at the correct height. In fact, aside not being inline would be useful (a feature?) to assure that it is always rendered on small screens and does not ruin any paragraphs! A small indentation would suffice if the solution from point a) seems less suitable (horizontal scrolling). As a user, I would like to be able to use two types of asides that behave differently for small screens: i) keep aside hidden but scrollable into view ii) integrate it into the main "flow" between paragraphs

  3. for sidenotes -- small seems to be a great solution without any toggling and without integrating it into the main column for small screens.

"Toggling" of sidenotes\marginnotes is a disaster imo. One should be able to skim through all of the text quickly and also to use native browser-based search functionality for all of the contents.

Finally, I find it important for source code to look clean and be semantic. Labels/inputs ruin this severely imo. This is a problem, not a solution. :) I would like to use clean html and not markdown. Using markdown adds unnecessary complexity imo.

WalkerY commented 4 years ago

@daveliepmann This toggling ruins, in fact, the whole idea of "footnotes" being in the view for readers and easily accessible for analysis/comparison/skimming through. That is, I am not sure that the Tufte style goals are compatible with "toggling" footnotes.

daveliepmann commented 4 years ago

@WalkerY I encourage you to build your own solution with the design constraints you favor. Cheers.