An html document with ‘aside’s

Date last run: 09Jun2020

In a question of the RStudio Community Writing a side note on R markdown html #2 the question was raised how to create site notes. A reference was made to an earlier article Writing a side note on R markdown html. Because I was interested I wanted to see what could be done using simple html and css. I had hoped to get a solution with two columns were the side note is placed along the material it is related to, but I could not make that happen.
The solution here offers only a site note at the right of the page but the area above and below the site note are used by regular text.

The Rmd file

I include a screenshot of the Rmd file. This is just the start of the standard Rmd template with the following changes:

• I indicate that I want use the file styles.css that is located in the same folder as the Rmd file. The css file contains instructions for the layout of the aside element that will contain side notes.
• I define the aside function that generates the html code for an aside element. I also use that function to create my_aside that contains example contents for a site note.
• and finally I call the function in an inline R expression to generate the tags.

Of course the use of the function aside can be avoided by just specifying the necessary tags:
<aside> <p> Side note text </p> </aside>

The html file

The result can be seen in the following screenshot. I would have liked to see two separated columns, but could not get that working: the line starting with This is an R Markdown document runs to the end of the line (above the side note). But by using an italic font and a different letter color it still is clear that this is a side note.

The CSS file

In the screenshot below you find the contents of the CSS file that is specified in the YAML of the Rmd document.

Session Info

This document was produced on 09Jun2020 with the following R environment:

  #> R version 4.0.0 (2020-04-24)
  #> Platform: x86_64-w64-mingw32/x64 (64-bit)
  #> Running under: Windows 10 x64 (build 18363)
  #> 
  #> Matrix products: default
  #> 
  #> locale:
  #> [1] LC_COLLATE=English_United States.1252 
  #> [2] LC_CTYPE=English_United States.1252   
  #> [3] LC_MONETARY=English_United States.1252
  #> [4] LC_NUMERIC=C                          
  #> [5] LC_TIME=English_United States.1252    
  #> 
  #> attached base packages:
  #> [1] stats     graphics  grDevices utils     datasets  methods   base     
  #> 
  #> loaded via a namespace (and not attached):
  #>  [1] compiler_4.0.0 magrittr_1.5   tools_4.0.0    glue_1.4.1     stringi_1.4.6 
  #>  [6] knitr_1.28     stringr_1.4.0  xfun_0.13      rlang_0.4.6    evaluate_0.14 
  #> [11] purrr_0.3.4