How do I include a PDF in a Quarto website, so it shows the whole page?

[vaclavstepan]

Description

I am trying to make a Quarto Book render as HTML and include PDF slides in some of the pages.
As PDF can be included in a web page, I started with:

![Slides](dir/slides.pdf)

This makes a small window, where the PDF opens (however, it's quite unusable for anything).
As it's basically a figure, next I tried

![Slides](dir/slides.pdf){width=100%}

This makes a column wide PDF, but with still the same height (unusable).

Forcing dimensions with:

![Slides](dir/slides.pdf){width=640px height=480px}

does indeed work, but only as long as the slides are 4:3 and the reader is not on Windows, where toolbar show on top of the slides.

So the question is: How can one include a PDF slide set in a Quarto web page in a way, that the PDF would be shown as a whole single page, preferably without the Acrobat toolbar?

[mcanouil]

Please share a small reproducible example of your use cases, for example by sharing a Git repository.

[vaclavstepan]

Ok, please see https://github.com/vaclavstepan/quarto-cli-7918/.

The goal is to have page per lecture in a course material, showing and pointing to a presentation for the lecture, where appropriate.

[mcanouil]

PDF is not a web component.
You'll always need a plugin to read it inside a web page, such as the Acrobat one.
You should search for that elsewhere as it is not related to Quarto.

For instance https://duckduckgo.com/?q=display+PDF+inside+html.
This is not really about Quarto but about HTML technologies.

```{=html}
<embed src="pdf/{{< meta pdf >}}.pdf" width="800px" height="2100px" />
```

*The above will obviously be discarded for PDF output.

I am trying to make a Quarto Book render as a PDF and include PDF slides in some of the pages.

Very confusing sentence, you cannot include a PDF inside a PDF, you can only include a link to a PDF. This is not a Quarto issues also.

[vaclavstepan]

Hi Mickaël,

Thank you for spotting the error in the formulation. You are right and as you already know from the example, the book is rendered in HTML. I’ve corrected the original post.

Yes, setting the dimensions manually is certainly possible, even in a simpler way, as I show in the original post.

Still, I think it is a Quarto problem. Quarto does not complain, when user asks it to include a PDF in the output using the ![text](file) and produces HTML that will show it in browsers that can show PDF (natively or via plugin), disregarding aspect ratio of the file.

What I see as expected behaviour is that you include a PDF using the image inclusion convention, Quarto checks its aspect ratio and when producing the HTML, produces code reflecting properties of the file.

Contrary to your opinion, you can include PDF inside a PDF (for example in TeX by including PDF pages from multiple documents in an output, in Preview on Mac by simply dragging the pages in, or in Affinity Designer by loading multiple PDFs as objects to work with). It has certain requirements and can break things, but generally, it is possible. But I think it’s OK if Quarto can’t do that.

(I’m aware that I can also set the included PDF size using CSS globally, but still, I need to check every PDF and write the relevant code to reflect that it’s A4 portrait, landscape oriented presentation with 4:3 ratio or maybe 16:9. Doable, but inconvenient.)

Vaclav

[mcanouil]

If you don't set dimensions and because PDF are no images, how do you want HTML to rescale or whatever?
Note that this isn't a Quarto thing as you seem to think.

This ![](slides123.pdf) is translated by Pandoc as:

• LaTeX: \includegraphics{slides123.pdf} (note that this is not how to include/embed a PDF inside LaTeX, thus my answer about not being able to include a PDF inside a PDF using this markup)
• HTML: <p><embed src="slides123.pdf" /></p>

You want it full width? set tell that to Pandoc:
![](slides123.pdf){width=100%} will be translated as:

• LaTeX: \includegraphics[width=1\textwidth,height=\textheight]{slides123.pdf}
• HTML:<p><embed src="slides123.pdf" style="width:100.0%" /></p>

What I see as expected behaviour is that you include a PDF using the image inclusion convention, Quarto checks its aspect ratio and when producing the HTML, produces code reflecting properties of the file.

If you don't want that "embed" solution, then look on the internet for iframe or object.

I don't see any bugs here, only described behaviour.
Note that all this comes from Pandoc.

To show you that the plugin has nothing to do with Quarto or even Pandoc.
Let's use "object":

---
title: "quarto-cli-7918"
---

```{=html}
<object data="slides123.pdf" type="application/pdf" width="100%" height="100%" style="min-height:100vh;">
    <p>It appears you don't have a PDF plugin for this browser.
    No biggie... you can <a href="slides123.pdf">click here to
    download the PDF file.</a></p>
</object>
```

Simple Browser without PDF Plugin	Regular browser with PDF plugin

If I remove the style attribute defining height

Here the plugin is still the same but the output is different because the plugin has its own behaviour that is independent of Quarto/Pandoc.

[vaclavstepan]

Thank you for the detailed explanation. I agree, one has to set the style somewhere to get the browser to show whole PDF page correctly. Thank you for the example covering browsers with no PDF display capability.

Note that for TeX output, your command would actually work. If you try to compile the following document in a non-ancient TeX distribution using pdflatex, you'll get a PDF with PDF included. Per default it shows the first page (package options are here). Note that contrary to Quarto HTML output, the aspect ratio is correctly determined.

\documentclass{article}
\usepackage{graphicx} % Required for inserting images

\begin{document}
\includegraphics[width=\textwidth]{slides123.pdf}
\end{document}

I've updated the git repository to generate the PDF as well to show it also works (at least for me) in Quarto.
You are of course right, that the graphicx package has to be loaded for this (but in Quarto, it is).