List of figures breaks if longer than two pages.
rlabuonora opened this issue · comments
Hi! Thanks a lot for this terrific package!
I'm trying to have a big list of figures but Chrome fails to render it.
---
title: "A Multi-page HTML Document"
author: "Yihui Xie and Romain Lesur"
date: "`r Sys.Date()`"
output:
pagedown::html_paged:
toc: true
self_contained: false
lof: true # insert a list of figures
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
```{r, fig.cap = 'A very simple plot'}
plot(1)
```
The browser console shows a warning:
Unable to layout item: <li data-ref="0ba4178e-0831-4cb6-8f97-b0830fba66bd">…</li> renderTo @ paged.js:1354
Enabling knit: pagedown::chrome_print results in the following error:
Warning: A runtime exception has occured while executing JavaScript
Runtime exception message:
TypeError: Cannot read properties of null (reading 'parentElement')
at findPage (http://127.0.0.1:3190/reporte_postales_files/paged-0.18.1/js/config.js:62:15)
at tocEntriesInfos (http://127.0.0.1:3190/reporte_postales_files/paged-0.18.1/js/config.js:92:20)
at window.PagedConfig.after (http://127.0.0.1:3190/reporte_postales_files/paged-0.18.1/js/config.js:122:24)
Any ideas on how to solve this are greatly appreciated!
Same issue with TOC and Chrome:
Works:
---
title: "A Multi-page HTML Document"
author: "Yihui Xie and Romain Lesur"
date: "`r Sys.Date()`"
output:
pagedown::html_paged:
toc: true
---
# Super
# Big
# Table
# Of
# Contents
# For
# My
# Awesome
# pagedown
# document
# rendering
# awesome
# reports
# with
# R
# and
# markdown
# running
# R stats
# version
# number
# 4.2
# and
# pagedown
# version
# 0.18.1
# but
# I
# don't
# think
# this
Does not work:
---
title: "A Multi-page HTML Document"
author: "Yihui Xie and Romain Lesur"
date: "`r Sys.Date()`"
output:
pagedown::html_paged:
toc: true
---
# Super
# Big
# Table
# Of
# Contents
# For
# My
# Awesome
# pagedown
# document
# rendering
# awesome
# reports
# with
# R
# and
# markdown
# running
# R stats
# version
# number
# 4.2
# and
# pagedown
# version
# 0.18.1
# but
# I
# don't
# think
# this
# is
Hi! I'm using pagedown and facing the same issue. Does anyone know how to fix it?
I worked around this problem with something based on this code:
https://www.garrickadenbuie.com/blog/add-a-generated-table-of-contents-anywhere-in-rmarkdown/
I believe the issue has something to do with the page css, specifically code for the page breaks.
If you run a knit and comment out the following parts then the knit will work (although the render will be odd as the TOC will end up on the cover page):
/*.level1 {
break-before: page;
page: chapter;
}*/
/*
.toc {
break-after: always;
}*/
My workaround is to make the most of the TOC page and put the page contents into two columns:
.toc {
break-after: always;
column-count: 2;
column-gap: 0px;
}
.toc * { /* This fixes a margin issue where the 1st column top is lower than the 2nd */
margin-top: 0px;
}
A hacky yet quick way to fix the issue:
I discovered by accident that f you give the child elements of the TOC a margin of 0px, then your file will knit.
I.e.:
.toc * { /* This fixes a margin issue where the 1st column top is lower than the 2nd */
margin-top: 0px;
}
You may want to alter the style or content of the 2nd TOC page. You can do that manually like so:
@page:nth(3) {
@top-left {
color: white;
}
@top-right {
color: white;
}
@bottom-left {
content: counter(page, lower-roman);
}
}
Hello!
I think this issue (for TOC, LOT and LOF) is resolved for pagedown v0.19 and newer (css solution can be found in this commit) and should be closed.
Thanks!
Cheers, Adrian
Thanks @a-maldet !
I can confirm that I cannot reproduce the issue anymore.