Writing a side note on R markdown html #2

Using the R Markdown format with toc_float: TRUE, I would like to add side notes. In a previous question, two solutions were given:

  • Use Tufte Handout.
  • Use html elements with the standard R Markdown.

The second solution, that uses standard R Markdown, does not properly render the side note at the side. It's simply aligns the the note to the right, but interferes with the other text. This is especially true with toc_float: TRUE.

Is there a solution to this? Having both the floating TOC on the left and side notes on the right?

Hi,

As far as I know, those Tufte/Tint distinctive features: sidenotes, marginnotes and marginfigure are possible due to predefined wide margin configuration. In R Markdown (HTML output) that "extra space" is "reserved" to toc: ; but this doesn't restrict us to play around with code and margins.

I was able to reproduce marginnotes and marginfigure (or something that looks alike :wink: ) with HTML&CSS (credit goes to @crumpmj, see this post and solution here) and failed to reproduce the sidenote mark (the superscript number).

Is the following workaround helpful to you?
Here goes the reproducible .Rmd:

---
title: "Margin notes in R Markdown HTML output"
output:
  html_document:
    toc: yes
    toc_depth: 3
    toc_float:
      collapsed: yes
      smooth_scroll: yes
---

```{css sidenote, echo = FALSE}
.sidenote, .marginnote { 
  float: right;
  clear: right;
  margin-right: -60%;
  width: 57%;         # best between 50% and 60%
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.1rem;
  line-height: 1.3;
  vertical-align: baseline;
  position: relative;
  }
```

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

## Sidenote or marginnote

ISO 639-1:2002, Codes for the representation of names of languages—Part 1: Alpha-2 code, is the first part of the ISO 639 series of international standards for language codes. Part 1 covers the registration of **two-letter codes**. <div class="sidenote">Some of **two-letter language codes** (<a href = "https://en.wikipedia.org/wiki/ISO_639-1" target="_blank">ISO 639-1</a>):</div>
<div class="marginnote">Afrikaans (af); Catalan (ca); Chinese (zh); <br> Croatian (hr); Czech (cs); English (en); <br> Esperanto (eo); French (fr); German (de); <br> Greek, Modern (el); Hungarian (hu); <br> Italian (it); Latin (la); Macedonian (mk); <br> Polish (pl); Portuguese (pt); Romanian (ro); <br> Russian (ru); Serbian (sr); Spanish, <br> Castilian (es); Swedish (sv); Ukrainian (uk).</div> 
There are 184 two-letter codes registered as of December 2018. The registered codes cover the world's major languages.

These codes are a useful international and formal shorthand for indicating languages.  
Source: [Wikipedia](https://en.wikipedia.org/wiki/ISO_639-1)

## Tables & plots

<div class="marginnote">`r knitr::kable(mtcars[1:6, 1:6], caption = 'A subset of mtcars:', format = "html", linesep = "")`</div>

<div class="marginnote">
```{r pressure, fig.height = 2.5, fig.width = 2.5, echo = FALSE} 
plot(pressure)
```
</div>

Output:

1 Like

Hello Radovan, it looks awesome!

For some reason, when I try to reproduce it, the menu has a much larger margin with the left page border and the side note moves off the screen.

I can side scroll the main text and side note to the left, but the menu is not attached to them, such that the main text moves over the menu.

Is there a fix for this? Other than that, I think it's a very clean solution!

Output with main text and side note scrolled to the left:

Hi, in that case we can set margins wider by moving left margin of .main-container for 250px (increase or decrease the value if needed):

```{css sidenote, echo = FALSE}
.main-container {
    margin-left: 250px;
}

.sidenote, .marginnote { 
  float: right;
  clear: right;
  margin-right: -60%;
  width: 57%;         # best between 50% and 60%
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.1rem;
  line-height: 1.3;
  vertical-align: baseline;
  position: relative;
  }
```

Great, that fixes the margins, I can now get everything within the size of a single screen.

When I scroll to the side, the main text still moves over the menu, is there also a fix for that?

We can fix that by leveling up the position of z-index attribute, from default CSS .list-group-item.active to #TOC:

```{css sidenote, echo = FALSE}
#TOC {
  z-index: 2;
}

.main-container {
    margin-left: 250px;
}

.sidenote, .marginnote { 
  float: right;
  clear: right;
  margin-right: -60%;
  width: 57%;         # best between 50% and 60%
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.1rem;
  line-height: 1.3;
  vertical-align: baseline;
  position: relative;
  }
```

Thank you!

I wished it would not be able to side scroll at all anymore, so to have the three columns fit on one page and have them stick together (like it's the case without the side notes: the main text and menu are 'fixed', cannot be moved across one another).

On my 22 inch screen looks perfect.
So, I guess, the appearance of the side scroll bar would depend on the screen size (our R Markdown is now much wider).
For now, to fix this, try moving the .main-container more to the left - by decreasing the value of margin-left: to 200px or 150px ( 0px = max. to the left).

EDIT:
Or, as you prefer, that

you can change the position of tocify (floating table of contents) from fixed (default) to sticky:

```{css sidenote, echo = FALSE}
div.tocify {
    width: 100%;
  }

.tocify {
    position: sticky;
  }

.main-container {
  margin-left: 200px;
  }

.sidenote, .marginnote { 
  float: right;
  clear: right;
  margin-right: -60%;
  width: 57%;         # best between 50% and 60%
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.1rem;
  line-height: 1.3;
  vertical-align: baseline;
  position: relative;
  }
```

but you will lose that distinctive floating feature of TOC.

1 Like

This is very helpful. I now understand that if everything fits the screen, the side scroll is not active, which makes sense.

Interestingly, I need to set the margin-left to -10 to have an acceptable margin at the left of the toc, but that's fine.

Also, for some reason there is a lot of spare white space on the right of the side note. I suspect that's the reason why the side scroll is still activated even when everything fits the screen (I can side scroll the main text and side note to the left, which simply reveals that white space).

Can I somehow remove this white space? And see edit below.

EDIT. I now notice that when zooming in on the document with the default R Markdown (without the side note), all text is nicely contained within the browser window. However, when zooming in on the document with the side notes attached, it still contains the toc and main text within the browser window, but the side notes are pushed out of it and thus the side scroll is activated. I can imagine the most beautiful solution to be where also the side notes are contained within the browser window at all times. Is that possible?

Try limiting the width of .sidenote, .marginnote {} with max-width: 260px; (floating table of contents - tocify has the same value):

```{css sidenote, echo = FALSE}
.main-container {
    margin-left: 200px;       # 0px = max. to the left (with default padding)
}

#TOC {
  z-index: 2;
 }

.sidenote, .marginnote { 
  max-width: 260px;
  float: right;
  clear: right;
  margin-right: -38%;     # previously was set to -60%
  width: 57%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.1rem;
  line-height: 1.3;
  vertical-align: baseline;
  position: relative;
  }
```

As R Markdown rely on Bootstrap (if I'm not mistaken), the sidenote & marginnote would need to be implemented there first.

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.