Print all tabs in a [reveal.js] panel-tabset to PDF

[math-mcshane]

Description

Currently, when you render a Quarto doc to reveal.js and use panel-tabset, switch to "print mode" (e), and print, you only get one tab in the printout. And, from what I can tell, panel-tabset may be unique to Quarto's reveal.js implementation -- panel-tabset doesn't appear in reveal.js issues ¹, and isn't mentioned in the reveal.js documentation.

Often, people viewing a presentation want to take notes directly on the slides. A PDF printout, I've found (in the past with ioslides, too) is generally the best way to get HTML slides into a note-taking app.

Here's a MWE:

---
title: "MWE"
format: 
  revealjs: 
    embed-resources: true
---

## Slide

::: {.panel-tabset}

### Tab A

a

### Tab B

b

:::

And printing usually looks like this:

Previously posted on Posit Forum to crickets, but it's archived now.

Footnotes

1. there is one issue, but it shows code for a Quarto doc. ↩

[mcanouil]

See Quarto: Unleash Dynamic Tabset Navigation & Polished PDF Exports.

[math-mcshane]

@mcanouil it's great that there's command-line solution, but:

1. Most users don't use command line tools, and
2. I barely use command line tools, and I have no idea how to install npm... it looks like I have to register for an account? And to install npm, I have to install nvm and Node.js? This all sounds excessive.

So, given both points, this is still a good feature request.

[math-mcshane]

And, when running the npx command at the very end of the blog post, I get this error for every slide

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.

The slide count is also 134/17 (instead of 46 -- I use a lot of {.incremental} and {.fragment} divs -- these must be the reason I get such an inflated slide count -- get one slide per right arrow)

[mcanouil]

Each fragment is on a separate slide, thus the increased number.

[math-mcshane]

Here's a MWE:

---
title: "Reproducible Quarto Document"
title: "Reproducible Quarto Document"
format:
  revealjs: 
    include-after-body:
      - file: panel-tabset-pdf-export.html
---

## Tabset {.smaller}

:::: {.panel-tabset}

### Lipsum

z

::: {.fragment}

a

:::

### Placeholder

b

::: {.fragment}

x

:::

:::

[mcanouil]

Thanks.

As said, this was not tested/implemented in my JS code, mostly because in my opinion, this should not be a tabset but separate slides, also because this is far from trivial to make such thing work in Reveal.js.
As you have seen now, the whole thing is not really about Quarto, but it's all about JavaScript tweaks while working around Reveal.js itself.

edit: The best I can do is to include the following safety to disable fragments inside tabsets.

<script type="text/javascript" id="panel-tabset-fragments-cleanup">
  Reveal.on("ready", function () {
    const tabsetSlides = document.querySelectorAll(".reveal .slides section .panel-tabset");
    tabsetSlides.forEach(function (tabset) {
      const fragments = tabset.querySelectorAll(".fragment");
      fragments.forEach(function (fragment) {
        fragment.classList.remove("fragment");
      });
    });
  });
</script>

[math-mcshane]

edit: The best I can do is to include the following safety to disable fragments inside tabsets.

Yes, I think that makes sense, at least for printing to PDF. I think this means one could have multiple Quarto profiles. Maybe something like:

1. (Default) .fragment divs progress with key press; tabs require click; printing to PDF has only the first tab in a slide in output
2. Printing: .fragment divs no longer exist; tabs advance with key press; printing to PDF has one tab per slide in output

[mcanouil]

