Mysterious @media print {} CSS inserted into R Markdown document (how to remove?)

[ghost]

Minimal Reproducible Example:

1. Create an Rmd document:

   
   ---
   output: html_document
   ---

Test

2. Click 'Knit'.
3. Open the knitted report in Firefox
4. Inspect the page, and click the button to 'toggle print media simulation'   
  ![image](https://user-images.githubusercontent.com/55477181/114815133-f272eb80-9df8-11eb-9b16-67b3fea73c6e.png)
5. Notice that following potentially unwanted CSS is added to the page:
``` css
*, ::after, ::before {
    color: #000 !important;
    text-shadow: none !important;
    background: 0 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Comments

So far as I can tell, this CSS is not part of the pandoc template. Instead, it appears to be added by the option --include-in-header "~\AppData\Local\Temp\RtmpqekYCZ\rmarkdown-str284036ee5fd4.html" which is automatically passed to pandoc by R Markdown. However, I can't work out where this file is coming from, or how to disable it.

[cderv]

It is some CSS rules that comes from Bootstrap: https://github.com/rstudio/rmarkdown/blob/9036f864d989d06b966c99494521e521b479c700/inst/rmd/h/bootstrap/css/bootstrap.css#L190-L200

Default template in rmarkdown uses Bootstrap so that is why you get this in your result document and you don't get that with Pandoc only.

For only removing bootstrap, you can use theme = NULL and customize only with CSS your document. Some features of html_document relying on bootstrap won't work though

Also, you can use your own template with rmarkdown too using the template argument. template = NULL will use the default Pandoc one but you'll loose some feature. (https://pkgs.rstudio.com/rmarkdown/reference/html_document.html#templates)

[ghost]

Thanks. What I'm trying to do is customise the default html_document. I've made a customised copy of html_template in my project directory. Is there a way to use a customised copy of the bootstrap theme?

[cderv]

I've made a customized copy of html_template in my project directory. Is there a way to use a customised copy of the bootstrap theme?

Unfortunately I am not sure to follow what this implies ? What is html_template ?

What are you trying to customize exactly ?

The theme only ? Like changing CSS ? Or trying to create a new format with a different layout and custom element ? Do you want Bootstrap or not ?

If you want advice and share with other that may have experience in customizing HTML output for R Markdown, it could be a good idea to ask on https://community.rstudio.com - there is a broad community there and surely lots of ideas.

You can look also at other existing packages that offers custom format. Some examples: https://bookdown.org/yihui/rmarkdown/community.html

[ghost]

Thanks. Sorry for being unclear.

In an R Markdown document, the default template is ~\Documents\R\win-library\4.0\rmarkdown\rmd\h\default.html. This will be used if I render an R Markdown html_document without specifying a template explicitly.

---
output: html_document
---

# Test

I can customise this template by making a copy in my local directory, and changing the yaml to:

---
output: html_document
  template: custom_template.html
---

Is there a way that I can make a copy of the bootstrap theme in my local directory, and point R Markdown to my customised copy of Bootstrap?

[cderv]

Oh I see. You can deactivate the loading of bootstrap by using theme: NULL - this will not insert the dependency in the template and then you can provide your own in your template.

To customize bootstrap, you should have a look at the new bslib package. https://rstudio.github.io/bslib/ It will contains all the tools to customize bootstrap completely (using sass variables). This is also compatible with R Markdown and you would be able to provide a .scss or .sass file that would customize bootstrap as you need. You should have a look if you are interesting in doing more with bootstrap than changing the included bootswatch theme.

In the future, we will aim also to create a theming feature that is compatible across different formats.

Otherwise, you need to create the dependency you need and add the JS and CSS into your new HTML template. Directly in the HTML or using htmltools and htmlDependency.

So yes you can also create your own HTML format - you can look at all the other package that does offer custom format (like distill for example, or minidown)

There is no issue or missing feature in rmarkdown I believe. Can we close this issue ?

If you need to share experience with the community, https://community.rstudio.com is a great place.

[ghost]

Thanks for your help @cderv! Closing this now.

[github-actions[bot]]

This old thread has been automatically locked. If you think you have found something related to this, please open a new issue by following the issue guide (https://yihui.org/issue/), and link to this old issue if necessary.