Writing a side note on R markdown html #2

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