Marginalia in online documentation

Large modern displays provide enough space to be able to work with marginalia even in online documentation if required. For example, the marginalia can briefly summarize the adjacent content. This can be implemented with just a few lines of CSS code.

If there is not enough space in a browser window for a separate margin column, the marginalia will slide to a position above the associated text, similar to a subheading.

Example

Implementation

Step 1: Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

.marginalia-main-column {
  margin-left: 0px;
}
.marginalia {
  margin-left: 0;
  margin-top: 1.5em;
  float: none;
}
.marginalia::before {
  content: '[';
}  
.marginalia::after {
  content: ']';
}  
  
@media screen and (min-width: 750px) {
 .marginalia-main-column {
   margin-left: 150px;
 }
 .marginalia {
   margin-left: -150px;
   max-width: 145px;
   margin-top: 0;
   float: left;
 }
 .marginalia::before {
   content: '';
 }  
 .marginalia::after {
   content: '';
 }  
} 

In this example, if the window is less than 750 pixels wide, the layout will be single-column. The width of the margin column is 150 pixels (145 pixels text width plus 5 pixels gap). Of course, you can change these values as needed. The style provided for the marginalia is marginalia.

Also, if the width is less than 750 pixels, square brackets appear around the marginalia content. If you do not want this to happen, delete these characters in the CSS code.

Step 2: Put the following HTML snippet at the beginning of the area where marginalia are to be possible:

<div class="marginalia-main-column">

Step 3: Put the following HTML snippet at the end of the area where marginalia are to be possible:

</div>

Subsequent steps: Now all you need to do is to assign the style marginalia to all paragraphs in the text that are to become marginalia.

___
 
Did you benefit from this information?

In return, please link to this page, mention the page on social media, or buy one of my books.

Thank you!

Want more? See also more code snippets for enhancing online documentation, as well as my other technical documentation work aids.