inst/examples/css/toc.css fails with (at least) theme 'united' in html_book

[florisvdh]

I've been using inst/examples/css/toc.css with the united theme, as recommended in:

bookdown/inst/examples/03-formats.Rmd

Line 531 in 84bde8e

The TOC is often used for navigation purposes. In the GitBook style, the TOC is displayed in the sidebar. For the Bootstrap style, we did not apply a special style to it, so it is shown as a plain unordered list (in the HTML tag `<ul>`). It is easy to turn this list into a navigation bar with some CSS techniques. We have provided a CSS file `toc.css` in this package that you can use, and you can find it here: https://github.com/rstudio/bookdown/blob/master/inst/examples/css/toc.css

This is the relevant part of the YAML header, and it used to work well several years ago:

output:
  bookdown::html_book:
    theme: united
    split_by: "rmd"
    keep_md: yes
    toc: yes
    css: toc.css

However rerunning this code currently fails to give a satisfactory result: all TOC (sub)sections are now expanded as rectangles under one another, instead of a proper navigation bar.

> xfun::session_info('bookdown')
R version 4.1.1 (2021-08-10)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Linux Mint 20, RStudio 1.4.1717

Locale:
  LC_CTYPE=nl_BE.UTF-8       LC_NUMERIC=C               LC_TIME=nl_BE.UTF-8       
  LC_COLLATE=nl_BE.UTF-8     LC_MONETARY=nl_BE.UTF-8    LC_MESSAGES=nl_BE.UTF-8   
  LC_PAPER=nl_BE.UTF-8       LC_NAME=C                  LC_ADDRESS=C              
  LC_TELEPHONE=C             LC_MEASUREMENT=nl_BE.UTF-8 LC_IDENTIFICATION=C       

Package version:
  base64enc_0.1.3 bookdown_0.24   digest_0.6.28   evaluate_0.14   fastmap_1.1.0  
  glue_1.4.2      graphics_4.1.1  grDevices_4.1.1 highr_0.9       htmltools_0.5.2
  jquerylib_0.1.4 jsonlite_1.7.2  knitr_1.36      magrittr_2.0.1  methods_4.1.1  
  rlang_0.4.11    rmarkdown_2.11  stats_4.1.1     stringi_1.7.5   stringr_1.4.0  
  tinytex_0.34    tools_4.1.1     utils_4.1.1     xfun_0.26       yaml_2.2.1

Checklist

When filing a bug report, please check the boxes below to confirm that you have provided us with the information we need. Have you:

• formatted your issue so it is easier for us to read?

• included a minimal, self-contained, and reproducible example?

• pasted the output from xfun::session_info('bookdown') in your issue?

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

• installed and tested your bug with the development version of the bookdown package using remotes::install_github("rstudio/bookdown") ?

-->

[cderv]

Thanks for opening the issue.

It seems there is indeed something wrong. The <li> element does not have the class has-sub added so that the correct CSS applies.

It should in build_chapter() but the regex matching is broken - it is the old system in this function and something must have changed.

bookdown/R/html.R

Lines 225 to 226 in f4002d8

	# add a has-sub class to the <li> items that has sub lists
	toc = gsub('^(<li>)(.+<ul>)$', '<li class="has-sub">\\2', toc)

I believe this a breakage due to Pandoc version change. You may have updated the IDE which comes with newer pandoc.
To confirm, what is your pandoc version ?

rmarkdown::find_pandoc()

From quick test, if you use a older version, it should work.

You can install an old one following
https://bookdown.org/yihui/rmarkdown-cookbook/install-pandoc.html

I'll have a look to fix and add test for detecting future breakage in Pandoc change.

[cderv]

To be more precise on pandoc change about this

Take this md

# a
## b

By running pandoc with --toc we get

With 2.7.3:

<div id="TOC">
<ul>
<li><a href="#a">a</a><ul>
<li><a href="#b">b</a></li>
</ul></li>
</ul>
</div>

with 2.11.4

<div id="TOC">
<ul>
<li><a href="#a">a</a>
<ul>
<li><a href="#b">b</a></li>
</ul></li>
</ul>
</div>

It happens somewhere between those versions

[florisvdh]

Thanks a lot for investigating this @cderv!

I was (still) using RStudio 1.4.1717 with Pandoc at 2.11.4.

> rmarkdown::find_pandoc()
$version
[1] ‘2.11.4’

$dir
[1] "/usr/lib/rstudio/bin/pandoc"

Having updated to RStudio 2021.09.0 Pandoc is now at 2.14.0.3 - and as expected gives the same problem.

> rmarkdown::find_pandoc()
$version
[1] ‘2.14.0.3’

$dir
[1] "/usr/lib/rstudio/bin/pandoc"

Using Pandoc 2.5 - current version from the Ubuntu Focal (20.04) universe repository - with rmarkdown::find_pandoc(cache = FALSE, dir = "/usr/bin") indeed succeeds 👍 ! But of course this makes the code non-portable to other systems.

Looking forward to the updated CSS file! (or bookdown if needed)

[cderv]

Continuing the investigation, I can says that the change happened between 2.7.3 and 2.8.
Not sure to see what is the change that cause this
https://github.com/jgm/pandoc/releases/2.8

Anyway, we'll fix this on the bookdown side - the CSS is ok to me

[cderv]

@florisvdh can you try out #1270 and see if that correctly fix it for you too ?

remotes::install_github("rstudio/bookdown#1270")

[florisvdh]

It works like a charm @cderv 🎉 👏 . Thanks so much for solving!!

[cderv]

Perfect! Thanks for testing.

[github-actions]

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.