quarto-dev / quarto-cli

Open-source scientific and technical publishing system built on Pandoc.
https://quarto.org
Other
3.96k stars 326 forks source link

embed-resources breaks title-slide-attributes in revealjs #7221

Open jakubkovac opened 1 year ago

jakubkovac commented 1 year ago

Bug description

Not sure if this is a quarto bug or revealjs bug. Using both title-slide-attributes and embed-resources/self-contained breaks the visuals of the presentation, shows title on all the slides and the first 2 slides get combined.

Steps to reproduce

Changin embed-resources from false to true breaks both the visuals and also the 2 slides are combined into one.

---
title: "Test Presentation"
format: 
  revealjs:
    embed-resources: false
    title-slide-attributes: 
      data-background-image: "https://placeholder.pics/svg/100, https://placeholder.pics/svg/100,https://placeholder.pics/svg/100, https://picsum.photos/id/870/800/600?grayscale"
      data-background-size: 100px, 100px, 100px, cover
      data-background-position: "2% 98%, 50% 98%, 98% 98%, center"
editor: source
---

## Second slide
something something

Expected behavior

embed-resources: true should not break other things.

Actual behavior

No response

Your environment

Quarto check output

Quarto 1.4.418
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.8: OK
      Dart Sass version 1.55.0: OK
      Deno version 1.33.4: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.4.418
      Path: C:\Users\jakub.kovac\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: v2023.05
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: C:\Users\jakub.kovac\AppData\Roaming\TinyTeX\bin\windows\
      Version: 2023

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....(None)

      Unable to locate an installed version of Python 3.
      Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........OK
      Version: 4.3.1
      Path: C:/Users/jakub.kovac/AppData/Local/Programs/R/R-4.3.1
      LibPaths:
        - C:/Users/jakub.kovac/AppData/Local/Programs/R/R-4.3.1/library
      knitr: 1.44
      rmarkdown: 2.25

[>] Checking Knitr engine render......OK
mcanouil commented 1 year ago

Possibly related to:

cderv commented 1 year ago

Yes definitely related. thanks !

maxim-h commented 2 months ago

Sorry if this only adds to the confusion. But I recently encounter this problem while revisiting a presentation I've made last year.

The issue seems to be the same.

title-slide-attributes:
        data-background-image: imgs/image.svg
        data-background-size: contain
        data-background-opacity: "0.5"

Is ignored if embed-resources: true. Also with some inline images like ![](imgs/logo.svg){.center} the .center css style is ignored only when embed-resources: true

The weird part is that I could swear that as of 2023.05.23 it actually worked as expected and didn't cause any problems. So considering the age of the Pandoc issue it's hard to pin it only on it. Perhaps quarto used Pandoc with some other options back then?

The solution to my problem was to convert all SVG images to PNG. Then it all works fine.

My quarto version is 1.5.56.

Addendum:

I've checked now with quarto v1.4.80 (latest before I made the original presentation). It doesn't have this problem. All SVGs are rendered correctly even with embed-resources:true.

Also with 1.4.557 (latest release in 1.4) the SVGs are already broken, but in different ways from 1.5.56:

cderv commented 2 months ago

@maxim-h Can you share a minimal example of your document that works with 1.4.557 and don't work with 1.5 ? thank you

maxim-h commented 2 months ago

Sure, @cderv .

Although I wouldn't say that 1.4.557 "works". 1.4.80 works for me.

So, something like that:

---
title: "My great presentation"
logo: imgs/renv.svg
format:
  revealjs:
    title-slide-attributes:
        data-background-image: imgs/renv.svg
        data-background-size: contain
        data-background-opacity: "0.5"
    theme:
      dark
css: style/styles.css
---

# First slide

- inline SVG ![](imgs/drake.svg){.center}
- Other stuff
- Reuse logo SVG ![](imgs/renv.svg){.center}

The style/styles.css defines just the .center:

.center{
  margin: 0!important;
  height: 40px;
  width: 40px;
}

I'm not sure If I should send you the HTML outputs. They're about 4Mb.

But visually:

1.4.80 creates 2 slides like I want it to:

image

image

1.4.557 creates only 1 slide that looks like this:

image

1.5.56 creates only 1 slide that looks like this:

image

Let me know if you want all the files with the HTML output.