-
Notifications
You must be signed in to change notification settings - Fork 1
/
example.qmd
79 lines (38 loc) · 2.78 KB
/
example.qmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
---
title: "embedpdf Example"
resources:
- dummy.pdf
---
## Simple Usage
All you really need to give the `pdf` shortcode is the path to the PDF file you want to embed in your Quarto HTML document.
`{{{< pdf dummy.pdf >}}}`
{{< pdf dummy.pdf >}}
## Customization
However, in most cases, you will want to customize the appearance of your embedded PDF object. I have built a few common HTML-based customizations into the `pdf` shortcode for your convenience. However, the most powerful and flexible approach to customization will be to use cascading style sheets or CSS (e.g., by passing the `pdf` shortcode a CSS class). If you are new to CSS, there are some good introductory resources available here and here.
### Embed with width in pixels
`{{{< pdf dummy.pdf width=600 >}}}`
{{< pdf dummy.pdf width=600 >}}
### Embed with width in percent
`{{{< pdf dummy.pdf width=100% >}}}`
{{< pdf dummy.pdf width=100% >}}
### Embed with height in pixels
`{{{< pdf dummy.pdf height=600 >}}}`
{{< pdf dummy.pdf height=600 >}}
### Embed with both width and height
`{{{< pdf dummy.pdf width=600 height=400 >}}}`
{{< pdf dummy.pdf width=600 height=400 >}}
### Embed with 1 px border
`{{{< pdf dummy.pdf border=1 >}}}`
{{< pdf dummy.pdf border=1 >}}
### Embed with CSS class
`{{{< pdf dummy.pdf class=myclass >}}}`
{{< pdf dummy.pdf class=myclass >}}
## Supporting Mobile Browsers
Unfortunately, very few mobile browsers support the rendering of PDF objects and those that do (e.g., Safari on iOS) can often render the object in strange ways (e.g,. stretching and distorting its appearance). I have built an image-based backup option that I recommend for now, and am experimenting with a javascript-based approach that I hope may one day provide full PDF support on mobile.
### Add a backup image
The browser will render the PDF if able but, if not able (e.g., on mobile), it will fallback to rendering the provided image with a hyperlink to download the PDF file. I usually take a screenshot of the PDF file to create this image, but you could use any image you like (e.g., a download button image). For this reason, I provide separate customization arguments for the image.
`{{{< pdf dummy.pdf width=400 height=600 border=1 image=dummy.png image_width=400 image_border=1 >}}}`
{{< pdf dummy.pdf width=400 height=600 border=1 image=dummy.png image_width=400 image_border=1 >}}
To see what this will look like on a browser that does support PDF (e.g., during development), you can use `image_force=TRUE`:
`{{{< pdf dummy.pdf width=400 height=600 image=dummy.png image_force=TRUE border=1 image_width=400 image_border=1 >}}}`
{{< pdf dummy.pdf width=400 height=600 image=dummy.png image_force=TRUE border=1 image_width=400 image_border=1 >}}