{emayili} Managing CSS

I love the clean simplicity of an R Markdown document. But sometimes it can feel a little bare and utilitarian. This is especially the case if it’s rendered into the body of an email. How about injecting a little more pizzazz?

library(emayili)

msg <- envelope()

(In|Ex)cluding Rendered CSS

By default the knitting process for an R Markdown document will inject CSS from Bootstrap and highlightjs. When you render() an R Markdown document in {emayili} these CSS will be included in the <head> of the HTML document. This actually results in quite a lot of content, often more than contained in the <body> of the document.

If you want to generate a more lightweight message then you can use include_css option to turn off the CSS.

msg %>%
  # Do include rendered CSS (default).
  render("styling.Rmd", include_css = TRUE)

msg %>%
  # Don't include rendered CSS.
  render("styling.Rmd", include_css = FALSE)

Let’s take a look at those two options. This is what it looks like in Thunderbird when the rendered CSS is included.

And this is it without the rendered CSS.

Custom CSS

Now, what about including some custom CSS? Use the css_files argument to specify one or more CSS files that will get baked into the message.

msg %>%
  render("styling.Rmd", include_css = FALSE, css_files = "styling.css")

Here’s the contents of styling.css:

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

h2 {
  font-family: 'Pacifico', cursive;
}

p {
  font-family: 'Roboto', sans-serif;
}

body {
  background-color: grey;
  color: white;
  margin: 0 30px;
}

hr {
  height: 1px;
  background-color: white;
  border: none;
}

We’re pulling in some custom Google Fonts, changing the background colour of the page and adding in some margins, along with a few other tweaks.

And this is what it looks like. I can’t claim to have any aesthetic sense at all. Sorry. I’m sure that you can do a lot better!