如何使用rmarkdown在ioslides演示文稿中制作可滚动幻灯片 [英] How to make scrollable slides in an ioslides presentation with rmarkdown

问题描述

我正在使用RMarkdown创建具有光泽的ioslide演示文稿. 我的某些幻灯片实际上无法放在一页上，并且被截断了.

I am using RMarkdown to create an ioslide presentation with shiny. Some of my slides do not actually fit on one page and are truncated.

由于这是HTML输出，因此我想添加一个滚动条以使长幻灯片可滚动.

Since this is a HTML output, I would like to add a scroll bar to make my long slides scrollable.

我已经进行了大量的搜索，发现了一个

I have been googling a lot and found a partial solution to make R code chunks scrollable. However I want to make my slides scrollable regardless of the content.

这是一个Rmd玩具示例，其中幻灯片不适合一页:

This is a toy Rmd example giving slides not fitting on one page:

---
title: "Untitled"
date: "30 October 2018"
output: ioslides_presentation
runtime: shiny
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

## Shiny Presentation 

- A very long

- and boring

- list of

- bullet points

- just a

- toy example

- obviously

- not over yet

- almost

- not quite

- finally

- out of frame!

我想使此幻灯片可滚动，因为它不适合一页.

I would like to make this slide scrollable since it does not fit on one page.

我不确定为什么要对此大加推销-不胜感激有建设性的意见:)同时，我确实删除了css标记，这可能使人们不熟悉rmarkdown.

I am not sure why this is being heavily downvoted - would appreciate a constructive comment :) In the meantime, I did remove the css tag which may have brought people not familiar with rmarkdown.

推荐答案

自我解答:

使幻灯片可滚动(水平和垂直，但是如果只需要垂直滚动，则只需删除一行)的CSS就是:

The bit of CSS that will make the slide scrollable (both horizontally and vertically but you just have to remove one line if only vertical scrolling is needed) is:

slides > slide {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

请注意，幻灯片是从ioslide获取高度的，因此无需指定高度(实际上，如果这样做，似乎会引入视觉毛刺).使用auto而不是scroll确保滚动条仅在有需要时出现.

Note that the slide gets a height from ioslide so there is no need to specify a height (and in fact it seems to introduce visual glitches if you do). Using auto instead of scroll makes sure a scrollbar only appears when there is a need.

您可以在<style>标签之间的Rmd中直接添加此CSS，也可以将CSS放在单独的文件中(例如scrollable_slides.css).

You can either add this CSS directly in the Rmd in between <style> tags or put the CSS in a separate file (e.g. scrollable_slides.css).

然后可以像这样将CSS文件添加到Rmd中(假设scrollable_slides.css与Rmd位于同一目录中):

The CSS file can then be added to the Rmd like this (assuming scrollable_slides.css is in the same directory as the Rmd):

---
title: "..."
output: 
  ioslides_presentation:
    css: 'scrollable_slides.css'
runtime: shiny
---

这篇关于如何使用rmarkdown在ioslides演示文稿中制作可滚动幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！