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?
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 ) 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>
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:
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?
) with HTML&CSS (credit goes to 
