xaringan - 无法在打印和屏幕之间获得一致的字体大小

Question

我作品的标准演示格式是比例为 16:9 的 Google 幻灯片，宽度设置为 10 英寸。但我讨厌手动输入绘图等，所以最初使用 Beamer 模仿它，但现在我尝试使用 xaringan 来实现所有现代 html 功能。

我的问题在于，在屏幕上显示演示文稿和打印它们之间，我无法轻易获得字体大小的任何一致性。详细说明。假设我在 Google 幻灯片中有一些设计为 12pt (16px) 的文本。当我在演示模式下显示时测量文本的大小时，这与下载为 pdf 的相同文本的大小一致(然后放入演示模式 - 使用 Sumatra)。好吧，我知道这是一件很奇怪的事情，但它强调了 Google Slides 必须做很多背景工作才能使这些一致的观点 - 事实上我无法获得与 xaringan 相同的一致性是——也许——突出了一个问题。也许 - 我认为实际上它可能更正确，因为我假设它正在适应我的显示器的尺寸/分辨率(14 英寸，1920 x 1080)。

无论如何。如果我在 xaringan 中执行相同的操作，使用下面的示例代码，那么(假设我在 css @page 代码中添加以强制 pdf 打印为正确的物理尺寸) 然后 pdf 中的字体大小与 Google 生成的 pdf 中的字体大小相匹配。伟大的!这里的一切都是一致的，我可以打印我的 xaringan 幻灯片，就像我的 Google 幻灯片一样 - 例如用于与直接拒绝使用 Google 并且只想通过电子邮件发送 PDF 的客户共享。我知道。

我的问题是，在全屏模式下查看 xaringan html 幻灯片时，字体大小仅为“正确”pdf 大小的 75% 左右。这是一个问题，因为 - 好吧，我可以把字体大小调大一点，这样在屏幕上显示看起来就相当于谷歌幻灯片 - 但 pdf 中的字体都太大了。因此，没有简单的方法可以使我可以使用相同的 .Rmd 文件在线呈现和以 pdf 格式发送，所有字体大小看起来都像我一直使用 Google 一样(除非我只呈现pdf，但也可以恢复为 Beamer)。

我想这一切的原因是在后台处理字体大小的某种方式，但也许这是一个错误？如果没有，是否有办法在屏幕和 pdf 之间强制使用这种一致的字体大小？

tl;dr Google 幻灯片在屏幕和 pdf 上查看时的字体大小似乎一致 - 但 xaringan 似乎不一致。

这是一个示例 Rmd。您可以看到生成的 pdf(在演示模式下查看时)的字体大小明显大于演示模式下的 html 文件。在 Google 幻灯片中，这些字体的大小都相同。为了方便起见，我正在使用 xaringanthemer。

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
institute: "RStudio, PBC"
date: "2016/12/12 (updated: `r Sys.Date()`)"
output:
  xaringan::moon_reader:
    nature:
      ratio: "16:9"
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
    seal: false
knit: pagedown::chrome_print
---

```{css, echo = FALSE}
@page {
  size: 10in 5.625in; # makes sure pdf comes out same size as Google Slides pdf
}
```

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
library(xaringanthemer)
style_mono_light(
  base_font_size = "16px",
  header_h1_font_size = "1.5rem"
)
```


# Hello World

Install the **xaringan** package from [Github](https://github.com/yihui/xaringan):

哦，我也在代码块中尝试了这个 CSS，但是虽然它确实修复了 html 幻灯片的大小，但是当处于全屏模式时，同样的问题出现了:

.remark-container {
    height: 540px!important;
    width: 960px!important;
}

Answer 1

好吧，所以这里有一个问题 - 虽然我仍然不完全满意我理解为什么 xaringan 这样做。我实际上认为这与 remark.js 本身以及它似乎处理全屏的方式有关 - 或者浏览器的方式(问题在我尝试过的所有方面都很明显) - 因为它似乎也适用于“正常”的 remark.js 演示文稿。

无论如何，如果您在屏幕上查看时使用@media 规则修改字体大小，这很简单。有多种方法可以做到这一点，具体取决于您希望缩放的“自动化”程度。重要的一点是确保您只在任何非相对单位中设置基本 html 字体大小，并使用 rem 定义与该单位相关的所有其他内容 - 这样其他所有内容都会适当缩放。否则你将不得不手动更改其他所有内容，例如所有h1等

前两种方法看起来是等价的，但我是新手所以可能不是，要么直接重置 html 字体:

```{css, echo = FALSE}
@page {
  size: 10in 5.625in; # makes sure pdf comes out right size
}
@media only screen {
  html {
    font-size: 22px;
  }
}
```

或者重置 base-font-size 变量使用:

```{css, echo = FALSE}
@page {
  size: 10in 5.625in; # makes sure pdf comes out right size
}
@media only screen {
  :root {
    --base-font-size: 22px;
  }
}
```

这将由现有的 html 字体大小调用自动使用(假设您正在使用 xaringanthemer - 如果没有，应该不难适当调整)。

你实际上可以做得更好，让一切都自动缩放，包括基本 html 字体，无论你手动设置什么，如果你这样做:

```{css, echo = FALSE}
@page {
  size: 10in 5.625in; # makes sure pdf comes out right size
}
@media only screen {
  html {
    font-size: calc(1.23 * var(--base-font-size));
  }
}
```

这样，如果您更改 xaringanthemer 中的 base_font_size 选项，则无需手动更改任何其他内容(使用前两种方法，您必须进去并相应地增加字体大小)。

我正在使用 1.23 因为它在我的屏幕上对我有用 - 但是，因为我不明白为什么字体表现不一致，我真的不确定这是一个健壮的跨不同屏幕的解决方案。事实上，我敢打赌它不是。我的 CSS 和 JS 基本上不存在，所以请随意提出更好的解决方案 - 我偷偷怀疑你可以比我更有针对性地使用 @media。

显然，为了更整洁，您可能希望将以上内容放在 .css 文件中，而不是放在 .Rmd 顶部的代码块中。

编辑:似乎 1.23 接近 Google 幻灯片定义的幻灯片的“实际”物理尺寸 (10"x 5.625") 与我的显示器的物理尺寸 (14.1") 之间的比率 - 所以假设这就是原因。但是会必须检查多个不同的显示尺寸才能确认。

编辑2:

更新。我对整个屏幕尺寸与打印输出尺寸的比例有点切线。在我的例子中，用于字体的正确缩放大小是 1.2611，如:

@media only screen {
  html {
    font-size: calc(1.2611 * var(--base-font-size)); 
  }

我只有在开始检查大量字体后才能分辨出差异。

原因是，在深入研究 remark.js 源代码后，它设置了 908 x 681 的引用 4:3 幻灯片尺寸(在 scaler.js 中)- 然后调整根据当前显示设备(或打印页面)的宽度进行缩放。但它从不相应地更正高度，这会导致字体缩放不一致。

在我的例子中，我的幻灯片被定义为 960 x 540，所以我需要将字体大小(加上任何其他具有可变高度的对象 - 例如 hr)更正为 681/540，然后所有内容都一致地缩放。