Pagedown: html_resume right column width has changed

Created on 31 Jan 2019  路  2Comments  路  Source: rstudio/pagedown

If you scroll to the resume example in the pagedown documentation on GitHub and click on the resume, you can see there are a few differences between the linked resume and the previewed one. Most significantly, in my opinion, is that the width of the side column in the linked resume is wider. It seems _too_ wide to me, but that's a matter of taste. If I knew how to adjust it for myself, I would do it! But I don't and since there's a discrepancy in the documentation, I figured I'd submit this as an issue.

To be clear, the linked version is the version that is identical to the .Rmd template in the preview version of RStudio. (I originally created my resume when the example resume was all in the yaml header. That file will no longer knit, so I'm moving it over to the new template style.)

Most helpful comment

Thanks for opening this issue: you're right, the screenshot was taken in an earlier stage of the development and does not reflect the current version.

For now, the only way to modify the right column width is to use a custom CSS file.
_This may change in the future: it should be feasible to introduce YAML parameters in order to adjust some values of the template (see also #41 on the same subject)._

The most simple way to do that is to edit your own copy of the original resume.css file by doing

file.copy(pagedown:::pkg_resource('css', 'resume.css'), 'custom_resume.css')

then open the custom_resume.css file.

You can adjust the width of the side column by modifying three values:

  • the paper right margin
  • the sidebar width
  • the sidebar padding

Paper right margin
You need to modify 2 lines of the CSS file:
https://github.com/rstudio/pagedown/blob/2b46119f4a882aaa3b39e63229b0ce67d0a38f3e/inst/resources/css/resume.css#L3
https://github.com/rstudio/pagedown/blob/2b46119f4a882aaa3b39e63229b0ce67d0a38f3e/inst/resources/css/resume.css#L12

For instance, to get a right margin of 0.1 inch, you have to write:

margin: 1in 0.1in 1in 0.25in; 

and

--margin-right: 0.1in; 

Be aware that there's a bug in Paged.js: a 0 value is not allowed.

Sidebar width
Modify this line:
https://github.com/rstudio/pagedown/blob/2b46119f4a882aaa3b39e63229b0ce67d0a38f3e/inst/resources/css/resume.css#L16

I think you can lower the value to 12rem without any trouble.

Sidebar padding
Modify this line:
https://github.com/rstudio/pagedown/blob/2b46119f4a882aaa3b39e63229b0ce67d0a38f3e/inst/resources/css/resume.css#L21

That's a matter of taste: I don't recommend to lower this value but you can do it.


Finally, use the css parameter of pagedown::html_resume in the YAML header of your Rmd file:

---
title: "Lijia Yu's resume"
author: Lijia Yu
date: "`r Sys.Date()`"
output:
  pagedown::html_resume:
    self_contained: false
    css: custom_resume.css
---

All 2 comments

Thanks for opening this issue: you're right, the screenshot was taken in an earlier stage of the development and does not reflect the current version.

For now, the only way to modify the right column width is to use a custom CSS file.
_This may change in the future: it should be feasible to introduce YAML parameters in order to adjust some values of the template (see also #41 on the same subject)._

The most simple way to do that is to edit your own copy of the original resume.css file by doing

file.copy(pagedown:::pkg_resource('css', 'resume.css'), 'custom_resume.css')

then open the custom_resume.css file.

You can adjust the width of the side column by modifying three values:

  • the paper right margin
  • the sidebar width
  • the sidebar padding

Paper right margin
You need to modify 2 lines of the CSS file:
https://github.com/rstudio/pagedown/blob/2b46119f4a882aaa3b39e63229b0ce67d0a38f3e/inst/resources/css/resume.css#L3
https://github.com/rstudio/pagedown/blob/2b46119f4a882aaa3b39e63229b0ce67d0a38f3e/inst/resources/css/resume.css#L12

For instance, to get a right margin of 0.1 inch, you have to write:

margin: 1in 0.1in 1in 0.25in; 

and

--margin-right: 0.1in; 

Be aware that there's a bug in Paged.js: a 0 value is not allowed.

Sidebar width
Modify this line:
https://github.com/rstudio/pagedown/blob/2b46119f4a882aaa3b39e63229b0ce67d0a38f3e/inst/resources/css/resume.css#L16

I think you can lower the value to 12rem without any trouble.

Sidebar padding
Modify this line:
https://github.com/rstudio/pagedown/blob/2b46119f4a882aaa3b39e63229b0ce67d0a38f3e/inst/resources/css/resume.css#L21

That's a matter of taste: I don't recommend to lower this value but you can do it.


Finally, use the css parameter of pagedown::html_resume in the YAML header of your Rmd file:

---
title: "Lijia Yu's resume"
author: Lijia Yu
date: "`r Sys.Date()`"
output:
  pagedown::html_resume:
    self_contained: false
    css: custom_resume.css
---

Excellent. Thanks for the reply.

Was this page helpful?
0 / 5 - 0 ratings