4 ms·

I've always taken a liking to sidenotes, but the main problem with them is they are complicated by Markdown's rendering of footnotes. It's great for many other

by kmfrk 11y ago

I've always taken a liking to sidenotes, but the main problem with them is they are complicated by Markdown's rendering of footnotes. It's great for many other purposes, but a lot of people will probably prefer doing things in Markdown.

munificent 11y ago
I use sidenotes very heavily in my book[1], which is written in Markdown[2]. Instead of putting the contents of the asides in the middle of a paragraph, I pull them out into separate <aside> tags. Inside the paragraph, I have a little <span> with a name to indicate which text the <aside> should be positioned to line up with. There is some CSS to put the asides on the side[3] (with a ton of variations to make it play nice on mobile). Then there's a bit of JS to correctly line them up with <span> markers[4]. It was a bit more effort than I expected, and I don't like having to rely on JS, but the output is really nice, I think. For example, take a look at this chapter[5], and try resizing your browser window or hitting it on a mobile device. [1]: http://gameprogrammingpatterns.com/ http://gameprogrammingpatterns.com/ [2]: https://github.com/munificent/game-programming-patterns/blob/master/book/introduction.markdown https://github.com/munificent/game-programming-patterns/blob... [3]: https://github.com/munificent/game-programming-patterns/blob/master/asset/style.scss#L207-L253 https://github.com/munificent/game-programming-patterns/blob... [4]: https://github.com/munificent/game-programming-patterns/blob/master/html/script.js#L24-L42 https://github.com/munificent/game-programming-patterns/blob... [5]: http://gameprogrammingpatterns.com/double-buffer.html http://gameprogrammingpatterns.com/double-buffer.html
- saidajigumi 11y ago
  I like how your asides move into paragraph flow as the page narrows. The Tufte CSS page hides the sidebar content completely as the page narrows, which eliminates access to crucial information. (Aside: I really love using the Mobile Design View in Firefox and Chrome for inspecting responsive behavior. You can drag the viewport size by hand, or switch it to presets that represent target devices easily. All while keeping the full width of the browser pane for developer/inspector UI. FF even has a nice toggle shortcut, ⌥⌘M on OS X.)
  - hftf 11y ago
    I’ve seen Tufte CSS before when I tried to search for HTML/CSS sidenote implementations. I’m happy to see a responsive one, even though it uses JS.
  - dredmorbius 11y ago
    Another responsive sidenote implementation, screenshots: http://imgur.com/a/TXpis http://imgur.com/a/TXpis
    - hftf 11y ago
      > screenshots What help. /s
      - dredmorbius 11y ago
        It's not ready for prime time. I thought I'd posted some sample code. I'll dig for it. That was while I was doing anonymous codepens, so they're not on my profile there. Searching "css sidenote edward morbius" on G+ might turn up something and basic CSS.
      - dredmorbius 11y ago
        Basic sidenotes http://codepen.io/dredmorbius/pen/OVmKZX?editors=110 http://codepen.io/dredmorbius/pen/OVmKZX?editors=110 Not responsive, but @media queries on width and re-scaling width, margin, background colour, and border colour is what gets you that. Motherfucking Website. No sidenotes. but other bones of my basic design. http://codepen.io/dredmorbius/pen/KpMqqB http://codepen.io/dredmorbius/pen/KpMqqB Daniel Bos's sidenote implementation: http://loadingdata.nl/waves/ http://loadingdata.nl/waves/ (Degrades nicely for non-CSS viewers, not responsive.)
  - munificent 11y ago
    > I like how your asides move into paragraph flow as the page narrows. Yup. This is a nice (deliberate) side effect of using separate <aside> blocks instead of jamming them in the middle of the paragraph. The original location of the <aside> tag determines where the sidebar appears in the text flow if there's no room for it on the side. In some cases, it may be a few paragraphs distant from where it shows up on the side if that leads to better reading. This is also the fallback for users who don't have JS enabled. (Well, all both of them, at this point.) > I really love using the Mobile Design View in Firefox and Chrome for inspecting responsive behavior. Oh, yeah. I basically lived in that for a few days when I was tweaking the CSS.

