Take Back the Margins

One of the best parts of a composition notebook is the margins.

Sometimes you have a stray thought. It is not fully developed and yet you want to write it down. Why have it take up a precious line? Put it in the margins.

Sometimes you want to support a thought with a quick aside. But that would be break the flow of your writing. No matter. Put it in the margins.

The margins are a beautiful place to put asides. Unlike footnotes, they allow you to have the text and the aside close together. No jumping around from top to bottom to top to bottom to top *. * “The goal is to present related but not necessary information such as asides or citations as close as possible to the text that references them. At the same time, this secondary information should stay out of the way of the eye, not interfering with the progression of ideas in the main text.” – Dave Liepmann on 'marginnotes' (source)

The margins in Write.as are a blank canvas from which to try such things. All that is required is a little CSS. It might gunk up your text as you include them but let's be frank – the reader will only see the end product.

So I went into the 'Customize' settings for my Write.as blog and went down to 'Custom CSS'.

Here is what I added * : * All of this CSS is from Tufte CSS, a wonderful project. (source) I understand that some of the CSS might be superfluous but I am a novice and terrified of taking out one thing that will truly make the cascading style sheets cascade.

.marginnote { float: right;
                       clear: right;
                       margin-right: -60%;
                       width: 50%;
                       margin-top: 0;
                       margin-bottom: 0;
                       font-size: 0.8rem;
                       line-height: 1.3;
                       vertical-align: baseline;
                       position: relative; }

.marginnote:before { font-family: et-book-roman-old-style;
                                   position: relative;
                                   vertical-align: baseline; }

blockquote .marginnote { margin-right: -82%;
                                           min-width: 59%;
                                           text-align: left; }

Then all you need to do is add a span element with the class of “marginnote” and you are off to the races. It takes some getting used to but makes sense after a bit.