Side Notes

I tend to go off on tangents when making a point. In fact, there's already a trend emerging in the blog where I insert "side notes" into a train of thought. In retrospect, the tangents are informative and somewhat related to the topic at hand but as a default styled paragraph, it forces itself upon the reader and can wind up derailing them from the main topic. For example:

And now, I said, let me show in a figure how far our nature is enlightened or unenlightened: Behold! human beings living in an underground den, which has a mouth open toward the light and reaching all along the den; here they have been from their childhood, and have their legs and necks chained so that they cannot move, and can only see before them, being prevented by the chains from turning round their heads.

Side note: Speaking of topic, I like meat. Meat meat meat meat meat meat meat meat meat meat meat meat. Meat.

Above and behind them a fire is blazing at a distance, and between the fire and the prisoners there is a raised way; and you will see, if you look, a low wall built along the way, like the screen which marionette players have in front of them, over which they show the puppets.

What to do? Add a class to the "side notes" <p> tag and add a CSS rule to break out the text!

Here's the <p> tag with the new sidenote class:

<p class="sidenote">

Now the rule that will style this special paragraph:

.post p.sidenote {
    background-color: #eee;
    border: 1px dotted black;
    float: right;
    font-size: 0.9em;
    margin: 10px 0px 25px 10px;
    padding: 10px 10px 10px 10px;
    width: 250px;
    font-family: Tahoma;
    font-style: italic;
}

To prevent the "side note" from overlapping any formatted source sections, the prettyprint CSS class also needed an additional attribute:

.post-body pre.prettyprint {
    background-color:#FBFBFB;
    border:1px dotted #888888;
    margin-left:2em;
    margin-right:2em;
    padding-left:5px;
    clear:both;
}

This format allows the user to continue reading the main topic and then return to the easily identifiable "side notes" when they are ready to do so:

And now, I said, let me show in a figure how far our nature is enlightened or unenlightened: Behold! human beings living in an underground den, which has a mouth open toward the light and reaching all along the den; here they have been from their childhood, and have their legs and necks chained so that they cannot move, and can only see before them, being prevented by the chains from turning round their heads.

Side note: Speaking of topic, I like meat. Meat meat meat meat meat meat meat meat meat meat meat meat. Meat.

Above and behind them a fire is blazing at a distance, and between the fire and the prisoners there is a raised way; and you will see, if you look, a low wall built along the way, like the screen which marionette players have in front of them, over which they show the puppets.

Now I can start side conversations and follow tangents to my mind's content without utterly frustrating or losing the reader!