» CSS Tip: How to make article sidenotes

CSS Tip: How to make article sidenotes

This sentence is totally like a sidenote or something.

Books use little sidenotes to convey additional information and personal observations that would ordinarily interrupt the flow of the text. The web is a different medium, but there’s no reason why you can’t use this type of technique productively. Having little sidenotes on your own web articles is a small touch that can take a bit of extra work, but it is something that not a large percentage of websites do and can effectively convey the notion of a bit more quality if you implement it decently.

I’m sure this technique has been around on the web before this, but I first really noticed it with Information Architects Japan’s great articles. I’d think it would be pretty difficult to do with tables for layout, and there seem to be a few other methods for doing it with Javascript, but fortunately you don’t have to do that.

When in WordPress…

Instead of removing the sidebar, you might decide to keep it and the sidenotes and use 3 columns, one for your content, one for your sidenote, and one for your sidebar. I’m not a fan of this type of solution in general though because it can take focus away from your content.

When implementing this with WordPress, the first thing you’d want to do is to make sure that your single.php file doesn’t contain something like this which displays the sidebar.php file. The single.php file is the file that is used when a user displays an individual blog post.

Offhand, I’m not sure what the files are called in other blogging-platforms, but I’m sure its something similar that you should be able to figure out.

The HTML

Based on the way absolute-positioning works, you need to put the sidenote right before the content it is meant to appear next to. So you’d have something like this.

The CSS

In the CSS, you might have something like this.

Simple.

A little typography

Image from Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students (Design Briefs) which I bought recently and highly recommend for how clearly it is able to explain concepts.

Ideally, these sidenotes would be arranged so that there would be some type of pixel-perfect alignment as illustrated above. Mathematically speaking, you’d need to figure out a font-size and line-height that would allow the baselines of the main content to occasionally match up with the baseline of the sidenote.

But as most elements of this site remain very much a work in progress while I’m working on some other projects, I haven’t had a chance yet to fine-tune a few things that I really want to. Hopefully I’ll refine a few things and fix some stupid CSS problems and make this even more detailed at some point. This is just a very basic implementation at this point. A few other things are a larger priority for me though at the moment.

Drawbacks to doing this

* It is a little more work to double check that everything works correctly within each blog post. If you write too long of a sidenote, it can overlap on top of the next one as we’re using absolute positioning, and that looks bad. The solution to this is to try and use them sparingly.

* You lose a potential space to put various sidebar features like date-based archives or some such, but since I’m not a fan of them anyway, this isn’t a loss to me. You also lose a potential place to put advertisements, and that might be a big or little issue depending on how your overall site is designed and how you plan on monetizing it.

* If you use full-RSS feeds instead of a partial feed, you sort of have to live with the sidenotes being visible throughout the text unless you’re willing to do a bit more work. That and a few other typographical tidbits related to this in some future article.

Conclusion

Thats about it. Football season is almost upon us. Go Eagles! 16-0 this year for sure.
As one other note, I’m using MarsEdit 2 to write this article and it looks pretty neat so far. I want to experiment with it further before making a full judgement though.