[Bug] Importing reveal js called print style breaking

[Mister-Hope]

This is caused by https://github.com/hakimel/reveal.js/blob/master/css/print/paper.scss

Even if I embed reveal.js in a page, it will override ALL THE BASIC ELEMENTS with !important, e.g.:

reveal.js/css/print/paper.scss

Lines 8 to 9 in 4fe3946

	@media print {
	html:not(.print-pdf) {

reveal.js/css/print/paper.scss

Lines 39 to 58 in 4fe3946

	body, p, td, li {
	font-size: 20pt!important;
	color: #000;
	}
	h1,h2,h3,h4,h5,h6 {
	color: #000!important;
	height: auto;
	line-height: normal;
	text-align: left;
	letter-spacing: normal;
	}
	/* Need to reduce the size of the fonts for printing */
	h1 { font-size: 28pt !important; }
	h2 { font-size: 24pt !important; }
	h3 { font-size: 22pt !important; }
	h4 { font-size: 22pt !important; font-variant: small-caps; }
	h5 { font-size: 21pt !important; }
	h6 { font-size: 20pt !important; font-style: italic; }

This means that output will have

@media print {
  html:not(.print-pdf) body {
      font-size: 20pt!important;
  }

  html:not(.print-pdf) h1 { 
    font-size: 28pt !important;
   }
}

So a normal page without reveal js like this:

Becomes like this just because reveal style is imported:

(I embed a reveal.js in page:)

---

My confusion is why is that file needed as users are already asked to print with ?print-pdf?

Also does anyone have the same confusion with me why reveal.js tries and why it should use high priority selectors and !important to force overriding default tag style?

[Mister-Hope]

I debug this for nearly 80mins to find out why style is breaking then I found out it's reveal's problem, that hurts beacuse it's really hard to debug with @print selectors as I can not debug them in devtools.

[Mister-Hope]

HI @hakimel I saw your activity on this project. Could you check this issue when you have time? I would like to send prs to fix, but I need to know:

why reveal.js tries and why it should use high priority selectors and !important to force overriding default tag style?

And whether it's ok for me to remove these styles or limit inside .reveal class.

I do think that this issue is important for documentation sites. You can try to print any page with ctrl + p on project website, e.g.: https://revealjs.com/keyboard/ The style looks really bad.

[hakimel]

Thanks for pointing this out. Definitely not desirable that the print styles bleed into the rest of the page.

I've revised this now so that all print styles are scoped to .reveal. The only styles that are still set on the html level are required to ensure overflow is visible otherwise printing won't work.

[Mister-Hope]

Hi, can we release a new version? @hakimel

[Mister-Hope]

@hakimel Hello? When can I receive a new version having this fixed?