{emayili} Managing CSS

[This article was first published on R - datawookie, and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

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?


Check on the installed version.

[1] '0.5.3'

And create an empty message object.

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.

In this case the message is being rendered with the default styling of the client.

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!

With these options at your disposal there’s really no excuse for creating “ordinary” emails. Now’s your chance to be extra-ordinary.

The {emayili} package is developed & supported by Fathom Data.

To leave a comment for the author, please follow the link and comment on their blog: R - datawookie.

R-bloggers.com offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

Never miss an update!
Subscribe to R-bloggers to receive
e-mails with the latest R posts.
(You will not see this message again.)

Click here to close (This popup will not appear again)