【问题标题】:R markdown ioslides - change kable font size with CSSR markdown ioslides - 使用 CSS 更改 kable 字体大小
【发布时间】:2018-02-05 13:23:28
【问题描述】:

我正在尝试在一张幻灯片上放置一张大桌子。我正在使用卡布尔。 我尝试了{.smaller},但还不够,所以我想我会使用 .css,但它也不起作用。

我创建了一个示例演示文稿来说明问题。我尝试编织它,它的显示方式与我在其他演示文稿中的显示方式相同(这很长,这就是我在这里排除它的原因)

我的代码:

---
title: "test"
author: "Test Author"
date: "5 Februar 2018"
output: 
  ioslides_presentation:
    test: presentation.css
---

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


## Test slide

{r}
table <- data.frame(
  index=1:10,
  long_text=c("long text here: asdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf")
)
kable(table)


## Test slide css {.test}

{r}
table <- data.frame(
  index=1:10,
  long_text=c("long text here: asdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf")
)
kable(table)

还有我的 .css:

.test{
   font-size: 50%;
}

【问题讨论】:

  • 查看这篇文章并把更大的尺寸而不是小的stackoverflow.com/questions/40840986/…
  • 我试过了,我也试过 kableExtra。它适用于 html 输出,但不适用于 ioslides :(
  • 我想我找到了答案:在 CSS 样式中添加 td {font-size: 16px !important;} ... stackoverflow.com/questions/9245353/…
  • @BenBolker 不是yaml 标头说test: presentation.css 而不是css: presentation.css 的主要/第一个问题?
  • 我没有测试这个例子 - 我有一个类似的问题(甚至没有 kable,只是在 markdown -> ioslides 中有一个常规的多行表),所以我没有尝试测试它。 td 特性 either 肯定存在一个问题,必须在@technophobe01 的答案中或!important 中指定;简化指定 td 样式不会覆盖特定于 rmdtable 的特征 ...

标签: css r markdown kable ioslides


【解决方案1】:

您可以通过修改 css tabletd 属性来做到这一点。

结果:

示例 CSS 和代码:

presentation.css

table.rmdtable td, table th {
    font-size: 40%;
    padding: 1em 0.5em;
    line-height: 18px;
}

rmarkdownfile

---
title: "test"
author: "Test Author"
date: "5 Februar 2018"
output: 
  ioslides_presentation:
    css: presentation.css
---

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

## Test slide

```{r}
table <- data.frame(
  index=1:10,
  long_text=c("long text here: asdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf")
)
kable(table)
```

## Test slide css {.test}

```{r}
table <- data.frame(
  index=1:10,
  long_text=c("long text here: asdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasfasdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf",
    "long text here: asdfghhjoqweqwrqwrqwrasf")
)

kable(table)
```

说明

我的建议是在浏览器中打开演示文稿,例如 chrome。启动开发工具并使用css 属性。然后,您可以将其构建到您的演示文稿 .css 文件中。

推荐阅读:

而不是修改整体幻灯片格式。我建议您阅读有关将css 格式应用于特定幻灯片的内容。例如只有你的两张测试幻灯片。

https://bookdown.org/yihui/rmarkdown/custom-css-1.html#slide-ids-and-classes

我希望这会为您指明正确的方向。

【讨论】:

  • 对不起,我忘记接受答案了。 3 年后,再次感谢您。
  • 无后顾之忧,始终乐于助人。保持安全和健康。
猜你喜欢
  • 2015-06-16
  • 2015-09-03
  • 1970-01-01
  • 2016-07-17
  • 2015-05-30
  • 2021-03-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多