Tags All Entries

Marginal Notes in HTML

Tags: note-taking
aside, .aside {        /* works for "aside" tag and class name "aside" */
display: inline;     /* prevents parent paragraph from breaking */
float: right;        /* positions the note to the right of the content */
position: relative;  /* forces note to be relative its the normal position */
width: 20vw;         /* limits the width of the marginal note */
margin-right: -22vw; /* sets the distance away from the body text */
font-size: 16px;     /* makes font slightly smaller */
}
@media (max-width: 768px) {
  aside, .aside {
    display: block;
    float: none;
    margin: 5% 10% 5% 10%;
    width: 80%;
    font-size: 15px;
  }
}

1

Gwern2 recommends sidenote.js.

References

1.
Friedman, K. Marginal Notes. (2019).
2.
Branwen, G. Sidenotes In Web Design. (2020).

Links to this note