CSS for gitbook output: YAML, length of <embed> elements and indentation of references

[pablobernabeu]

Hello,

I would like to ask for advice on three issues related to the CSS file for a gitbook output. Please find here a minimal reprex based on the demo bookdown project.

1. gitbook options supplied in YAML

The CSS file seems to be ignored when the gitbook options are specified in the YAML header. Only when the options are provided in _output.yml is the CSS evaluated. If this can't be fixed, perhaps a note in the manual would be useful.

2. Length of <embed> elements

I included some PDF images in my gitbook using knitr::include_graphics(). Unfortunately, these images appear in narrow PDF viewer boxes with a scroll bar on the side. After trial and error, I've solved it with the following CSS code:

// Display PDF images in full length

#document {
  min-width: 125vh;
  min-height: 100vh;
}

embed {
  min-width: 125vh;
  min-height: 100vh;
}

Perhaps a note about these CSS selectors in the manual would be useful for others facing this issue.

3. Indentation of references

CSS code for the indentation of references is ignored (and so are font settings).

// References
div.csl-entry {
  text-indent: -2em !important;
  margin-left: 2em !important;
  color: red;
}

More intriguingly, I'm using a csl file (apa.csl) for the references that has hanging indentation. Indeed, the browser console shows a hanging-indent class in the references, but the output is not indented.

Regarding both Issues 2 and 3, it feels as though there's another format that overrides these CSS options.

Thank you very much for your attention

---

Session info

> xfun::session_info('bookdown')
R version 4.2.3 (2023-03-15 ucrt)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 22621), RStudio 2023.3.0.386

Locale:
  LC_COLLATE=English_United States.utf8  LC_CTYPE=English_United States.utf8   
  LC_MONETARY=English_United States.utf8 LC_NUMERIC=C                          
  LC_TIME=English_United States.utf8    

Package version:
  base64enc_0.1.3   bookdown_0.33.2   bslib_0.4.2       cachem_1.0.7     
  cli_3.4.1         digest_0.6.31     ellipsis_0.3.2    evaluate_0.20    
  fastmap_1.1.1     fontawesome_0.5.0 fs_1.6.1          glue_1.6.2       
  graphics_4.2.3    grDevices_4.2.3   highr_0.10        htmltools_0.5.5  
  jquerylib_0.1.4   jsonlite_1.8.4    knitr_1.42        lifecycle_1.0.3  
  magrittr_2.0.3    memoise_2.0.1     methods_4.2.3     mime_0.12        
  R6_2.5.1          rappdirs_0.3.3    rlang_1.1.0       rmarkdown_2.21   
  sass_0.4.5        stats_4.2.3       stringi_1.7.12    stringr_1.5.0    
  tinytex_0.44      tools_4.2.3       utils_4.2.3       vctrs_0.6.1      
  xfun_0.38         yaml_2.3.7

Checklist

- [X] [formatted your issue](https://yihui.org/issue/#please-format-your-issue-correctly) so it is easier for us to read?

- [X] included a minimal, self-contained, and reproducible example?

- [X] pasted the output from `xfun::session_info('bookdown')` in your issue?

- [X] upgraded all your packages to their latest versions (including your versions of R, the RStudio IDE, and relevant R packages)?

- [X] installed and tested your bug with the development version of the bookdown package using `remotes::install_github("rstudio/bookdown")` ?

[cderv]

The CSS file seems to be ignored when the gitbook options are specified in the YAML header.

How did you set it in the YAML header ? I don't see it in your example. This should work in index.Rmd

output: 
  bookdown::gitbook:
    css: style.css

I included some PDF images in my gitbook using knitr::include_graphics(). Unfortunately, these images appear in narrow PDF viewer boxes with a scroll bar on the side.

Including PDF file will use an <embed> tag, and usually this works best by providing manually some sizes. You can do that from the chunk

```{r PDF-image}
#| fig.cap = 'I tried and tried to stretch this PDF viewer to full length.',
#| out.width = "100%",
#| out.height =  "300px"
knitr::include_graphics('PDF_image.pdf')

We mention this for `include_graphics` in https://bookdown.org/yihui/rmarkdown-cookbook/figure-size.html and in text at https://bookdown.org/yihui/bookdown/figures.html

The above will set `width` and `height` attributes on `embed` node. You can also use CSS to target all your `embed`. 
You could also use an `<iframe>` box using [`knitr::include_url()`](https://bookdown.org/yihui/bookdown/web-pages-and-shiny-apps.html#web-pages-and-shiny-apps) - it works with PDF file too and not just external website. Default for `iframes` is different from the `embed`

Anyhow in both, it is expected to tweak the default for correct sizing based on your context. 

> CSS code for the indentation of references is ignored (and so are font settings).

I don't see any [`csl` field in your YAML](https://bookdown.org/yihui/rmarkdown-cookbook/bibliography.html#changing-citation-style) - did you set it that way to use APA csl ? 

Though there was an issue in `gitbook()` with a missing style. I added it in e8dfa70

Hope it helps. I don't think there is any for us to do in the 2 first reports. Waiting for your confirmation before closing. 

Thanks again for the feedback !

[pablobernabeu]

Hi Christophe,

Thank you very much.

CSS file: Please find here a project with the output parameters in the header and another project with the parameters in a separate file. Only in the latter project are the CSS parameters applied. For convenience, a CSS parameter to spot quickly is the red colour of figure captions.

Size of PDF viewer: The size parameters work like a charm. Thank you!

CSL file: Indeed, I had the csl file in my actual project but forgot to include it in the reprex. After https://github.com/rstudio/bookdown/commit/e8dfa701cd2747407f8cbacbdcdc2d48a0df3cdd, the indentation is in. Thank you!

[cderv]

You are not setting correctly your YAML. When using the in document YAML header, you need to pass everything under the

output: 
    bookdown::gitbook:
        css: style.css

If you set at root level of the YAML header like this

bookdown::gitbook:
  css: style.css

none of the value will be taken into account.

You need to use the correct syntax. See https://bookdown.org/yihui/bookdown/usage.html and bookdown-demo example https://github.com/rstudio/bookdown-demo/blob/5331ffcb5bc0ed3d86c8d94774f515080ff7dae4/index.Rmd#L6

[pablobernabeu]

Ah, that's right! I've confirmed this solves it. Thank you very much indeed.

[github-actions[bot]]

This old thread has been automatically locked. If you think you have found something related to this, please open a new issue by following the issue guide (https://yihui.org/issue/), and link to this old issue if necessary.