Outputs now being wrapped to the page width / Allow horizontal scrolling

[nicholascarey]

Hi.

I just updated to 2.0.

Previously if the output was wider than the page, it rendered as a horizontally scrollable box. As here:

https://imgur.com/a/pk64h1v

In v2.0 this is no longer the case and the output is wrapped at the width of the page:

I have R.options width = 10000 in my setup chunk which previously allowed for this scrollable output, but this no longer works. Setting chunk-specific width options doesn't seem to work, and I haven't been able to find any other knitr chunk options that might return this behaviour. Is it a bug or a deliberate change?

The default console width of 80 doesn't look terrible:

But this is only one example of many and for the purposes of my vignettes i'd really prefer this behaviour instead. Would be nice to have back if possible.

[nicholascarey]

Another drawback I've just noticed: the 1.6.1 output is responsive, while the 2.0 output is not (or at least is responsive in a different way). See new vs old behaviour to narrower pages here. these are both rendered with the default console width of 80

https://imgur.com/a/JJfwxeW

The old behaviour preserves the console output width even if the page is narrowed by allowing horizontal scrolling, the new behaviour does not and hard wraps it. If the justification for this change is to reproduce the RStudio console output the old behaviour does a much better job at different browser sizes.

[hadley]

This was a deliberate choice. I'll leave this issue open to see if other people also prefer the old design.

[nicholascarey]

I've just seen your tweet about the new version. I had no idea it was so recent (very eager to explore all the cool new options, btw!). I see this is mentioned in the release notes, and there was even a yml code: width setting added, which to me makes the decision to restrict the console width even more curious.

I do think it's a reversion, especially to how outputs look on narrow screens (and I know for a fact many students follow my vignettes on mobile phones). Previously they were fine as if the page was narrow the output box adapted to a scrollable one that preserved the console width (default or otherwise). Now it doesn't, and they are wrapped in a way that often garbles the output.

Compare these (this output reports various inspections of data frame columns, so preserving the layout is quite important)

Regular console output at width 80

Narrowed screen (v1.6) - not all output immediately visible, but scrollable and preserves the data inspection information

Narrowed screen (v2.0) - very difficult to parse

This wrapping is not what you would see if the console width was this narrow, which would be more like this:

That's one reason i think it's a reversion, but I don't really see the issue in allowing users to specify a wider code or output if they want too. If you go to the trouble of specifying a large width, it's surely for a reason. Some of my console outputs can be quite long, so in my case this saves quite a lot of vertical space and scrolling in my vignettes. The users don't always need to see the entire output exactly as it would appear in the R console. They would - and should - if it was run in their own projects, but for the purpose of my vignettes this is less important than saving vertical space and being able to read the text discussing the output alongside it without having to scroll to see it. Sometimes vertical space is more valuable.

[hadley]

I understand the difference between the old and new appearance. I made the change because a number of people complained about the scrolling, so what I need to figure out is whether the majority of people prefer scrolling or wrapping.

[nicholascarey]

Apologies. I included a lengthy description of the implications because I could find no discussion of it at all, except for here where it seemed more of a philosophical decision. Hopefully those who disliked the scrolling can now understand why others might prefer it.

Maybe it could be made a global yaml option under code along with the new width? E.g. wrap: TRUE. Not underestimating the work it may take to implement this. Hopefully not too much, and i'd be really grateful to see it. I appreciate the amount of work put into this amazing package.

[gadenbuie]

@nicholascarey and others, if you'd like to enable horizontal scrolling of the code boxes, you can add the following CSS rule to pkgdown/extra.css in your package:

pre, pre code {
  white-space: pre;
  padding-right: 1rem;
}

If you want to limit horizontal scrolling to small screens only, you can put the above rule inside a media query, as in:

@media (max-width: 575.98px) {
  pre, pre code {
    white-space: pre;
    padding-right: 1rem;
  }
}

FWIW, I also prefer horizontal scrolling in code boxes. I end up reading a lot of code and documentation on my phone and find it's easier to parse the code and output when the lines aren't wrapped.

[nicholascarey]

Thanks @gadenbuie. I did play with using custom css I found elsewhere online but was not able to get it to work, I guess because it was a general styles.css file i was specifying in the yaml header. This extras.css file is good to know about!

However, this didn't work for me (it was still wrapping) until i combined it with some other options:

pre, pre code {
  white-space: pre;
  padding-right: 1rem;
  overflow: auto;
  word-wrap: normal;
}

And now it's back to a scrollable box.

[hadley]

After living this for a while, I now agree that the wrapping is a regression and we should go back to scrolling.

[DavisVaughan]

See also tidyverse/tidytemplate#71