Is it possible to render pdf and HTML documents with R Markdown where the body text is automatically in two columns throughout the whole document?
I am using the code below to generate the PDF. It renders a pdf with no problems, but when I add classoption: twocolumn it throws the following error.
Error in (function (toc = FALSE, toc_depth = 2, number_sections = FALSE, :
unused argument (classoption = "twocolumn")
Calls: <Anonymous> -> create_output_format -> do.call
Execution halted
---
title: "My Document"
output:
pdf_document:
classoption: twocolumn
---
<style type="text/css">
body{ /* Normal */
font-size: 14px;
}
td { /* Table */
font-size:10px;
}
h1.title {
font-size: 30px;
color: Black;
}
h1 { /* Header 1 */
font-size: 18px;
color: Black;
}
h2 { /* Header 2 */
font-size: 14px;
color: DarkBlue;
}
</style>
# Introduction to my document
****************
I would like all this text to be in two columns.
to layers with carbon the stagnant water becomes, the surface layers with the ocean can take uptake from below, the harder it is for winds to mix the amount of carbon dioxide. The stagnant water becomes.
carbonate-rich water also supports fewer phytoplankton, and carbonate-rich water also supports fewer phytoplankton, and carbon dioxide up.m below, the harder it is for winds to mix the harder it is for winds to mix the stagnant water also supports fewer phytoplankton, and carbon the harder it is for winds to mix the deeper layers with carbon dioxide.
Related
I'm trying to convert a set of slides written in Rmarkdown and outputted in HTML with xaringan::moon_reader into PDF, and I used pagedown::chrome_print() to convert to PDF.
The issue is, the converted PDF has its title page missing as well as random pages throughout the slides. I tried to manually print the HTML file with Chrome and other browsers in an attempt to save to PDF, but they have the same missing pages.
I'm open to any advice on how to export to PDF without any pages missing. It doesn't have to be chrome_print() as long as the slides can be exported in PDF successfully.
Here's a reproducible pseudocode of the slides:
---
title: document_title
author: author_name
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts]
lib_dir: libs
nature:
ratio: '4:3'
highlightStyle: github
highlightLines: true
countIncrementalSlides: false
editor_options:
chunk_output_type: console
---
count: false
<style>
.center2 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
pre.sourceCode {
max-height: 200px;
overflow-y: auto;
}
/*
.remark-slide-number {
position: inherit;
}
.remark-slide-number .progress-bar-container {
position: absolute;
bottom: 0;
height: 4px;
display: block;
left: 0;
right: 0;
}
.remark-slide-number .progress-bar {
height: 100%;
background-color: blue;
}
*/
</style>
# only using two backticks for codechunks in rmd to escape ending the codeblock on stackoverflow
``{css, echo=FALSE}
#media print {
.has-continuation {
display: block !important;
}
}
``
``{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
library(knitr)
opts_chunk$set(
fig.align="center",
fig.height=4,
dpi=300,
cache=T ,
echo=F
)
library(tidyverse)
library(hrbrthemes)
library(fontawesome)
``
count: true
# Slide 1
</br>
.font130[
1. Content 1
2. Content 2
]
---
count: false
# Slide 2
</br>
.font130[
Content for slide 2
]
---
``{r gen_pdf, include = FALSE, cache = FALSE, eval = TRUE}
pagedown::chrome_print("slides.html", output = "slides.pdf")
``
We have count:true and count: false throughout the documents but it doesn't seem to relate to whether the page is missing or not.
Thank you so much in advance!
I've figured out what went wrong with my slides for anyone having the same issue:
So in the end it does have something to do with count: true or count: false
count: true indicates the start of a page, but count: false adds on new information on the same page on html format, but all the intermediate results are covered by whichever section that is your last count: false section.
An example would be :
---
count: true
Content 1
---
count: false
Content 2
---
count: false
Content 3
In this case Content 1 would be the start of a new page and everything will show up fine in .html, but on the pdf it was converted to, only Content 3 will show up, and not Content 1 or 2.
Title page was set to count: true automatically, but if you have a count: false section right after it, it will not show up.
Hopefully this explains it!
When using the metropolis theme in xaringan (RStudio 1.2.1070)
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts]
I wish to have a smaller font for the title of each slide. If I use h1 for a slide title i.e.
---
# The title of this slide
content
it works as expected, but if I try to use h2 i.e.
---
## The title of this slide
content
the text appears in the body of the slide and not the banner.
Suggestions?
Update
Thanks for the prompt answer Martin. I modified your suggestion slightly.
Including:
.remark-slide-content.hljs-default {
border-top: 40px solid #23373B;
}
adds the border to the title slide (which I didn't want).
For me, just adding this works fine:
<style>
.remark-slide-content > h1 { font-size: 35px; margin-top: -88px; }
</style>
Nevertheless, I must say my original question about using ## was prompted by the entry on xaringan Presentations in R Markdown: The Definitive Guide https://bookdown.org/yihui/rmarkdown/xaringan-format.html where it states:
7.3.1 Slides and properties
Every new slide is created under a horizontal rule (---). The content
of the slide can be arbitrary, e.g., it does not have to have a slide
title, and if it does, the title can be of any level you prefer (#,
##, or ###).
Try the following:
---
title: Test
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts]
---
<style>
.remark-slide-content.hljs-default {
border-top: 40px solid #23373B;
}
.remark-slide-content > h1 {
font-size: 20px;
margin-top: -55px;
}
</style>
---
# The title of this slide
content
I guess you have to play around with the settings to achieve exactly the layout you want.
I was trying to build myself a portfolio site. When I thought I was about to finish building the basic template, the margin and media queries stuff totally drove me crazy.
Here is my temporarily hosted domain, www.kenlyxu.com/portfolio_new
I made the pages fit to whatever browser size by using
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
I'm trying to make 10px margin on all side and on every page so that I use this container.
#thecontainer {
margin: 10px;
background-color: #f29e28;
height: 100%;
width: 100%;
}
#workcontainer {
margin: 10px;
background-color: #f29e28;
width: 100%;
}
I hope the end result would be like orange background with white margins on all sides. When seeing my site on the desktop, the margin-right and margin-bottom not showing. They only show when I use width: 98.5%;
Also, the orange background color should expand according to the size of browser. On the iPhone 5 portrait view, the orange background does not extent the bottom part. I tried to use some standard media queries for it, but I don't know what values should I give to each of the mobile devices.
Try
Position:fixed;
in
# thethecontainer
now your code looks like
#thecontainer {
margin: 10px;
background-color: #f29e28;
height: 98%;
position:fixed;
width: 98.5%;
}
Foundation is cool, but i wanna ask one thing, how can we change size of the text when we for different devices with different scree res.
thanks.
There is no direct support for that in Foundation 5.
You will have to use media queries for scaling your font sizes for different resolutions. There are many ways to implement that.
One possible approach is to specify font-size on container element in pixels and then use ems for sizes of child elements.
.homepage {
font-size: 16px;
#media #{$large-up} {
font-size: 20px;
}
}
.homepage p {
font-size: 1em;
}
.homepage small {
font-size: 0.75em; /* 12px on small and medium screens, 15px - on large */
}
Other approaches here Responsive Font Size
Here's what I need to pull off in CSS (it's terribly ugly, but it shows my problem well as an example):
We've got a gradient over text with a drop shadow on a background that has a slight gradient.
I've tried every method I could find.
This method won't work with a text-shadow.
The PNG overlay method won't work because I don't have a solid color background.
This method won't work because it requires me putting the text string in the CSS and my text will be dynamic.
So, I'm stumped.
It doesn't need to work in every browser (I'm fine with ignoring IE, if necessary). If it only works in Webkit browsers, that'd be fine as well.
That should be the answer:
HTML
<h1><span>Filthy</span></h1>
CSS
h1 {
position: relative;
font-size: 300px;
line-height: 300px;
text-shadow: -3px 0 4px #006;
}
h1 span {
position: absolute;
top: 0;
z-index: 2;
color: #d12;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
h1:after {
content: attr(cssFilthyHack);
color: #000;
text-shadow: 3px 3px 1px #600;
}
JS
$('h1').each(function(i, e){
var el = $(e);
el.attr('cssFilthyHack', el.find('span').html());
});
The important thing is to use content: attr(cssFilthyHack); to extract the text from the h1 text. You could add the text a second time in html like this
<h1 cssFilthyHack="Filthy"><span>Filthy</span></h1>
Or you use the js jQuery method to do this automatically.
UPDATE
Replaced the a tag with span, added js function.
See the example here in action: http://jsfiddle.net/alligator/Gwd3k/