more ramblings of a retired teacher
commenting (maybe ranting) on education - even my own

May 2024
« Mar    
Marginal Notes
Filed under: General
Posted by: Algot @ 1:43 pm

The journal I write for myself gets more attention from me than any of my blogs. The blogs are public while the journal is a mix of stuff that mostly does not become public.

Sometimes bits from the journal rise out of the junk because I (foolishly) think that someone in the “public” might be interested in what happened.

I had occasion to go back to revise an entry from March. It seemed like a good idea to make it clear that the update was done today and not done back in March. A simple parenthetical line might have done the trick, but I am working in Markdown to produce the journal in HTML to make it a visually interesting journal with screen captures, photos, live links, etc.

That meant finding a trick to make the note stand out. I thought that if the journal had been done by hand with a pen and paper, the added info would have gone in as a marginal note. Well, using the tricks of Cascading Style Sheets (CSS), I can easily add text which appears on the right edge of the web page in the journal.

Step 1

Add a CSS class to the “header” of the journal. In my setup, I have each entry as a markdown formatted file labeled by date.

The very first file for the year ( is my header file where I can put some CSS rules to control the look of the web pages. What I decided to use is the CSS for a class called “marginal”.

.marginal {
    width: 300px;
    border: 3px solid red;
    border-radius: 20px;
    background-color: blue;
    padding: 10px;
    float: right;
    color: yellow;
    font-weight: bold;
    font-family: “Comic Neue”, “Comic Sans”, sans-serif;
    // font-size: 1.3em;

Step 2:

Any time I want to add a marginal note, I drop in a div where I need it.

Note text

The result looks like this for the entry in question (from the file):

To me, the blue and yellow box at the right looks a little like a marginal note I went back to add. To you, it might look like something else, but then, this is about my journal. “Your Results May Vary”.


Comments are closed.