class: center, middle, inverse, title-slide # The fun with CSS and JavaScript, joined by the simplicity of Markdown ## pagedown and rolldown ### <a href="https://yihui.org">Yihui Xie</a>, RStudio ### 2019/10/10 @ Stat Graphics Group Meeting, ISU --- class: center # 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/ --- > "Our results suggest that scientific formatting represents a loss of 52 hours, costing the equivalent of US$1,908 per researcher per year." > --- LeBlanc et. al: [Scientific sinkhole: The pernicious price of formatting](https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0223116) --- # Installation Either the CRAN version or Github version is okay. ```r remotes::install_github('rstudio/pagedown') ``` This package requires Pandoc 2.x, which is currently bundled in RStudio 1.2.x. 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. Or if you want to automate it: ```r pagedown::chrome_print("output.html") # or output.Rmd ``` --- 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 ## The trouble is always human, not technology. --- 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. --- ## rolldown - Storytelling with JS libraries (currently only supports Scrollama) - Github repo: https://github.com/yihui/rolldown --- ## Fun with JavaScript - https://yihui.shinyapps.io/voice/ - https://yihui.shinyapps.io/face-pi/ --- class: center, middle # Thank you! ## Contact: https://yihui.org ## Slides: https://bit.ly/isu-pagedown