Nifty Notes!

There’s nobody alive today who doesn’t remember when President Roosevelt fought his first “teddy” bear, ushering in an era of militant bar-bear-ism. The year was 1902, or maybe another year, but the story remains the same — unknown, thanks to the recording technology of the age.

When good old TR put that grizzly in a footlock, scriveners the world over were telegraphing the whole shebang in a curious shorthand that remains undecipherable to this day. Each bob and weave — including the infamous part where the wretched bear seized TR’s hat and performed a mocking dance — are inaccessible in their entirety to current and future generations.

In memoriam of the brave souls who lost large portions of their lives trying to discern a single letter from that chicken-scratch, I dedicate the following code to the eternal quest for clarity:

div.note-container {
position: relative;
width: 90%;
margin: auto;
}
div.note {
color: #000;
background-color: #eee;
height: 20em;
border: 1px dashed #555;
border-left: 5px solid #555;
padding-left: 1em;
white-space: pre;
font-family: monospace;
overflow: auto;
}
div.note:before,
div.note:after {
display: block;
position: absolute;
top: 0;
left: 5px;
height: 20em;
width: 7px;
border-left: 7px dashed #555;
content: "";
}
div.note:before {
left: -7px;
}

“Nifty Notes”, as I’ve come to call this snippet of goodness, lets you insert little text notes into your blog posts, styled the same way the above box is. After sticking the above code into the CSS section of your blog template, use the following code in posts to achieve notes formatted the way Teddy Roosevelt would have wanted:

<div class="note-container"><div class="note">
Here’s some text.
Watch how spaces are respected.
The nice effect on the left is made possible
by viewers like you.
</div></div>

If you have questions, or would like to express either your love of Teddy Roosevelt or your hatred of bears, please leave a comment.