For anyone reading this who wants more information on how they work without needing to dig through the site's source code, there's a quick demo I have up on JSFiddle. This was written a while ago, I suspect there are easier ways to make this work today.
There are a few irritations I have with the sidenotes that I want to clear up in the redesign (specifically for mobile readers), so this implementation might get tweaked a little bit in the future.
The hanging quotes are probably the part of this site I'm most proud of. They're pure HTML/CSS and render as smart quotes, but if you select the text to copy, you'll get normal straight quotes, which makes pasting into sites like HN slightly nicer and more consistent. The implementation was kind of cobbled together from a couple of other sites, and then extended to be more robust and support a few edge-case scenarios.
That great. I wanted the same sort of formatting for my blog so I started with the Tufte CSS project but I think I like your implementation better. If I was to start again I would probably steal your ideas.
I love sidenotes in general but they tend to break down on vertically oriented mobile devices. It took me ages come up with a solution and even then I am not really happy with it.
I ended up doing pretty much the same thing. It doesn't work so well for footnotes that are supposed to be linked to a particular work though.
Here is an example from my site with both footnotes and sidenotes[0]. I style the sidenotes to be distinct from normal paragraphs, which can look great or weird depending on the content.
For anyone reading this who wants more information on how they work without needing to dig through the site's source code, there's a quick demo I have up on JSFiddle. This was written a while ago, I suspect there are easier ways to make this work today.
- Asides using only floats: http://jsfiddle.net/danShumway/0wqkk578/
There are a few irritations I have with the sidenotes that I want to clear up in the redesign (specifically for mobile readers), so this implementation might get tweaked a little bit in the future.
The hanging quotes are probably the part of this site I'm most proud of. They're pure HTML/CSS and render as smart quotes, but if you select the text to copy, you'll get normal straight quotes, which makes pasting into sites like HN slightly nicer and more consistent. The implementation was kind of cobbled together from a couple of other sites, and then extended to be more robust and support a few edge-case scenarios.
- Hanging quotes both at the start and within paragraphs: http://jsfiddle.net/danShumway/36jag4o2/