(new thread for visibility, following on https://github.com/orgs/quarto-dev/discussions/13712#discussioncomment-15016447)

I figured out how to get fragments inside tabset while tabs are fragments themselves.

Note

The below JS script make fragments appear on different slides when exporting to PDF (i.e., Reveal.configure({ pdfSeparateFragments: true });), thus increasing the number of slides.

The JavaScript script for Reveal.js:

panel-tabset-pdf-export.html

<!--
# MIT License
#
# Copyright (c) 2025 Mickaël Canouil
#
# Permission is hereby granted, free of charge, to any person obtaining a copy
# of this software and associated documentation files (the "Software"), to deal
# in the Software without restriction, including without limitation the rights
# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
# copies of the Software, and to permit persons to whom the Software is
# furnished to do so, subject to the following conditions:

# The above copyright notice and this permission notice shall be included in all
# copies or substantial portions of the Software.

# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
# SOFTWARE.
-->

<script type="text/javascript" id="panel-tabset-pdf-export">
  (function () {
    const TAB_SELECTOR = "ul.panel-tabset-tabby > li";
    const TAB_LINK_SELECTOR = "ul.panel-tabset-tabby > li a";

    function getTabPanes(tabset) {
      const tabContent = tabset.querySelector(".tab-content");
      return tabContent ? tabContent.children : [];
    }

    Reveal.configure({ pdfSeparateFragments: true });

    Reveal.on("ready", function () {
      const tabsetSlides = document.querySelectorAll(".reveal .slides section .panel-tabset");
      tabsetSlides.forEach(function (tabset) {
        const tabCount = tabset.querySelectorAll(TAB_SELECTOR).length;
        if (tabCount <= 1) return;

        const tabPanes = getTabPanes(tabset);
        let currentIndex = 0;

        for (let i = 0; i < tabCount; i++) {
          if (tabPanes[i]) {
            const fragmentsInPane = tabPanes[i].querySelectorAll(".fragment");
            fragmentsInPane.forEach(function (fragment) {
              fragment.setAttribute("data-fragment-index", currentIndex);
              currentIndex++;
            });
          }

          if (i < tabCount - 1) {
            const fragmentDiv = document.createElement("div");
            fragmentDiv.className = "panel-tabset-fragment fragment";
            fragmentDiv.dataset.tabIndex = i + 1;
            fragmentDiv.setAttribute("data-fragment-index", currentIndex);
            fragmentDiv.style.display = "none";
            tabset.parentNode.appendChild(fragmentDiv);
            currentIndex++;
          }
        }
      });
    });

    Reveal.on("fragmentshown", function (event) {
      if (!event.fragment.classList.contains("panel-tabset-fragment")) return;

      const tabIndex = parseInt(event.fragment.dataset.tabIndex, 10);
      const tabset = Reveal.getCurrentSlide().querySelector(".panel-tabset");
      if (!tabset) return;

      const tabLinks = tabset.querySelectorAll(TAB_LINK_SELECTOR);
      if (tabLinks[tabIndex]) {
        tabLinks[tabIndex].click();
      }
    });

    Reveal.on("fragmenthidden", function (event) {
      if (!event.fragment.classList.contains("panel-tabset-fragment")) return;

      const tabIndex = parseInt(event.fragment.dataset.tabIndex, 10);
      const tabset = Reveal.getCurrentSlide().querySelector(".panel-tabset");
      if (!tabset) return;

      const tabLinks = tabset.querySelectorAll(TAB_LINK_SELECTOR);
      const targetIndex = tabIndex > 0 ? tabIndex - 1 : 0;
      if (tabLinks[targetIndex]) {
        tabLinks[targetIndex].click();
      }
    });

    Reveal.on("pdf-ready", function () {
      const slides = document.querySelectorAll(".reveal .slides section");
      slides.forEach(function (slide) {
        const tabset = slide.querySelector(".panel-tabset");
        if (!tabset) return;

        const fragments = slide.querySelectorAll(".panel-tabset-fragment");
        let activeTabIndex = 0;

        fragments.forEach(function (fragment) {
          if (fragment.classList.contains("visible")) {
            const tabIndex = parseInt(fragment.dataset.tabIndex, 10);
            if (tabIndex > activeTabIndex) {
              activeTabIndex = tabIndex;
            }
          }
        });

        const tabLinks = tabset.querySelectorAll(TAB_LINK_SELECTOR);
        const tabPanes = getTabPanes(tabset);

        tabLinks.forEach(function (link, index) {
          const li = link.parentElement;
          if (index === activeTabIndex) {
            li.classList.add("active");
            link.setAttribute("aria-selected", "true");
            link.setAttribute("tabindex", "0");
          } else {
            li.classList.remove("active");
            link.setAttribute("aria-selected", "false");
            link.setAttribute("tabindex", "-1");
          }
        });

        Array.from(tabPanes).forEach(function (panel, index) {
          if (index === activeTabIndex) {
            panel.classList.add("active");
            panel.style.display = "block";
          } else {
            panel.classList.remove("active");
            panel.style.display = "none";
          }
        });
      });
    });
  })();
</script>

document.qmd

---
title: "Reproducible Quarto Document"
format:
  revealjs:
    incremental: true
    include-after-body:
      - file: panel-tabset-pdf-export.html
---

## New slide {.smaller}

{{< lipsum 1 >}}

## Tabset {.smaller}

:::: {.panel-tabset}

### Lipsum

{{< lipsum 1-1 >}}

### List

- Item 1
- Item 2
- Item 3
  - Subitem 1

### Placeholder

Content before the placeholder.

:::: {.fragment}

{{< placeholder 600 400 >}}

:::

### Lipsum 2

{{< lipsum 2-2 >}}

### Placeholder 2

{{< placeholder 600 400 >}}

:::

## Another slide {.smaller}

![An image]({{< placeholder 900 300>}})


## List

- Item 1
- Item 2
- Item 3
  - Subitem 1

Code is also available in my updated blog post and Quarto Reveal.js extension:

• https://mickael.canouil.fr/posts/2025-04-21-quarto-revealjs-tabset-pdf/
• https://github.com/mcanouil/quarto-revealjs-coeos (>= 1.10.1)

[mcanouil]

cc. @EmilHvitfeldt you might be interested in this.

[EmilHvitfeldt]

makes me wonder if i should make this fragment type more general https://slidecrafting-book.com/fragments#tabset-advance.

right now it needs you to manually put in a block for each advancement you need, but I would imagine we could make it work like .incremental lists

[mcanouil]

I was thinking of this part of you book when I tagged you.