class: center, middle, inverse, title-slide # pagedown: Creating Beautiful PDFs ## with R Markdown + CSS + Your Web Browser ### <a href="https://yihui.org">Yihui Xie</a> and <a href="https://github.com/RLesur">Romain Lesur</a> ### 2019/01/18 @ rstudio::conf, Austin, TX --- class: center <!-- I have created and co-authored several *down packages like rmarkdown, bookdown, blogdown, ... I'm kind of responsible for a lot of things "down". Today I'll introduce a new member in the R Markdown ecosystem. --> # Status: experimental  --- # Finally we can throw away LaTeX and Word? -- .center[] -- ## Not yet... --- class: middle # [In HTML and the Web I trust](https://yihui.org/en/2018/07/in-html-i-trust/) ??? HTML only requires a web browser, and almost everyone has a browser. It is easy to embed interactive content and rich media on web pages. Also easier to read and parse HTML pages than PDF (e.g., tables). HTML/CSS will catch up with LaTeX in typesetting, but it will be difficult for LaTeX to catch up with other aspects of HTML, such as interactivity. It is such a shame that we put so much emphasis on appearance: https://yihui.org/en/2017/12/formatting-papers/ --- # Installation You can install from CRAN (an initial version has been released), but this package is only two months old. You are recommended to install [from Github](https://github.com/rstudio/pagedown): ```r remotes::install_github('rstudio/pagedown') ``` This package requires Pandoc 2.x, which is currently bundled in RStudio 1.2.x (you may install the [preview version of RStudio](https://www.rstudio.com/products/rstudio/download/preview/)). Google Chrome or Chromium is recommended to view and print HTML pages generated from this package. --- class: bottom background-image: url(https://user-images.githubusercontent.com/163582/51348168-924d3d80-1a67-11e9-913d-f8b54dfa9235.png) background-size: 50% background-position: 100% 0% # Usage For RStudio users, you can create new R Markdown documents via: File -> New File -> R Markdown -> From Template (find **pagedown** templates in the list). For those who don't use RStudio, you may find the example document "skeleton.Rmd" in the [rmarkdown/templates directory](https://github.com/rstudio/pagedown/tree/master/inst/rmarkdown/templates) of the package. --- # Preview HTML / Print to PDF For "complicated reasons", the most reliable way to preview a **pagedown** document is through the RStudio addin "[Infinite Moon Reader](https://bookdown.org/yihui/rmarkdown/xaringan-preview.html)", or equivalently, ```r if (!requireNamespace("xaringan")) install.packages("xaringan") xaringan::inf_mr("your-document.Rmd") ``` To generate a PDF, you are recommended to open the HTML page in Chrome and print it to PDF there. This R function might work in some cases (will be improved in future): ```r pagedown::chrome_print("output.html") ``` --- class: center, middle, inverse # Output Formats and Examples --- # Paged HTML documents Based on [paged.js](https://gitlab.pagedmedia.org/tools/pagedjs), a JS library to implement the W3C working draft "Paged Media Properties for CSS", because no web browsers support paged media at the moment.^* ```yaml output: pagedown::html_paged: css: ["default-fonts", "default-page", "default"] ``` .footnote[[*] Other implementations exist, but often exist as standalone software packages, such as [Prince](https://www.princexml.com) and [weasyprint](https://weasyprint.org). Paged.js made it possible to view paged media in a web browser.] --- class: center, bottom background-image: url(https://user-images.githubusercontent.com/163582/47673682-58b11880-db83-11e8-87fd-b5e753af7288.png) background-size: contain # https://pagedown.rbind.io --- # Business card .pull-left[ ```yaml --- title: "President of RStudio, Inc." author: "Tareef Kawaf" output: pagedown::business_card: logo: "https://www.rstudio.com/wp-content/uploads/2016/09/RStudio-Logo-Blue-Gray-250.png" --- ``` ```md +1 844-448-1212 info@rstudio.com www.rstudio.com @rstudio ``` ] .pull-right[  ] --- # Resume ```yaml --- title: "Someone's resume" author: "Your Name" output: pagedown::html_resume --- ``` --- ```markdown Aside ==================================== Picture, etc. Contact info ------------------------------------ Email, phone number, ... Skills ------------------------------------ - One - Two - Three Disclaimer ------------------------------------ A footer in the sidebar. ``` --- ```markdown Main ==================================== Your Name {#title} ------------------------------------ Arbitrary content. Education {data-icon=graduation-cap} ------------------------------------ ### University One Title Location Year Arbitrary content ### University Two ... ``` --- class: center, bottom background-image: url(https://user-images.githubusercontent.com/163582/46879762-7a34a500-ce0c-11e8-87e3-496f3577ff05.png) background-size: contain # https://pagedown.rbind.io/html-resume/ ??? This is a real resume. If you are looking for a PhD student with strong computing skills and knowledge in bioinformatics, you may consider Lijia Yu. --- # Poster ```yaml output: - pagedown::poster_relaxed - pagedown::poster_jacobs ``` --- class: center, bottom, inverse background-image: url(https://user-images.githubusercontent.com/163582/47672385-e12dba00-db7f-11e8-92de-af94d5bab12f.jpg) background-size: contain # https://pagedown.rbind.io/poster-relaxed/ ??? Borrowed from ReLaXed. --- class: center, bottom, inverse background-image: url(https://user-images.githubusercontent.com/163582/49780277-7b326780-fcd3-11e8-9eb6-69e46292158c.png) background-size: contain # https://pagedown.rbind.io/poster-jacobs/ ??? I wrote the CSS from scratch. It took me a couple of hours after my little kids went to bed on a weekend. The total number of lines of code is a little over 100. My favorite part of the CSS is the lines under section titles (which are essentially ellipse masks on regular lines). --- # Letter ```yaml --- title: "A letter of recommendation for Emi Tanaka" author: "Yihui Xie" output: pagedown::html_letter --- ``` --- ```md ::: from Yihui Xie In the Middle of Nowhere Omaha, NE 68022 Email: xie@yihui.org Homepage: https://yihui.org ::: Hiring Manager School of Ninja, Hacker's University 404 Not Found Road, Undefined 0x1234, NA ::: date December 32, 2018 ::: Dear Hiring Manager, It is my honor and pleasure to write a letter of recommendation for Dr. Emi Tanaka, a great hacker in my eyes... ``` --- class: center, bottom, inverse background-image: url(https://user-images.githubusercontent.com/163582/47872372-61e8f200-dddc-11e8-839b-d8e8ef8f51eb.png) background-size: contain # https://pagedown.rbind.io/html-letter/ --- class: fullscreen <iframe src="https://pagedown.rbind.io/html-letter" style="width: 100%; height: 100%; border: none;"></iframe> --- background-image: url(gif/10yearsago.jpg) background-size: contain ??? Despite of the advances in technology, we are rarely excited now. Isn't that sad? --- # Chapman & Hall/CRC books ```yaml --- title: "An Awesome Book" author: "Your Name" output: pagedown::book_crc --- ``` --- class: center, bottom, inverse background-image: url(https://user-images.githubusercontent.com/163582/51346450-4b5d4900-1a63-11e9-8f22-dc632ab0b06b.png) background-size: contain # Reproducing the bookdown book with HTML/CSS --- class: center, middle, inverse # Jan de Leeuw's dream in 1995 Jan de Leeuw and Katharine Mullen, [The Journal of Statistical Software: Past, Present, and Future.](http://gifi.stat.ucla.edu/janspubs/2014/notes/deleeuw_mullen_U_14.pdf) useR! 2014. --- ``` Date: Tue, 5 Sep 1995 16:56:12 -0700 Sender: Stat-l Discussion List From: Jan Deleeuw Organization: UCLA Center for Statistics Subject: Journal of Statistical Software Proposal: Journal of Statistical Software ... My proposal is to create a journal that is (a) electronic and freely available, (b) done in HTML (using Postscript or GIF where necessary), (c) interactive, where possible, (d) peer reviewed. ... If I get generally positive reactions, I will start creating an editorial board, and I will start making room in our WWW. ``` ??? 1995\. That was only a few years after I learned how to put on my pants by myself and stopped wetting my bed at night, and a few years before I first saw a computer. --- class: middle, inverse ## (b) done in HTML (using Postscript or GIF where necessary), -- # [Yes, **pagedown** and paged.js!](https://github.com/rstudio/pagedown) ^* .footnote[[*] No need to use Postscript or GIF] --- class: middle, inverse ## (c) interactive, where possible, -- # [Yes, HTML widgets and Shiny apps!](https://bookdown.org/yihui/rmarkdown/interactive-documents.html) --- ### One of these is a web page, and one is PDF generated from LaTeX. Guess which is which? .pull-left[  ] .pull-right[  ] --- class: center, middle, inverse # [Civilization and Its Discontents](https://en.wikipedia.org/wiki/Civilization_and_Its_Discontents) ### Sigmund Freud, 1930 ??? Let me digress a bit in this technical talk, and talk about something non-technical, because I feel it is important. Last year I read this book by Freud, and it heavily influenced me. --- class: center, middle # PDF and Its Discontents -- # Typesetting and Its Discontents -- # Journal Publication and Its Discontents --- > The primary friction [between civilization and the individual], he asserts, stems from the individual's quest for **instinctive freedom** and civilization's contrary demand for **conformity and repression of instincts**. > [...] Civilization is built out of wish-fulfillments of the human ideals of **control**, **beauty**, **hygiene**, **order**, ... .right[[via Wikipedia](https://en.wikipedia.org/wiki/Civilization_and_Its_Discontents)] --- > [...] I can at least listen without indignation to the critic who is of the opinion that **when one surveys the aims of cultural endeavour and the means it employs**, one is bound to come to the conclusion that **the whole effort is not worth the trouble**, and that the outcome of it can only be a state of affairs which **the individual will be unable to tolerate**. .right[--- from the last paragraph of the book] --- class: center, middle, inverse ## Maybe the whole effort is just not worth the trouble. -- ## [We become what we behold. We shape our tools and then our tools shape us.](https://mcluhangalaxy.wordpress.com/2013/04/01/we-shape-our-tools-and-thereafter-our-tools-shape-us/) -- ## Sometimes I feel really confused. ??? When you feel confused, you may observe what little kids do and hear what they say, because their mind has not been "polluted" by the so-called civilization yet. --- class: middle ## My older son (3.5yr old) watched my talk at the last rstudio::conf as I flossed his teeth last Saturday. After he finished watching it, his only comment was -- > ## "I want to watch Blippi." --- background-image: url(https://user-images.githubusercontent.com/163582/51097651-35ae0200-178b-11e9-9f33-c338316220b3.jpg) background-size: contain ??? In case you don't know Blippi, this is him and his garbage truck. I didn't know him until I started brushing my son's teeth. I thought my last year's talk was awesome. --- class: middle ## Think about some journal typesetting guidelines... -- ### `\code`, -- `\samp`, -- `\preformatted`, -- `\kbd`, -- `\var`, -- `\env`, -- `\option`, -- `\command`, -- `\file`, -- `\dfn`, -- `\strong`, -- `\pkg`, -- `\CRANpkg`, -- `\BIOpkg`, -- `\ctv`, -- `\proglang`, -- `\url`, -- `\email`... -- ## Are they really important? I really don't know. -- I doubt so. ??? We are so good at building walls (even better than Trump) and so bad at building bridges. We have built so many walls that we have probably forgotten our own Blippi. Why do we write journal papers, books, letters, resumes, and posters? --- # Will Markdown + CSS save us? -- ## Maybe. Because Markdown is limited. I believe it's good to have constraints.^* .footnote[[*] [See the only one bookdown FAQ.](https://bookdown.org/yihui/bookdown/faq.html)] --- class: center # Will CSS really save us?  ??? Who causes more trouble? Humans, or technology? In terms of working, the biggest tragedy is not that people are lazy or don't work. It is that people working extremely hard on trivialities. --- class: center, middle ## R package: <https://github.com/rstudio/pagedown> ## Slides: <http://bit.ly/pagedown>