Add page numbers on the TOC

[ggrossetie]

I believe it should be possible to do it in JavaScript once Paged.js process is completed using data-page-number attribute.

[ggrossetie]

A good ressource to implement a Table Of Contents with Paged.js: https://gitlab.pagedmedia.org/tools/experiments/tree/master/table-of-content

[ggrossetie]

Might be working using CSS target-counter as pointed out by @djencks See: https://gitlab.pagedmedia.org/tools/pagedjs/blob/master/examples/assets/aurorae/book.css#L209

[djencks]

Adding

.toc2 a::after {
  content: "p. " target-counter(attr(href), page);
  float:right;
}

to document.css adds page numbers to the generated TOC in my antora branch. leader('.') breaks this. I didn't understand the details of the workaround in the 'experiments' link, so didn't try it.

Although every TOC entry gets a page number, some of these are 0. I suspect this has something to do with pagination problems, sometimes some content is left out for no apparent reason.

[ggrossetie]

leader is in the spec so it should be supported by Paged.js: https://www.w3.org/TR/css-gcpm-3/#leaders

I will give it a try.

[thom4parisot]

It is currently not supported according to this Paged.js Wiki page.

[ggrossetie]

Oh ok... it's weird because they seems to be using it for the Aurorae book 🤔

[thom4parisot]

You are right, they use it.

But it's not transformed by Paged.js:

I opened an issue on the upstream tracker: https://gitlab.pagedmedia.org/tools/pagedjs/issues/171

[ggrossetie]

Thanks @oncletom 👍

[djencks]

There's now a "tutorial" how to do this: https://www.pagedjs.org/posts/2020-02-19-toc/

With our class names, this adds the page numbers:

.toc a::after,
.toc2 a::after {
  content: "p. " target-counter(attr(href), page);
  float: right;
}

I haven't got Julie's imitation leader to work yet.

[djencks]

I believe the leader requires some changes to outline generation in asciidoctor ruby, see https://github.com/asciidoctor/asciidoctor/issues/3670. With that, both page numbers and leaders work, with suitable css.

[ggrossetie]

Fixed in https://github.com/Mogztter/asciidoctor-web-pdf/pull/237, thanks @djencks :tada:

[flagsoft]

.toc a::after, .toc2 a::after { content: "p. " target-counter(attr(href), page); float: right; }

This does not work, the page numbers are always Zero ("p. 0"). What's wrong?

[Siddharth-Tiwari1712]

Can someone please share a working demo on TOC using pagedjs ?