Fix rendering of vignette code chunks on iOS

[jbullock35]

The Building better tables in less time vignette doesn't render well on phones. The problem is general to all vignettes: when they are viewed on small screens, long lines in code chunks are rendered in larger-than-normal type. I am not sure of what makes a line "long", but, for example,

lm1 <- lm(Sepal.Length ~ Petal.Length, data = iris)

renders larger than

lm1 <- lm(Sepal.Length ~ 1, data = iris)

on my phone. Perhaps the problem has to do with the line extending beyond the width of the viewport -- when that happens, it is rendered in large type.

The problem also arises in other vignettes -- for example, in broom and dplyr.

Minimal example

---
title: "Vignette with long source line"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteEngine{knitr::rmarkdown}
---

```{r}
foo <- "Short line"
bar <- "This is a very            long            line."
```   

Cause of the problem

The problem seems to be caused by a single line in the <style type="text/css" data-origin="pandoc"> part of the HTML version of the vignette. When using pandoc 2.7.2, the line is

a.sourceLine { display: inline-block; line-height: 1.25; }

and when using pandoc 2.9.1.1, the line is

pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }

In both cases, the problem is display: inline-block; . Per https://www.w3schools.com/css/css_inline-block.asp, display: inline-block allows one to set the width and height of a given tag.

The problem occurs when I use the knitr::rmarkdown vignetteEngine, but not when I use the `knitr::knitr`` vignetteEngine. So it seems to be due to pandoc.

I have decided not to file an issue in the pandoc or rmarkdown repositories. Reading jgm/pandoc#4386 makes this sort of problem sound like a lot of work, and I don't want to trouble anyone about it. And there is an easy workaround.

Solution

Add this to the vignette file:

<style>
  a.sourceLine { display: unset; }
  pre > code.sourceCode > span { display: unset;  }
</style>