Opinion/Request: R Presentation template should create css illustrating basic options

R Markdown
#1

Hey y'all. After spending hours trying to make the font size bigger in a default R Presentation @.Rpres file, I have a suggestion/request that I think could save new users tons of time on the learning curve:

There is implicit CSS options being built when the user creates an Rpres file. These are hidden away from the user, and that makes sense. However 35 seconds after creating a presentation many users will think, "that's nice, but I'd like to tweak XYZ". It would be great if the templating tool would create a css file linked to the markdown that illustrated how to override maybe 10-15 of the most popular formatting options. That would be crazy helpful.

I'm pretty freaking technical, but I had never edited a CSS file until yesterday. And to figure out how to change the font size to larger I had to do the following:

  • render to html
  • open html in chrome
  • user the inspector gadget to look at the source (a non trivial jump for most novice users)
  • figure out what the element name was
  • google how to change the element settings in CSS
  • implement that change in a linked CSS
  • discover that it doesnt work
  • drink coffee
  • hug the dog
  • google more
  • discover that you have to use different syntax in CSS to override an existing css setting
  • figure out that syntax
  • try it... fail
  • finally find an example where someone else overrode the font size on p, and both bullet settings. Yeah!
  • implement that change
  • it works
  • ■■■■ about how hard this is on Twitter:

I got up early to work on a presentation. I had the brilliant idea of using RMarkdown to create an Rpres. 3 hours and 4 css tutorials later I finally can change the font size so it's readable to someone over 30. FML, y'all. This is not a good experience. #rstats

— JD Long (@CMastication) May 5, 2018

Had there been a CSS file in the initial template with illustrations of some of the most common options my work flow would have been more like:

  • Look in the CSS
  • randomly change each font size setting until one of them changes the font I'm interested in
  • have coffee
  • hug my dog
  • tweet about politics

See how much easier that is!
It would allow use of my favorite coding methodology:

a30a68dcdf20ae4730f4c864a6e2875c.jpg732×960 95.3 KB

14 Likes
Customize a presentation (design)
#2

much approved! a very natural analogue to the keep-tex option for PDF output of .Rmd/knitr

#3

Since it came up in that twitter thread, R Presentation general discussion:

#4

Very much agree with the idea of a CSS cheat-sheet and novice-friendly annotated CSS template being included with Rmd slide deck-making pkgs.

Xaringan is a big step forward, but still feel like I have to fiddle with CSS way too much to make things fit & legible

#5

Just realized you meant for Rpres and not ioslides, so I spoilered that part. What I did find, however, is

Seems like that could be helpful for anyone stumbling upon this thread in the meantime.

ioslides vs xarigan css ease

Yeah, so it looks like one of the major upsides of xarigan in general (at least over ioslides— which is what I'm comparing it to, because I think that's what JD is/was using) is that it has an explicit default.css (at this point, you, JD, I'm sure know way more about this than I do)
https://slides.yihui.name/xaringan/#33
https://github.com/yihui/xaringan/blob/master/inst/rmarkdown/templates/xaringan/resources/default.css

Regardless, obviously more guidance would be helpful (even if to point out the pros and cons of using different slide frameworks, one of which might be that customization is much more difficult with one than another, but point to how it can be done e.g. to examples such as the css to Garrett's ioslides presentation from the rmarkdown gallery).

4 Likes
#6

This is hilarious, is exactly how my day has gone, and I agree 100%.

#7

be sure and hug the dog an extra time. It helps.