by kmfrk 11y ago

munificent 11y ago

I use sidenotes very heavily in my book[1], which is written in Markdown[2]. Instead of putting the contents of the asides in the middle of a paragraph, I pull them out into separate <aside> tags. Inside the paragraph, I have a little <span> with a name to indicate which text the <aside> should be positioned to line up with. There is some CSS to put the asides on the side[3] (with a ton of variations to make it play nice on mobile). Then there's a bit of JS to correctly line them up with <span> markers[4]. It was a bit more effort than I expected, and I don't like having to rely on JS, but the output is really nice, I think. For example, take a look at this chapter[5], and try resizing your browser window or hitting it on a mobile device. [1]: http://gameprogrammingpatterns.com/ http://gameprogrammingpatterns.com/ [2]: https://github.com/munificent/game-programming-patterns/blob/master/book/introduction.markdown https://github.com/munificent/game-programming-patterns/blob... [3]: https://github.com/munificent/game-programming-patterns/blob/master/asset/style.scss#L207-L253 https://github.com/munificent/game-programming-patterns/blob... [4]: https://github.com/munificent/game-programming-patterns/blob/master/html/script.js#L24-L42 https://github.com/munificent/game-programming-patterns/blob... [5]: http://gameprogrammingpatterns.com/double-buffer.html http://gameprogrammingpatterns.com/double-buffer.html

saidajigumi 11y ago
I like how your asides move into paragraph flow as the page narrows. The Tufte CSS page hides the sidebar content completely as the page narrows, which eliminates access to crucial information. (Aside: I really love using the Mobile Design View in Firefox and Chrome for inspecting responsive behavior. You can drag the viewport size by hand, or switch it to presets that represent target devices easily. All while keeping the full width of the browser pane for developer/inspector UI. FF even has a nice toggle shortcut, ⌥⌘M on OS X.)
- hftf 11y ago
  I’ve seen Tufte CSS before when I tried to search for HTML/CSS sidenote implementations. I’m happy to see a responsive one, even though it uses JS.
- dredmorbius 11y ago
  Another responsive sidenote implementation, screenshots: http://imgur.com/a/TXpis http://imgur.com/a/TXpis
  - hftf 11y ago
    > screenshots What help. /s
    - dredmorbius 11y ago
      It's not ready for prime time. I thought I'd posted some sample code. I'll dig for it. That was while I was doing anonymous codepens, so they're not on my profile there. Searching "css sidenote edward morbius" on G+ might turn up something and basic CSS.
    - dredmorbius 11y ago
      Basic sidenotes http://codepen.io/dredmorbius/pen/OVmKZX?editors=110 http://codepen.io/dredmorbius/pen/OVmKZX?editors=110 Not responsive, but @media queries on width and re-scaling width, margin, background colour, and border colour is what gets you that. Motherfucking Website. No sidenotes. but other bones of my basic design. http://codepen.io/dredmorbius/pen/KpMqqB http://codepen.io/dredmorbius/pen/KpMqqB Daniel Bos's sidenote implementation: http://loadingdata.nl/waves/ http://loadingdata.nl/waves/ (Degrades nicely for non-CSS viewers, not responsive.)
- munificent 11y ago
  > I like how your asides move into paragraph flow as the page narrows. Yup. This is a nice (deliberate) side effect of using separate <aside> blocks instead of jamming them in the middle of the paragraph. The original location of the <aside> tag determines where the sidebar appears in the text flow if there's no room for it on the side. In some cases, it may be a few paragraphs distant from where it shows up on the side if that leads to better reading. This is also the fallback for users who don't have JS enabled. (Well, all both of them, at this point.) > I really love using the Mobile Design View in Firefox and Chrome for inspecting responsive behavior. Oh, yeah. I basically lived in that for a few days when I was tweaking the CSS.