Xaringan: Font-size changes after recent update to remark.js 0.15.0

[ekstroem]

The recent update to remark.js version 0.15.0 has "fixed" a font size issue.

This is propagating to xaringan since the most recent version of the javascript is included automatically through the line:

<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>

In case someone encounters problems with their presentations due to this you can use the old version of remark.js by adding the following line to to YAML:

output:
  xaringan::moon_reader:
    chakra: "https://cdnjs.cloudflare.com/ajax/libs/remark/0.14.0/remark.min.js"

Just including the information here to prevent someone else from spending time tracking this down as well.

---

By filing an issue to this repo, I promise that

• [X] I have fully read the issue guide at https://yihui.org/issue/.
• [X] I have provided the necessary information about my issue.
  
  
  
  • If I'm asking a question, I have already asked it on Stack Overflow or RStudio Community, waited for at least 24 hours, and included a link to my question there.
  
  
  • If I'm filing a bug report, I have included a minimal, self-contained, and reproducible example, and have also included xfun::session_info('xaringan'). I have upgraded all my packages to their latest versions (e.g., R, RStudio, and R packages), and also tried the development version: remotes::install_github('yihui/xaringan').
  
  
  • If I have posted the same issue elsewhere, I have also mentioned it in this issue.
  
  
• [X] I have learned the Github Markdown syntax, and formatted my issue correctly.

I understand that my issue may be closed if I don't fulfill my promises.

[yihui]

Thanks a lot! I changed the bootcss.com URL to cdnjs.cloudflare.com, since the former doesn't seem to be very stable.

BTW, @emitanaka might help fix it later: https://twitter.com/statsgen/status/1219356443754631169 but anyone is welcomed to work on it.

[ekstroem]

Ah damn. Searching twitter would have saved me two hours :o) @emitanaka : let me know if I can do anything to help.

I'll just close this.

[tcgriffith]

Reopened, I think it's better to keep this issue open until the problem gets fully solved

[ekstroem]

Okay ... there are two changes to remarkjs that influence this.

One is that the default font size definition has been moved to the html part of the CSS where it previously was in html.remark-container, body.remark-container.

html {
  font-size: 20px;
}

That means that if a template CSS uses relative font sizing then they will be scaled differently and will be too big now since (AFAIR) the default html font size is 16px.

Also, the definition of the header sizes have been removed from the values below and now defaults to whatever the relative scaling the browser uses.

  h1 { font-size: 55px; }   
  h2 { font-size: 45px; }   
  h3 { font-size: 35px; }

Thus, to fix everything right now would be to include

<style>
 html { font-size: 16px; }
 h1 { font-size: 55px; }    
 h2 { font-size: 45px; }    
 h3 { font-size: 35px; }
</style>

somewhere in the xaringan Rmd file.

Now ... we can of course revert this back to fix the existing slide templates, but perhaps it would be better to force the template creators to redo their template CSS so we can reference remarkjs directly and not having to worry about this in the future. IMO: it would be a better solution if these changes were included in the actual templates. Comments?

[emitanaka]

(My 2 cents) I think it's better to be in the skeleton file since it'll
take a while before all template contributors will add a fix to their
templates. If they don't like the sizing defined (which presuming is the
same as before so shouldn't be an issue), they know probably how to
overwrite it.
Alternatively, pointing to the old remark.js to go back to the old
behaviour could be a patch (although I like it less).

PS: I'm excited to see the development of remark.js is continuing!

[pat-s]

@emitanaka Could you try to avoid adding histories of previous comments into a comment? This bloats the discussion. Thanks :)

[gadenbuie]

I'm in favor of (temporarily) pinning the remarkjs version. It seems uncertain how much of remarkjs is going to change and how affected xaringan will be.

Relatedly: what if xaringan included a copy of remarkjs instead of linking to a CDN by default?

Whether bundled in xaringan or not, having a pinned version of remarkjs gives xaringan maintainers some space to react to upstream changes without having xaringan slides break in the meantime.

[pat-s]

I'm in favor of (temporarily) pinning the remarkjs version.

+1

By doing this, we can also take time to test new versions and add support in xaringan.

In addtions, users could be able to use the latest checkout via an arg in inf_mr() at their own risk.

[gadenbuie]

While it's great to see remarkjs moving forward again, I was just looking at a few recently closed issues in the repo and I think it's reasonable to say that a lot of possibly subtle breaking changes are coming our way.

It would be nice to have a place to record changes as we notice/bump into them. Not all changes are going to be worthy of a GitHub issue, of course. What's the best place for something like this? On GitHub I think the two possible places would be either a mega-issue or a wiki page. What sounds good to you all?

[tcgriffith]

it's an "issue" that should be addressed, so…

[mschilli87]

Note that the root of this issue seems to get reverted soon: https://github.com/gnab/remark/issues/613#issuecomment-578893104

[pat-s]

Good to know. I'd still be in favor of a release driven approach by default with the option for the user to change it on demand.

Let's see what Yihui says after rstudio::conf.

[yihui]

I'm going to close this issue since the "latest" version of remark.js is 0.14.1 again https://github.com/gnab/remark/issues/613#issuecomment-578893104. Thank you all for the input!

I'll continue the discussion about the version in #251.