Tufte Style Side Notes for Roam Research

Members only - a sneak preview into an upcoming functionality of Roam Studio

Update 2023/11/07: Further improved the CSS to make it responsive on smaller screens and disabled when in the sidebar

---

Edward Tufte is a prominent American statistician and professor emeritus of political science, statistics, and computer science at Yale University. He is best known for his work in data visualization and information design. Tufte has written several influential books on the subject, including "The Visual Display of Quantitative Information," "Envisioning Information," and "Visual Explanations." He emphasizes the importance of clarity, simplicity, and integrity in presenting complex data visually. Tufte's ideas have had a significant impact on the field of data visualization and have influenced many designers and researchers worldwide.

Side Notes in Edward Tuftes “The Visual Display of Quantitative Information"

I've always been a big fan of his work. But there was one thing I instantly fell in love with - sidenotes. Do you remember that books and articles with a bunch of footnotes in the lower part of the page? How annoying it was to find the correct footnote and find your way back? Sidenotes (or Marginnotes) solve this and look beautiful, too. They are placed directly next to the content they belong to. They can also contain images. I always wanted something like this in Roam Research. Well - they are already there but need some love.

As you can see, working with them is very straightforward using block views. To use them, place your cursor into the block you want to add a sidenote to, press CMD+P , and select “Change Block View" (you should assign a Hotkey to this if you plan to use it regularly). Press s to switch the view to “side.”

With the default Roam theme, this looks like this:

Sidenotes with Roam's default theme

It's not exactly how I would like to see them. But with Roam Studio (and some custom CSS), you get this:

Side Notes with Roam Studio

All links, images, and videos in the side notes still work:

Here is the custom CSS you need to add to your Roam Graph if you can't wait until I've implemented them in Roam Studio (sorry, for supporters only).

Just add it to your roam/css page or add a block with {{roam/css}} as well as a CSS block indented below it. Make sure you enable it.

Adding the CSS customization to your Roam Graph

Here is the code you need for easy copying:

.rm-article-wrapper .rm-block--side, 
.rm-sidebar-outline-wrapper .rm-block--side {
    display: block;
    background-color: transparent;
}

.rm-article-wrapper .rm-block--side__children, 
.rm-sidebar-outline-wrapper .rm-block--side .rm-block--side__children {
  display: block;
  border: none;
  margin-left: 27px;
  background-color: transparent;
}

@media screen and (min-width: 900px) {
  .rm-article-wrapper .rm-block--side {
    display: flex;
  }
  
  .rm-article-wrapper  .rm-block--side .rm-block--side__children {
    min-width: 25%;
    max-width: 25%;
  }
  
  .rm-article-wrapper .rm-block--side .rm-inline-img__resize,
  .rm-article-wrapper .rm-block--side .rm-block--side__children .rm-inline-img,
  .rm-article-wrapper .rm-block--side .rm-block--side__children .react-resizable {
    max-width: 100%;
  }

  .rm-article-wrapper .rm-block--side__children div {
    font-size: 0.85rem;
  }

.rm-article-wrapper  .rm-block--side__children .rm-block-input {
    font-size: 0.85rem!important;
  }

  .rm-article-wrapper  .rm-block--side .rm-block--side__children {
    align-self: flex-start;
  }
}

Have fun. Let me know if you like it or need any modifications.