Making Marginal Glosses with Pelican and Jinja2

I’ve adopted an idea proposed by blogger Motoki Wu here. The idea is to have a side area on each page to display extra notes. ⇒

Like this.

I call this a “marginal gloss” because it reminds me of an old technique for annotating manuscripts.

The original blog post accomplished this using CSS to float any <span> element with a specific class to the right of the page, like this:

<p>
    This is the main paragraph.<span class="side-note">This will appear at the side.</span> This sentence shows in the main paragraph, unlike the span.
</p>

I’ve used this approach, as well. Since this website is built with Pelican, though, I also added to the approach by incorporating a shortcut at the level of page templates:

Using Pelican’s Jinja2 template engine,

For anyone new to Pelican: Posts on this site are written in MarkDown, and then put into templates that are written with a syntax called Jinja2.
I stopped using {{article.content}} and {{page.content}} in my templates to display the body of each post or page, and started using this instead:

{{ article.content|replace('( ( (','<span class="gloss">')|replace(') ) )','</span>')}}
Do note that I had to add spaces between the parentheses here in order to keep the page from interpreting them. There normally aren’t spaces between them.

This follows a StackOverflow post’s advice on on doing multiple string replacements at once in Jinja2. It allows replacing the text

( ( (Whatever content here) ) )

with

#!css
<span class="gloss">Whatever content here</span>
this is a test

Thus, whenever I’m writing a post, I just need to add a few extra parentheses to get extra content to display at the side.

I also added some additional CSS to define a maximum height and width to any images inside of these gloss sections. Adding CSS for .gloss img:active (i.e., when the image is clicked) allows images to expand when clicked, like this ⇒

Click and hold on the image to see it in greater detail.![“”](/images/khunrath_alchemists_laboratory.png
)

The full CSS is below.

#!css
.gloss {
  position: absolute;
  left: 55%; /* This works because the <body> element of the page has a fixed width less than 55% */
  max-width: 20%;
  font-size: small;
}

.gloss img {
  max-height: 2em;
  display: inline;
  margin-left: none;
  padding: 0 1em 0 1em;
  vertical-align: right;
}

.gloss img:hover {
  cursor: pointer; /* Make the mouse cursor change as if the image were a link. */
}

.gloss img:active {
  max-height: 16em;
  max-width: 16em;
  display: inline-block;
  position: fixed;
  /* Center the image on the screen. */
    top: 50%; 
    left: 50%;
    margin: 0px;
    /* These offsets help to center the image, rather than the top left corner of the image. I can do this here because I know that the image is no larger than 16em square (from a few lines above). */
    margin-top: -8em; 
    margin-left: -8em;
  float: left;
  z-index: 10; /* This keeps the gloss section on top of everything else. */
  background: #ededed;
  -moz-box-shadow: 3px 3px 15px 5px #ededed;
  -webkit-box-shadow: 3px 3px 15px 5px #ededed;
  box-shadow: 3px 3px 15px 5px #ededed;
}

I think that this adds a new dimension to the content that I write; I’m grateful for the idea, and excited to expand on it in this way.

Related

Next
Previous