pagedjs issueshttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues2023-05-04T14:20:41Zhttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/29Selecting each n page of a page group2023-05-04T14:20:41ZBoris Budiniboris@cloud68.coSelecting each n page of a page groupWe need to select the each *n* pages of different instances of the same page named template.
For example, the third page of each chapter.
This is like selecting the third page of a page group. ([Issue #27](https://gitlab.pagedmedia.o...We need to select the each *n* pages of different instances of the same page named template.
For example, the third page of each chapter.
This is like selecting the third page of a page group. ([Issue #27](https://gitlab.pagedmedia.org/tools/pagedjs/issues/27))
The following table shows which layout is applied to which page:
layout A = `@page chapter { }`
layout B = `@page chapter:nth(3) { }`
![table-nth_n_-page-of-page-group](/uploads/4e705eb26baed0a0e208a8fded1c791a/table-nth_n_-page-of-page-group.png)
--------
**Sample files for selecting the second page of page group**
HTML: [nth_n_-page-of-page-group.html](/uploads/0217305a1245f4ead0d9572529f58872/nth_n_-page-of-page-group.html)
Result: [nth_n_-page-of-page-group-wrong.pdf](/uploads/2829f1db9c870d1167383deb36dbcd98/nth_n_-page-of-page-group-wrong.pdf)
The result we should get: [nth_n_-page-of-page-group-correct.pdf](/uploads/f2e9b77f7a96c3000b6b0bf621555a6d/nth_n_-page-of-page-group-correct.pdf)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/139[MIX] Fix `break-avoid: after`2023-05-04T14:19:56ZBoris Budiniboris@cloud68.co[MIX] Fix `break-avoid: after`List of issues about `break-avoid: after`(read comments):
- #126 : **break-after: avoid not working as expecte**
- #102: **`break-after: avoid` on two successive elements**
- #135 : Cannot surpress line break after `thead`
- #123 : `brea...List of issues about `break-avoid: after`(read comments):
- #126 : **break-after: avoid not working as expecte**
- #102: **`break-after: avoid` on two successive elements**
- #135 : Cannot surpress line break after `thead`
- #123 : `break-after: avoid` failed if there is exactly one whitespace character between it and next element
- #114 : CSS break-after directive does not work properly
- #92 : How to break if an element is in a particular place on the page?https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/140[MIX] Properties, values and fonctions of generated content2022-03-21T16:50:23ZBoris Budiniboris@cloud68.co[MIX] Properties, values and fonctions of generated contentList of issues about properties, values and fonctions of generated content for paged media:
- #96
- #38
- #42
- #43
- #44
- #45
List of properties, values and fonctions to be implemented:
* [ ] `string-set: <custom-ident> attr(<ide...List of issues about properties, values and fonctions of generated content for paged media:
- #96
- #38
- #42
- #43
- #44
- #45
List of properties, values and fonctions to be implemented:
* [ ] `string-set: <custom-ident> attr(<identifier>)`
* [ ] `string-set: <custom-ident> counter(<name-counter>)`
* [x] `string-set: <custom-ident> content(text)`
* [x] `string-set: <custom-ident> content(before)`
* [x] `string-set: <custom-ident> content(after)`
* [x] `string-set: <custom-ident> content(first-letter)`
* [x] `string(<custom-ident>, first)`
* [x] `string(<custom-ident>, start)`
* [x] `string(<custom-ident>, last)`
* [x] `string(<custom-ident>,first-except)`
* [x] `target-text(content)`
* [x] `target-text(before)`
* [x] `target-text(after)`
* [x] `target-text(first-letter)`
Important:
- Multiple 'string()' and 'target-text()' functions must be able to be added in the same 'content' property
- Multiple values in the same `string-set` property must be possible (ex: `string-set: titleBefore content(before), title content(text)`)
The following folder contains example files with multiple declarations and property crossings for testing. In the folder, a markdown file indicates some implementation proposals for paged.js.
[GENERATED-CONTENT.zip](/uploads/b782cbcac9337156aebe1b55345f784e/GENERATED-CONTENT.zip)
---
**[IMPORTANT add]**
Be careful about entry and exit values, see #150.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/93Respect <base> element when parsing url() in CSS2023-05-04T14:19:17ZBoris Budiniboris@cloud68.coRespect <base> element when parsing url() in CSSSay you have the following HTML in `index.html`, in a folder hosted by `python -m SimpleHTTPServer 8000 .` (or any web server, or even `file:///`):
```html
<html>
<head>
<base href="/assets/">
<style>
@font-face {
fo...Say you have the following HTML in `index.html`, in a folder hosted by `python -m SimpleHTTPServer 8000 .` (or any web server, or even `file:///`):
```html
<html>
<head>
<base href="/assets/">
<style>
@font-face {
font-family: 'inknut_antiquaregular';
src: url('./InknutAntiqua-Regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'inknut_antiquaregular';
}
</style>
</head>
<body>
<h1>foo</h1>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
</body>
</html>
```
Then you have the `.woff` file in a subfolder called `assets`.
Paged.js 0.1.30 does not respect the `<base>` tag.
### Expected behavior
The CSS paged.js injects into the `<head>` should not be rewritten at all, or at least rewritten to something that resolves, like:
url('./assets/InknutAntiqua-Regular-webfont.woff')
### Actual behavior
The CSS is rewritten to:
url('http://localhost:8000/InknutAntiqua-Regular-webfont.woff')
which of course gives a 404.
P.S. Stumbled upon this in https://github.com/mb21/panwriter/issues/6
Repro: [fonttest.zip](/uploads/129473b5c3a997450153e7c00d558208/fonttest.zip)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/61Select multiple @page rules2023-05-04T14:19:06ZBoris Budiniboris@cloud68.coSelect multiple @page rulesNot possible to select multiple @page rules in one CSS syntaxe.
Samples:
`@page:nth(5), @page(6) { … }`
`@page frontamtter:left, @page backmatter:left { … }`
The styles in @page rules just don’t applies.
HTML: [issue-61.html](/up...Not possible to select multiple @page rules in one CSS syntaxe.
Samples:
`@page:nth(5), @page(6) { … }`
`@page frontamtter:left, @page backmatter:left { … }`
The styles in @page rules just don’t applies.
HTML: [issue-61.html](/uploads/d85026fb6826069eb8ba353a44083534/issue-61.html)
Result: [issue-61-wrong.pdf](/uploads/f5f938e88ba1e876357f5af7da7a06f8/issue-61-wrong.pdf)
The result we should get: [issue-61-correct.pdf](/uploads/1db8ca1766474e70a1dccf39d6f203d2/issue-61-correct.pdf)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/94Merge @page rules from different CSS sources2023-05-04T14:19:20ZBoris Budiniboris@cloud68.coMerge @page rules from different CSS sourcesHaving two `@page` rules in the same CSS file, or in the same `<style>` element works as expected.
But if you have two non-empty `@page` rules in two separate elements (or files), the cascade doesn't work.
Minimal repro:
```html
<!DOC...Having two `@page` rules in the same CSS file, or in the same `<style>` element works as expected.
But if you have two non-empty `@page` rules in two separate elements (or files), the cascade doesn't work.
Minimal repro:
```html
<!DOCTYPE html>
<html>
<head>
<style>
@page {
size: A4;
}
</style>
<style>
@page {
margin-top: 6cm;
}
</style>
</head>
<body>
<h1>foo</h1>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
</body>
</html>
```
- Expected: the `margin-top` pushes down the `foo` header in the layout.
- Actual: the `margin-top` is ignored.
Thanks for looking into this! I'm happy to help in any way I can. But looking at the code, I'm uncertain about some of the reasoning that went into it. And I don't want to invest a lot of time in a pull request if you prefer to fix it yourself / your way...https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/84Repeat table header on subsequent pages2022-11-29T18:20:40ZBoris Budiniboris@cloud68.coRepeat table header on subsequent pagesI have a long `<table>` that spread across two or more pages.
If I print this HTML page with Chrome (without Paged.js) then the header is repeated on subsequent pages:
![header](/uploads/5e572b8ec65f384592ebd6afc97c0a1e/header.png)
Thi...I have a long `<table>` that spread across two or more pages.
If I print this HTML page with Chrome (without Paged.js) then the header is repeated on subsequent pages:
![header](/uploads/5e572b8ec65f384592ebd6afc97c0a1e/header.png)
This feature is pretty useful and I was wondering if it's currently possible to do the same with Paged.js ? If not, would you consider adding this feature (as the default behavior or behind a configuration flag) ?
Thanks :)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/30Selecting blank page(s) of named pages2023-05-04T14:18:55ZBoris Budiniboris@cloud68.coSelecting blank page(s) of named pagesWe need to be able to select the blank page(s) of named page and page group.
HTML: [blank-of-named-page.html](/uploads/653bbf62613b51e9fdf361db524f87e0/blank-of-named-page.html)
Result: [blank-of-named-page-wrong.pdf](/uploads/258933f...We need to be able to select the blank page(s) of named page and page group.
HTML: [blank-of-named-page.html](/uploads/653bbf62613b51e9fdf361db524f87e0/blank-of-named-page.html)
Result: [blank-of-named-page-wrong.pdf](/uploads/258933f5022cec336d91fb0f4b0f65b8/blank-of-named-page-wrong.pdf)
The result we should get:[blank-of-named-page-correct.pdf](/uploads/ac414b901e1ff22396da6f5a3778d45c/blank-of-named-page-correct.pdf)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/39Wrong page size (mm) when rendering Chrome2022-03-21T09:53:07ZBoris Budiniboris@cloud68.coWrong page size (mm) when rendering ChromeIf the page size is declared in mm, when creating the PDF all content shifts. Which means that the page doesn't have the right size.
HTML file: [issue-39-mm.html](/uploads/3436862ee6d3321afa64b6f0f29b2e37/issue-39-mm.html)
Result: [iss...If the page size is declared in mm, when creating the PDF all content shifts. Which means that the page doesn't have the right size.
HTML file: [issue-39-mm.html](/uploads/3436862ee6d3321afa64b6f0f29b2e37/issue-39-mm.html)
Result: [issue39-mm-chrome.pdf](/uploads/e308d00cc6db5c13457f5ccf7dbe6897/issue39-mm-chrome.pdf)
When I open the PDF in InDesign, you can see that the pages aren't the right size 140x200mm). It is indicated: 140.053x200.025 mm
![Capture_d_écran_2018-06-21_à_17.25.46](/uploads/7b582008b9646314a87c9cb027d3e11d/Capture_d_écran_2018-06-21_à_17.25.46.png)
----
Note: If the page is declared in inch (in), there is no more this problem.
HTML file : [issue-39-in.html](/uploads/5c3a432abcb3d213cfb5555324148d53/issue-39-in.html)
Result: [issue39-in-chrome.pdf](/uploads/a880073a7a5404c532fadc346b483e0d/issue39-in-chrome.pdf)
----
The problem of shifted content comes from the creation of PDF by Chrome with page size in mm.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/42property string-set / content-list: attr(<identifier>)2022-03-21T09:53:54ZBoris Budiniboris@cloud68.coproperty string-set / content-list: attr(<identifier>)Need to implement `string-set: <name> attr(<identifier>);`
> The string-set property contains one or more pairs, each consisting of an custom identifier (the name of the named string) followed by a content-list describing how to constr...Need to implement `string-set: <name> attr(<identifier>);`
> The string-set property contains one or more pairs, each consisting of an custom identifier (the name of the named string) followed by a content-list describing how to construct the value of the named string.
> content-list expands to one or more of the following values, in any order.
> `content-list = [ <string> | <counter()> | <counters()> | <content()> | attr(<identifier>) ]+`
> [https://www.w3.org/TR/css-gcpm-3/#setting-named-strings-the-string-set-pro](https://www.w3.org/TR/css-gcpm-3/#setting-named-strings-the-string-set-pro)
HTML: [attr.html](/uploads/7a595b6dc8474bb53d51a3ed10952a04/attr.html)
The result we should get: [attr-correct.pdf](/uploads/23f722e88f8a4df7315da78a734478e1/attr-correct.pdf)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/43property string-set / content-list: counter()2022-03-21T09:54:11ZBoris Budiniboris@cloud68.coproperty string-set / content-list: counter()Need to implement `string-set: <name> counter(<name-counter>);`
> The string-set property contains one or more pairs, each consisting of an custom identifier (the name of the named string) followed by a content-list describing how to c...Need to implement `string-set: <name> counter(<name-counter>);`
> The string-set property contains one or more pairs, each consisting of an custom identifier (the name of the named string) followed by a content-list describing how to construct the value of the named string.
> content-list expands to one or more of the following values, in any order.
> `content-list = [ <string> | <counter()> | <counters()> | <content()> | attr(<identifier>) ]+`
> [https://www.w3.org/TR/css-gcpm-3/#setting-named-strings-the-string-set-pro](https://www.w3.org/TR/css-gcpm-3/#setting-named-strings-the-string-set-pro)
HTML: [counter.html](/uploads/deddf32ce3e5dbae5c45406120bdd1b9/counter.html)
The result we should get: [counter-correct.pdf](/uploads/e1cf524c5e447ac572a714f942613aed/counter-correct.pdf)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/45Values of content() function2022-03-21T10:02:53ZBoris Budiniboris@cloud68.coValues of content() function**content() function**: `content() = content([text | before | after | first-letter ])`
The content() function is called in the property string-set:
`string-set: <name> content([text | before | after | first-letter ]);`
For now, on...**content() function**: `content() = content([text | before | after | first-letter ])`
The content() function is called in the property string-set:
`string-set: <name> content([text | before | after | first-letter ]);`
For now, only `content(text)` is implemented. We need the other values:
---
**before**
The string value of the `::before` pseudo-element, determined as if white-space: normal had been set.
HTML: [content-before.html](/uploads/7363c0f8a5555bf389118f594c2d0eda/content-before.html)
The result we should get: [content-before-correct.pdf](/uploads/ec3184b9313860659c1db9ca5a7b1f66/content-before-correct.pdf)
---
**after**
The string value of the `::after` pseudo-element, determined as if white-space: normal had been set.
HTML: [content-after.html](/uploads/1b790c678f4f98adfdc60cc0006d9074/content-after.html)
The result we should get: [content-after-correct.pdf](/uploads/ff32908772c9c91ff44e75e235121282/content-after-correct.pdf)
---
**first-letter**
The first letter of the element, as defined for the `::first-letter` pseudo-element
HTML: [content-first-letter.html](/uploads/181d59552a055dc92f35ad7e7f680e57/content-first-letter.html)
The result we should get: [content-first-letter-correct.pdf](/uploads/d5720dc96746d2fd7954488a74582ee8/content-first-letter-correct.pdf)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/62Margin box size in percentage2022-03-21T10:06:03ZBoris Budiniboris@cloud68.coMargin box size in percentageThis issue concerns the "margins_grid" branch where margins boxes are calculated with CSS grid.
If a margin box size is declared as a percentage, the rendering is not correct.
The dimensions of the margins boxes are given at the grid l...This issue concerns the "margins_grid" branch where margins boxes are calculated with CSS grid.
If a margin box size is declared as a percentage, the rendering is not correct.
The dimensions of the margins boxes are given at the grid level in their parent div.
Currently, the dimension also applies to the margin box div when it is not needed. This has the effect that the margin box has the wrong size.
The declaration of "width" and max "width" for the margin box div (`.pagedjs_margin-top-center`) should be deleted because these are declared in the parent div (`.pagedjs_margin-top`) with the grid.
HTML: [isuue-62.html](/uploads/7e9d5bc14bcd51bf2c90306c00107204/isuue-62.html)
Result: [isuue-62-wrong.pdf](/uploads/d3a33fd61d98d730c7d0c047f983995e/isuue-62-wrong.pdf)
The result we should get: [issue-62-correct.pdf](/uploads/cb87f9a0a30ca2330727c6870138ba35/issue-62-correct.pdf)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/64content move on refresh when the browser size has changed2022-03-21T10:10:31ZBoris Budiniboris@cloud68.cocontent move on refresh when the browser size has changedThis one is a little bit tricky to reproduce:
When looking at [https://paged.accentgrave.net/examples/bricoles.polyfilled.html](https://paged.accentgrave.net/examples/bricoles.polyfilled.html) from @julienbidoret, it seems that the amou...This one is a little bit tricky to reproduce:
When looking at [https://paged.accentgrave.net/examples/bricoles.polyfilled.html](https://paged.accentgrave.net/examples/bricoles.polyfilled.html) from @julienbidoret, it seems that the amount of content per page changes depending on the size of the window.
![Bricoles___Chromium_006](/uploads/ab3ed00ff960a1b304ee9c6b62479c08/Bricoles___Chromium_006.png)
![Bricoles___Chromium_007](/uploads/6e67978a3b2af16012eafe1b1ea3a245/Bricoles___Chromium_007.png)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/68Content larger than the page size2022-03-21T10:12:14ZBoris Budiniboris@cloud68.coContent larger than the page sizeI deliberately left the property marked
`@page {
...
overflow: visible;
`
You can see the page overflow. Sometimes with data loss.
Sample file attachment:
Sorry for my poor English.[html_test.html](/uploads/c2eccb04b54105f1df...I deliberately left the property marked
`@page {
...
overflow: visible;
`
You can see the page overflow. Sometimes with data loss.
Sample file attachment:
Sorry for my poor English.[html_test.html](/uploads/c2eccb04b54105f1df1263063ed6fa75/html_test.html)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/80Rendering in loop (new duplicated content behaviour)2022-03-21T10:14:22ZBoris Budiniboris@cloud68.coRendering in loop (new duplicated content behaviour)Rendering is in loop while trying to render this article.
Content is being duplicated forever....
[sample.zip](/uploads/ea8ba3032236050e1cb2f9b1ca0af6d5/sample.zip)Rendering is in loop while trying to render this article.
Content is being duplicated forever....
[sample.zip](/uploads/ea8ba3032236050e1cb2f9b1ca0af6d5/sample.zip)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/85Broken cell on multipage table2022-06-14T18:18:22ZBoris Budiniboris@cloud68.coBroken cell on multipage tableI have a table that spread across multiple pages and one cell is "broken":
![cell-break](/uploads/b8fbb41f9bdf3faf1dd528ae2813f7a4/cell-break.png)
As you can see "Native support" should be on the row "Document header" and "/docs/writin...I have a table that spread across multiple pages and one cell is "broken":
![cell-break](/uploads/b8fbb41f9bdf3faf1dd528ae2813f7a4/cell-break.png)
As you can see "Native support" should be on the row "Document header" and "/docs/writing-posts" should be on the cell "Slapped on as front matter".
If I change my viewport (ie. resize my browser window) then I get a different result:
![empty-cell](/uploads/3c5668b8cbbeb9c20ffb1002a8df1a94/empty-cell.png)
Notice the empty cell below "Typographic".
I've attached my HTML5 document with my two stylesheets.
[document_test.html](/uploads/db60581702d4e21b49c0abaff6fa9e30/document_test.html)
[document.css](/uploads/39ca5d80977c030fadcc5fc5d95b5ef6/document.css)
[asciidoctor.css](/uploads/6f35dea9213b588621f8344afd196e2f/asciidoctor.css)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/88Scroll effect on images2022-03-21T10:17:18ZBoris Budiniboris@cloud68.coScroll effect on images**Imitation of scroll effect on images in the book.**
Cut images at the bottom and restart on top.
![Capture_d_écran_2018-11-30_à_13.02.48](/uploads/b2a191e956fc952c6ff49b62b9fe4e48/Capture_d_écran_2018-11-30_à_13.02.48.png)
![Capt...**Imitation of scroll effect on images in the book.**
Cut images at the bottom and restart on top.
![Capture_d_écran_2018-11-30_à_13.02.48](/uploads/b2a191e956fc952c6ff49b62b9fe4e48/Capture_d_écran_2018-11-30_à_13.02.48.png)
![Capture_d_écran_2018-11-30_à_13.03.01](/uploads/9ea5eb539866acbb7cfd3b56aad01706/Capture_d_écran_2018-11-30_à_13.03.01.png)
![Capture_d_écran_2018-11-30_à_13.03.10](/uploads/f93ecd9d92c65695071e0f129653c9e2/Capture_d_écran_2018-11-30_à_13.03.10.png)
It's not working on all images, so far, i don't figure it out ...
Special thanks : Julien & Fred <3
The code :
[icono.html](/uploads/9493edc732b68dc24261b0947407e46a/icono.html)
[index.css](/uploads/285a5bc2d30356e1dc2984abad616d6b/index.css)
`
class MyHandler extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
this.chunker = chunker;
}
renderNode(node) {
if (node.nodeType === 1 && node.tagName === "IMG") {
// check for already rendered
let ref = node.dataset.ref;
let start = this.chunker.pagesArea.querySelectorAll("[data-ref='"+ref+"']");
let leftover;
let offset;
start.forEach((item) => {
if (item.dataset.leftover) {
leftover = parseFloat(item.dataset.leftover);
offset = item.dataset.leftover - item.dataset.totalHeight;
}
});
if (leftover) {
let wrapper = document.createElement('div');
wrapper.dataset.ref = ref;
wrapper.style.background = "url(" + node.src + ") no-repeat";
wrapper.style.backgroundSize = "100%";
wrapper.style.backgroundPositionY = offset + "px";
wrapper.style.overflow = "hidden";
let height = node.height;
wrapper.style.height = leftover + "px";
wrapper.style.width = "100%";
node.parentNode.insertBefore(wrapper, node);
node.remove();
} else {
let page = node.closest(".pagedjs_area");
let pageTop = page.getBoundingClientRect().top;
let pageHeight = page.getBoundingClientRect().height;
let pageWidth = page.getBoundingClientRect().right;
let { left, top } = node.getBoundingClientRect();
let height = node.height;
let offsetTop = node.offsetTop;
if (left > pageWidth) {
let index = Array.prototype.indexOf.call(node.parentNode.children, node);
let prev;
let bottom;
if (index > 0) {
prev = node.parentNode.querySelectorAll("img")[0];
bottom = prev.getBoundingClientRect().bottom;
}
let availableSpace = pageTop + pageHeight - bottom;
// console.log(node.src, "availableSpace", availableSpace, height);
if (height <= availableSpace ) {
return;
}
let wrapper = document.createElement('div');
wrapper.dataset.ref = ref;
// console.log(node.src, height, availableSpace, height - availableSpace);
wrapper.dataset.leftover = height - availableSpace;
wrapper.dataset.totalHeight = height;
wrapper.style.background = "url(" + node.src + ") no-repeat";
wrapper.style.backgroundSize = "100%";
wrapper.style.overflow = "hidden";
wrapper.style.height = availableSpace + "px";
wrapper.style.width = "100%";
node.parentNode.insertBefore(wrapper, node);
}
}
}
}
// layout(wrapper) {
// let { height } = wrapper.parentNode.getBoundingClientRect();
// let imgs = wrapper.querySelectorAll("img");
//
// imgs.forEach((img) => {
// let { top } = img.getBoundingClientRect();
// console.log(img.src, top, img.height, height);
// })
// }
}
Paged.registerHandlers(MyHandler);`https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/90Float to top and bottom2022-03-21T10:18:47ZBoris Budiniboris@cloud68.coFloat to top and bottomI'm sure this is on the roadmap already: for books with images, it will be important to support `float: top` and `float: bottom`, for floating elements to the top or bottom of pages. I use this most often for figures.
This is already me...I'm sure this is on the roadmap already: for books with images, it will be important to support `float: top` and `float: bottom`, for floating elements to the top or bottom of pages. I use this most often for figures.
This is already mentioned in the context of the `@footnotes` area in the [wiki article on specs](https://gitlab.pagedmedia.org/tools/pagedjs/wikis/Support-of-specifications).
For extra context, Prince has implemented [a range of floats](https://www.princexml.com/doc-prince/#float-extensions) that are useful, as well as a very useful `next` [conditional modifier](https://www.princexml.com/doc-prince/#float-extension-conditionals).https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/92How to break if an element is in a particular place on the page?2022-03-21T10:26:39ZBoris Budiniboris@cloud68.coHow to break if an element is in a particular place on the page?I've got an example file here: https://notionparallax.github.io/paged_media_issue/ (see below for caveats)
I'd like to be able to tell where an element is on the page so that I can implement [_keep with_](https://helpx.adobe.com/au/inde...I've got an example file here: https://notionparallax.github.io/paged_media_issue/ (see below for caveats)
I'd like to be able to tell where an element is on the page so that I can implement [_keep with_](https://helpx.adobe.com/au/indesign/using/formatting-paragraphs.html#control_paragraph_breaks_using_keep_options) for headers, and avoid starting a new section at the bottom of a page. E.g. this header should bump to the next page so that it's not stranded without its paragraph.
![image](/uploads/77d370ae3f3fc182a157aff38f8c5c74/image.png)
I had a crack at a handler:
```js
class MyHandler extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
afterPageLayout(pageFragment, page, breakToken) {
let h = pageFragment.querySelector("h1.article-title");
if(h !== null) {
let pBox = page.element.getBoundingClientRect();
let hBox = h.getBoundingClientRect();
let pdelta = pBox.bottom - hBox.bottom;
let botPC = pdelta/pBox.height;
if (botPC < 0.4) {
breakToken.offset = 0;
// breakToken.node = h; // breaks: node.getAttribute is not a function
// h.parentElement.classList.add("break-before"); // doesn't force a break
console.log("pageFragment", pageFragment, "page", page, "breakToken", breakToken);
console.log(h);
console.log(pdelta, botPC,"*****\n\n\n");
}
}
}
}
Paged.registerHandlers(MyHandler);
```
The handler has moved on a bit since this, but this is the gist of things. It's in control.js. It currently paints all headings that are too close to the bottom of the page in red.
![image](/uploads/e57efc67a136b8c8e9b6295918e25160/image.png)
This is a pretty crusty way of telling if there's a break needed, but I assume that this is the right direction, and I'm not barking up the wrong tree? (I'd imagine that the adobe way looks at the context a lot more.)
# Context
This is a mini magazine that pulls my articles from [Pocket](https://getpocket.com), and lets me read them without getting distracted by notifications. It usually has an hour of content, but this particular one has two hours worth to give more opportunities for odd things to happen.
# Caveats
There are a few other odd things that happen in this file, I don't want to muddy the waters with the reporting them as bugs right now, but I'll mention them so that you get what's going on.
* If you watch the toc while it's paginating, sometimes it gets stuck. If not all the articles get page numbers, then refreshing it usually fixes it.
* I'm a bit lost with the lifecycle of the `beforeParsed` function. Some things work well inside it, some don't work at all. Currently all the pre processing is outside it.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/98Long HTML table not rendering correctly in Firefox.2022-08-30T20:09:37ZBoris Budiniboris@cloud68.coLong HTML table not rendering correctly in Firefox.Hi
I have a long table which spans into 6 pages on chrome & safari when using `paged.polyfill.js` but on Firefox the table is overflowing through page footer on the first page and rest of the table is not visible. If we remove the libr...Hi
I have a long table which spans into 6 pages on chrome & safari when using `paged.polyfill.js` but on Firefox the table is overflowing through page footer on the first page and rest of the table is not visible. If we remove the library and print the table on Firefox, it works fine as expected. I tried using
```
tr {
page-break-after: auto;
}
```
but it didn't helped me with Firefox.
Please suggest, what should be the possible solution? I'm referencing a JSbin for more understanding:
`https://jsbin.com/cikowuyuya/edit?html,output`https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/99Mixing Page Orientations2023-05-04T14:19:24ZBoris Budiniboris@cloud68.coMixing Page OrientationsHi,
I'd like to know if you plan to support documents mixing portrait and landscape page orientations.
The preview is fine in the browser (Chrome) but everything is lost when I want to print the document (PDF).
```
<html>
<head>
<...Hi,
I'd like to know if you plan to support documents mixing portrait and landscape page orientations.
The preview is fine in the browser (Chrome) but everything is lost when I want to print the document (PDF).
```
<html>
<head>
<title>Mixing Page Orientations</title>
<style type="text/css">
@page {
size: A5 landscape;
margin: 30mm 25mm;
}
@page portrait {
size: A5 portrait;
margin: 25mm 30mm;
}
.portrait {
page: portrait;
}
@media screen {
.pagedjs_page {
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
}
}
</style>
<script src="https://unpkg.com/pagedjs@0.1.30/dist/paged.legacy.polyfill.js"></script>
</head>
<body>
<section class="portrait">
<h1>Portrait</h1>
</section>
<section class="landscape">
<h1>Landscape</h1>
</section>
</body>
</html>
```https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/102`break-after: avoid` on two successive elements2023-05-04T14:19:30ZBoris Budiniboris@cloud68.co`break-after: avoid` on two successive elements`break-after: avoid` don't work on two successive elements.
For example, if an `h2` follow an `h1`, `break-after: avoid` works on `h2` but not on `h1`. See between pages 5 and 6 of the files:
HTML: [issue-102.html](/uploads/b9de51e87b...`break-after: avoid` don't work on two successive elements.
For example, if an `h2` follow an `h1`, `break-after: avoid` works on `h2` but not on `h1`. See between pages 5 and 6 of the files:
HTML: [issue-102.html](/uploads/b9de51e87b0dfc07df4f54d8cb2552e1/issue-102.html)
Result: [issue-102-wrong.pdf](/uploads/ff43255b7ce6679b7292dc19bf590ff4/issue-102-wrong.pdf)
The result we should get: [issue-102-correct.pdf](/uploads/445e408dfc100ce5e5e3199b62cb0b7c/issue-102-correct.pdf)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/108Mirror repo on github2023-05-04T14:19:33ZBoris Budiniboris@cloud68.coMirror repo on githubmake a mirror repo on github, if this is easily done with our own instance of gitlabmake a mirror repo on github, if this is easily done with our own instance of gitlabhttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/114CSS break-after directive does not work properly2022-03-21T15:06:38ZBoris Budiniboris@cloud68.coCSS break-after directive does not work properlyHi,
The directive for defining page breaks does not always work as expected.
We want to display a table and we want to prevent having an orphan table head at the end of a page.
To prevent this we have configured the following directiv...Hi,
The directive for defining page breaks does not always work as expected.
We want to display a table and we want to prevent having an orphan table head at the end of a page.
To prevent this we have configured the following directive:
```
thead {
break-inside: avoid;
break-after: avoid;
}
```
It works in some cases, but in this specific case it does not work (Chrome):
![image](/uploads/ff1efd86230a4a3299d4434b9ac62cf2/image.png)
If we look carefully the screenshot, the thead element is not the last element on the page. This is probably why the directive is not applied accordingly. The last element of the page is a tbody. Having a tbody (height equals to 0) without any child elements does not make sense in our case.
How can I avoid such behaviour? Do you have any example how to adjust the break element through a custom PageHandler?
Any help would be greatly appreciated,
Alexandrehttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/116Rendering process never ends2022-03-21T14:10:42ZBoris Budiniboris@cloud68.coRendering process never endsHi,
In some cases the rendering process never ends.
PagedJS create a new page to put the content on it, but the content does not fit due to some constraints in place (e.g. break-inside: avoid) and it tries over and over.
IMHO, PagedJ...Hi,
In some cases the rendering process never ends.
PagedJS create a new page to put the content on it, but the content does not fit due to some constraints in place (e.g. break-inside: avoid) and it tries over and over.
IMHO, PagedJS should detect such cases and stop the rendering process with an appropriate feedback:
Exemple:
```
window.PagedPolyfill.preview().catch(function(error) {
// handle the error during the rendering process
});
```
What do you think about that?
Regards,
Alexandrehttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/120Paged.js polyfill breaks Polymer elements2023-05-04T14:19:55ZBoris Budiniboris@cloud68.coPaged.js polyfill breaks Polymer elementsThe Paged.js polyfill appears to break Polymer custom elements/web components. It may also break other web components. I suspect this is because Paged.js isn't copying the custom element's shadow DOM when it moves content around during p...The Paged.js polyfill appears to break Polymer custom elements/web components. It may also break other web components. I suspect this is because Paged.js isn't copying the custom element's shadow DOM when it moves content around during page layout.
Please see this test case project:
https://github.com/rgladwell/test-pagedjs-with-polymer
## Expected result
Polymer element should appear as follows:
![Screenshot_2019-06-01_at_10.30.29](/uploads/965159faf227d3e94f197883eb1bf09e/Screenshot_2019-06-01_at_10.30.29.png)
## Actual result
Instead Polymer elements appear without some content:
![Screenshot_2019-06-01_at_10.27.35](/uploads/973e6145a9772ddc334f71d6ca88ad94/Screenshot_2019-06-01_at_10.27.35.png)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/121Running headers with both dynamic and constant strings are unbalanced2022-03-21T14:05:00ZBoris Budiniboris@cloud68.coRunning headers with both dynamic and constant strings are unbalancedIt's a little hard to summarise this issue in a title: sorry.
The `@top-right` at-rule and similar can be set to a string in two ways: by a constant value and by a named string and `string-set`.
@page {
@top-right {
c...It's a little hard to summarise this issue in a title: sorry.
The `@top-right` at-rule and similar can be set to a string in two ways: by a constant value and by a named string and `string-set`.
@page {
@top-right {
content: string(header);
}
@top-left {
content: "Constant string";
}
}
h1 {
string-set: header contents();
}
If both are set by the same method, Paged renders this correctly. If, however, one is dynamic and the other constant, the dynamic one takes up most of the space, with the constant content being bunched into a tiny corner.
This is also true if you use `string-set` with a constant value.
[HTML file with the issue](/uploads/43da465f0a39657fcc5f3755ee5af977/top-right_issue.html)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/123`break-after: avoid` failed if there is exactly one whitespace character betw...2023-04-07T22:53:16ZBoris Budiniboris@cloud68.co`break-after: avoid` failed if there is exactly one whitespace character between it and next elementHTML File: [temp1.html](/uploads/6e701b690a9ea3af55b671884792f76b/temp1.html)
The file is taken from `pagedjs/specs/breaks/break-after/break-after-avoid/break-after-avoid.html` with the following modifications:
- Remove all `<section>`...HTML File: [temp1.html](/uploads/6e701b690a9ea3af55b671884792f76b/temp1.html)
The file is taken from `pagedjs/specs/breaks/break-after/break-after-avoid/break-after-avoid.html` with the following modifications:
- Remove all `<section>` tags
- Remove indentation of `<p>` tag after the `<h1>Section 2: section element</h1>` element, so that there is exactly one whitespace character (`\n` in this case) between them.
Error message in the browser console:
![err_msg](/uploads/2535e3fc73064afc1ff73c367af87031/err_msg.jpg)
What have I tried?
- Remove all whitespace characters between the two tags. Rendered successfully.
- Put two whitespace characters between the two tags. Rendered successfully.
- See whether `\n`, `\t`, and ` ` will make any difference. No difference.
What is the environment?
- Browser: Chromium 75.0.3770.80 (Official Build) Arch Linux (64-bit)
- Paged.js: 0.1.34
By the way, this tool is impressive. It helps me a lot. Thank you!https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/126``break-after: avoid`` not working as expected.2023-04-07T22:53:17ZBoris Budiniboris@cloud68.co``break-after: avoid`` not working as expected.[sample.zip](/uploads/1673b6144d6b92451353751c5549c9be/sample.zip)
![Capture_du_2019-06-20_10-38-22](/uploads/d76416e69cb839120120f397864a1856/Capture_du_2019-06-20_10-38-22.png)[sample.zip](/uploads/1673b6144d6b92451353751c5549c9be/sample.zip)
![Capture_du_2019-06-20_10-38-22](/uploads/d76416e69cb839120120f397864a1856/Capture_du_2019-06-20_10-38-22.png)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/127Rendering in loop2023-04-07T22:53:16ZBoris Budiniboris@cloud68.coRendering in loopA new infinity loop behaviour found in versions upper then 0.1.28.
The sample bellow works fine.
[sample-0.1.28.zip](/uploads/c5198a30221cf636080faf0b196f88a9/sample-0.1.28.zip)
The sample bellow doesn't work when using the versions 0...A new infinity loop behaviour found in versions upper then 0.1.28.
The sample bellow works fine.
[sample-0.1.28.zip](/uploads/c5198a30221cf636080faf0b196f88a9/sample-0.1.28.zip)
The sample bellow doesn't work when using the versions 0.1.29 or higher.
[sample-0.1.34.zip](/uploads/45a9f7d04b2b3c673e10b11f490fef7f/sample-0.1.34.zip)
The only change between one sample and another is the version of the paged.polyfill.js file.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/133Repeating table headers or recursive pagination2022-05-29T07:58:09ZBoris Budiniboris@cloud68.coRepeating table headers or recursive paginationI often have situations where I want to display tabular data which doesn't fit on one page. It would be good for readability if the table header could be repeated on each new page.
I'm starting this discussion because I'd like some inpu...I often have situations where I want to display tabular data which doesn't fit on one page. It would be good for readability if the table header could be repeated on each new page.
I'm starting this discussion because I'd like some input on how to achieve this, maybe I am ignoring something obvious from the polyfill or paged media standard. Mostly I am talking about automatically generated content which means I would like to avoid manual tweaks for individual cases.
The only thing I can see is to create a new page class with the table header as background or generated content. But that limits what I can do with the header, the table has to start at the top of a page instead of flowing after other content, and also I think there can't be other content after the table on the same page if space is left. The latter may be achieved through attaching a page class to the trailing content and hope it is overwritten by the table's page class if both appear on the same page. Getting all of this done with regular HTML table markup and generic enough for dynamically generated content and dynamically sized rows is even trickier.
The other way to think about this problem is something like recursive pagination: The table is represented as a box, and if that box has to be split among multiple pages, it would need to be able to generate additional content which isn't bound to the page but rather to the sub-page. Ideally it could have a table header at the start of the table flowing after other content, and maybe even a footer element at the final end of the table followed by other content. Ideally it would also be able to finetune the pagination (orphans, widows, page-break-before/inside/after etc).
A similar use case would be where there are two or more independent flows of content on the same sequence of pages. Like a set of pictures with one on each top of a page and a story text on the bottom. This could also be achieved through defining different page types, but it would be very verbose and not very generic.
Yet another idea is to use the CSS Houdini Layout API, but I haven't looked into that enough, yet.
I welcome any suggestions on how to do things like that,
And thank you all for your great work on paged media!https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/135Cannot surpress line break after `thead`2022-03-21T16:58:23ZBoris Budiniboris@cloud68.coCannot surpress line break after `thead`Example HTML:
```html
<html>
<head></head>
<style>
@media print {
@page {
size: A4;
}
thead {
break-after: avoid;
}
}
</style>
</head>
<body>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>...Example HTML:
```html
<html>
<head></head>
<style>
@media print {
@page {
size: A4;
}
thead {
break-after: avoid;
}
}
</style>
</head>
<body>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td><p>a</p></td>
<td><p>b</p></td>
<td><p>c</p></td>
</tr>
<tr>
<td><p>a</p></td>
<td><p>b</p></td>
<td><p>c</p></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
```
Rendered to pdf using the pagedjs-cli.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/137explicit text-align definition in BODY tag2019-09-25T15:16:02ZBoris Budiniboris@cloud68.coexplicit text-align definition in BODY tagIn example HTML file, such as 'examples/index.html', just add style="text-align:justify" in BODY tag, and open or refresh this web page.
RESULT: all last lines of paragraphs are justified.
EXPECTED: only the last line of a paragraph whi...In example HTML file, such as 'examples/index.html', just add style="text-align:justify" in BODY tag, and open or refresh this web page.
RESULT: all last lines of paragraphs are justified.
EXPECTED: only the last line of a paragraph which is split into next page should be justified.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/138Parse attributes on body element2022-03-21T16:51:42ZBoris Budiniboris@cloud68.coParse attributes on body elementAs discussed on the Paged Media Mattermost [here](https://mattermost.pagedmedia.org/pagedmedia/pl/jhy8ojthd3rguxpjpswj9prjzw), pagedjs parses the inner HTML of the `<body>` element. This means that it is not aware of attributes on the bo...As discussed on the Paged Media Mattermost [here](https://mattermost.pagedmedia.org/pagedmedia/pl/jhy8ojthd3rguxpjpswj9prjzw), pagedjs parses the inner HTML of the `<body>` element. This means that it is not aware of attributes on the body.
Is it possible to change this, either so that pagedjs parses the outer HTML of the `body`, or that pagedjs somehow reads and applies the attributes on the `body`, such as classes?
In our use case, we use classes on the `body` extensively in books made up of separate HTML documents. For instance, a copyright page will have `<body class="copyright-page">` and a chapter will have `<body class="chapter">`. Mostly, this informs our `@page` rules for controlling page numbering and other margin-box features.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/142Add Bookmark support2022-03-21T16:48:36ZBoris Budiniboris@cloud68.coAdd Bookmark supportWould be nice to be able to set bookmarks!Would be nice to be able to set bookmarks!https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/143target-counter when url isn't found2022-03-21T16:47:59ZBoris Budiniboris@cloud68.cotarget-counter when url isn't foundCurrently, target-counter emits `0` as the page number if a given url isn't found. Conditional on support by the spec, it would seem more correct that no page number should be emitted when a page wasn't found.Currently, target-counter emits `0` as the page number if a given url isn't found. Conditional on support by the spec, it would seem more correct that no page number should be emitted when a page wasn't found.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/144Per section page numbers2022-03-21T16:47:24ZBoris Budiniboris@cloud68.coPer section page numbersIs it possible to have per section (i.e. not global, for the entire document) page/pages?Is it possible to have per section (i.e. not global, for the entire document) page/pages?https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/145Cannot read property 'getBoundingClientRect' of undefined2022-03-21T16:59:31ZBoris Budiniboris@cloud68.coCannot read property 'getBoundingClientRect' of undefinedI'm not sure what is happening but the following error is thrown:
```console
Uncaught (in promise) TypeError: Cannot read property 'getBoundingClientRect' of undefined
at Page.addResizeObserver (quarkus-cheat-sheet.html:1799)
at...I'm not sure what is happening but the following error is thrown:
```console
Uncaught (in promise) TypeError: Cannot read property 'getBoundingClientRect' of undefined
at Page.addResizeObserver (quarkus-cheat-sheet.html:1799)
at Page.addListeners (quarkus-cheat-sheet.html:1761)
at Page.layout (quarkus-cheat-sheet.html:1715)
at async Chunker.layout (quarkus-cheat-sheet.html:2506)
at async Chunker.renderAsync (quarkus-cheat-sheet.html:2429)
```
[quarkus-cheat-sheet.html](/uploads/a8bf4240dbaa0bbcfff0bf347ca81a52/quarkus-cheat-sheet.html)
As a result the document is truncated/incomplete.
Please note that when using a headless browser, I'm able to generate a complete PDF. So it might be a "concurrent exception" when the document is opened in a non-headless browser.
Just to be clear, I do not scroll when Page.js is running, I just open the page in a browser.
If I add the following condition:
```js
let wrapper = this.wrapper;
if (!wrapper) {
return;
}
```
Then another exception is thrown:
```
quarkus-cheat-sheet.html:1776 Uncaught (in promise) TypeError: Cannot read property 'addEventListener' of undefined
at Page.addListeners (quarkus-cheat-sheet.html:1776)
at Page.layout (quarkus-cheat-sheet.html:1715)
at async Chunker.layout (quarkus-cheat-sheet.html:2509)
at async Chunker.renderAsync (quarkus-cheat-sheet.html:2432)
```https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/146Page break in style attribute of an element is ignored2022-03-21T22:14:01ZBoris Budiniboris@cloud68.coPage break in style attribute of an element is ignoredNot sure if it's an issue or a limitation but the following does not work:
```html
<div style="page-break-after: always;"></div>
```
If I define a CSS class then it's working as expected:
```html
<div class="page-break"></div>
```
``...Not sure if it's an issue or a limitation but the following does not work:
```html
<div style="page-break-after: always;"></div>
```
If I define a CSS class then it's working as expected:
```html
<div class="page-break"></div>
```
```css
.page-break {
page-break-after: always;
}
```
So my guess is that inline styles are ignored?https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/148Web components and paged.js2023-09-26T20:29:29ZBoris Budiniboris@cloud68.coWeb components and paged.jsThis is an error showing how web components are handled with paged.js.
![image](/uploads/c5437aad15fd2d281a4931757f55a582/image.png)
The shadow DOM elements produced by the component are not direct children of the element, and therefor...This is an error showing how web components are handled with paged.js.
![image](/uploads/c5437aad15fd2d281a4931757f55a582/image.png)
The shadow DOM elements produced by the component are not direct children of the element, and therefore breaks the rendering.
[Archive.zip](/uploads/f1f8aa94ca082f639f75c1381c2b98b4/Archive.zip)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/151[target-text-update] multiple target text in the same content2023-05-04T14:19:57ZBoris Budiniboris@cloud68.co[target-text-update] multiple target text in the same contentImpossible to have multiple `target-text()` functions in the same `content` property.
Exemple:
```
a[href]::before {
content: target-text(attr(href), content) target-text(attr(href), after);
}
```
---
HTML file: [issue-151.html](/u...Impossible to have multiple `target-text()` functions in the same `content` property.
Exemple:
```
a[href]::before {
content: target-text(attr(href), content) target-text(attr(href), after);
}
```
---
HTML file: [issue-151.html](/uploads/14ab0fc3762a0c26790bdbdd7a42144d/issue-151.html)
Result:
![Capture_d_écran_2019-11-06_à_11.58.50](/uploads/598418e8e0879da74994f00510d88a06/Capture_d_écran_2019-11-06_à_11.58.50.png)
The result we should get:
![Capture_d_écran_2019-11-06_à_12.00.46](/uploads/676d948856cc5fecf48a9570cf6a980b/Capture_d_écran_2019-11-06_à_12.00.46.png)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/152[target-text-update] target-text doesn't work when content have counter2023-05-04T14:19:57ZBoris Budiniboris@cloud68.co[target-text-update] target-text doesn't work when content have counterThe `target-text()` function doesn't work when content targeted have a counter.
Example:
```
h1::before {
content: "Chapter "counter(title-counter) ". ";
}
a[href]::before {
content: target-text(attr(href), before);
}
```
---
HTM...The `target-text()` function doesn't work when content targeted have a counter.
Example:
```
h1::before {
content: "Chapter "counter(title-counter) ". ";
}
a[href]::before {
content: target-text(attr(href), before);
}
```
---
HTML file: [issue-152.html](/uploads/ef18214e320f9f09104e703c3810849a/issue-152.html)
Result:
![Capture_d_écran_2019-11-06_à_12.05.29](/uploads/faace12e604d6aa86ead7118c81b372d/Capture_d_écran_2019-11-06_à_12.05.29.png)
The result we should get:
![Capture_d_écran_2019-11-06_à_12.06.57](/uploads/6fc914519c0555d867a9a3d05fa6308f/Capture_d_écran_2019-11-06_à_12.06.57.png)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/159Code of conduct for paged.js project2022-03-21T17:19:08ZBoris Budiniboris@cloud68.coCode of conduct for paged.js projectI believe that we should have a code of conduct to avoid bad behavior (not that we had some before, but as paged.js go more and more noticed, we may want to have that clearly written down).I believe that we should have a code of conduct to avoid bad behavior (not that we had some before, but as paged.js go more and more noticed, we may want to have that clearly written down).https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/160Support generated content in Safari2022-03-21T17:01:56ZBoris Budiniboris@cloud68.coSupport generated content in SafariThe table of contents demo doesn't seem to be working for Safari (Chrome seems to be fine). ![Screen_Shot_2019-12-04_at_12.34.16_AM](/uploads/2eb634140e57833a0419c944f36041ed/Screen_Shot_2019-12-04_at_12.34.16_AM.png)
I've managed to tr...The table of contents demo doesn't seem to be working for Safari (Chrome seems to be fine). ![Screen_Shot_2019-12-04_at_12.34.16_AM](/uploads/2eb634140e57833a0419c944f36041ed/Screen_Shot_2019-12-04_at_12.34.16_AM.png)
I've managed to trace the issue to [these lines](https://gitlab.pagedmedia.org/tools/pagedjs/blob/e84d6af/src/modules/generated-content/target-counters.js#L99-103): In Chrome `counter-reset` is `none`, but for some reason it's stuck at `0` in Safari. Also, Safari doesn't seem to be honoring the `::after` `counter-reset` rule [here](https://gitlab.pagedmedia.org/tools/pagedjs/blob/e84d6af/src/modules/generated-content/target-counters.js#L116), which results in a bunch of zeroes.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/163Infinite paging with align-items: flex-end and height: var(--pagedjs-height)2022-03-21T17:05:05ZBoris Budiniboris@cloud68.coInfinite paging with align-items: flex-end and height: var(--pagedjs-height)Not sure what's happening but Paged.js will loop forever on the following page: [infinite-paging.html](/uploads/6643fd3ef0b1f64917787c130750a2cd/infinite-paging.html)Not sure what's happening but Paged.js will loop forever on the following page: [infinite-paging.html](/uploads/6643fd3ef0b1f64917787c130750a2cd/infinite-paging.html)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/164script element and element with no effect on the layout (ie. display:none) sh...2022-03-21T17:07:21ZBoris Budiniboris@cloud68.coscript element and element with no effect on the layout (ie. display:none) should not produce a new pageConsider the following page: [display-none.html](/uploads/774b497ff8e0fcfae3545f4d026ef775/display-none.html).
As you can see I have only a cover page and no content (apart from the `<script>` element and a `display:none` element).
I wo...Consider the following page: [display-none.html](/uploads/774b497ff8e0fcfae3545f4d026ef775/display-none.html).
As you can see I have only a cover page and no content (apart from the `<script>` element and a `display:none` element).
I would expect a single page PDF but Paged.js produces two pages. The second page contains nothing visible:
```html
<div class="pagedjs_area">
<div class="pagedjs_page_content" style="column-width: 624px; column-gap: calc(var(--pagedjs-margin-right) + var(--pagedjs-margin-left));">
<div>
<div style="display: none;" data-ref="5c744c7e-9caa-412b-9758-3709f55a145b" data-previous-break-after="page"></div>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js" data-ref="349f937a-d11a-4743-8335-ad1096a2d1ad"></script>
</div>
</div>
</div>
```
I can also reproduce this issue if I remove the `<div style="display: none;"></div>` element. In this case the second page only contains the Paged.js `<script>` element.
I think Paged.js should ignore `<script>` elements because they don't affect the layout.
In other words, Paged.js should not append `<script>` elements in the final layout because I believe that they should already be executed when Paged.js does the relayout.
Please note that it's possible to define CSS rules on a `script` element:
```css
script {
display: block;
padding: 80px;
background-color: red;
}
```
I think that the general rule is, ignore element with `display: none` and without any page break directives.
Is there other CSS rules defined on `display: none` elements that might affect the layout?https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/166Apply a code formatter on the project2022-03-21T17:08:27ZBoris Budiniboris@cloud68.coApply a code formatter on the projectI'm using WebStorm and I need to manually revert code formatting changes because the project does not define one.
I think we should use https://prettier.io/ and/or at least add an `.editorconfig` https://editorconfig.org/ to ensure that ...I'm using WebStorm and I need to manually revert code formatting changes because the project does not define one.
I think we should use https://prettier.io/ and/or at least add an `.editorconfig` https://editorconfig.org/ to ensure that we all use the same code style/formatter.
I think it would ensure a consistent style and, at the same time, it would be easier to contribute and review code.Fred ChasenFred Chasenhttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/168Dynamic content preview2022-03-21T17:08:55ZBoris Budiniboris@cloud68.coDynamic content previewRendering multiple hundereds of pages is super slow and needs a lot of network data. Therefore I want to be able to only render some pages, and dynamically add pages before or after (whatever is needed) the current rendererd preview.
T...Rendering multiple hundereds of pages is super slow and needs a lot of network data. Therefore I want to be able to only render some pages, and dynamically add pages before or after (whatever is needed) the current rendererd preview.
The interface could look like:
```javascript
const paged = new Previewer();
paged.preview(content, ['/preview.css'], target) // first render
paged.previewAppend(contentAfter)
paged.previewPrepend(contentBefore)
```
Some side effects:
- Page number: If I want to render content in the middle of the book, the page numbers may not work anymore, as I don't know on which page I am. A first implementation could either
- sacrifice the page number at all
- the first page number needs to be set via an argument
- only allow to render the first few pages and then dynamically `append` contenthttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/171leader() support2024-03-14T04:42:11ZBoris Budiniboris@cloud68.coleader() supportThis binds a headline and its page number within a Table of Content.
Specification is here: https://www.w3.org/TR/css-gcpm-3/#leaders
Expected output:
```
Table of Contents
1. Loomings.....................1
2. The Carpet-Bag.............This binds a headline and its page number within a Table of Content.
Specification is here: https://www.w3.org/TR/css-gcpm-3/#leaders
Expected output:
```
Table of Contents
1. Loomings.....................1
2. The Carpet-Bag...............9
3. The Spouter-Inn.............13
```
Related issue: https://github.com/Mogztter/asciidoctor-pdf.js/issues/126https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/174Do not allow avoid break-before/previous-break-after to produce infinite loop...2022-03-25T19:06:06ZBoris Budiniboris@cloud68.coDo not allow avoid break-before/previous-break-after to produce infinite looping.I've encountered at least one situation that does not progress in rendering where the "prev" branch in layout.js findOverflow causes rendering to get stuck and loop without progressing.
In my cases I think this is due to problems in tab...I've encountered at least one situation that does not progress in rendering where the "prev" branch in layout.js findOverflow causes rendering to get stuck and loop without progressing.
In my cases I think this is due to problems in table rendering, but no matter what the root cause, loops are a big usability problem.
Its pretty easy to avoid this by storing the range startContainer in the breakToken, passing the old breakToken into findOverflow and, in the "prev" branch, checking if the "prev" is the same as the old breakToken stored startContainer.
At this point I might have a poor MR soon as it is full of console.log statements as I'm trying to solve my main table rendering problems. I expect to be able to provide a cleaned up MR in a few days.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/178Feature Request: Hide generated page information and skip page count2020-03-12T15:33:37ZBoris Budiniboris@cloud68.coFeature Request: Hide generated page information and skip page countIt would be nice to have the ability to hide generated page information and skip page count on certain pages in a document.
This feature will be useful when inserting supplementary documents that are not part of the original document.
...It would be nice to have the ability to hide generated page information and skip page count on certain pages in a document.
This feature will be useful when inserting supplementary documents that are not part of the original document.
For example, I have a document with the page number and total pages displayed at the bottom of each page. I am trying to insert a jpeg form somewhere in the document. I would like the ```pages``` tally not to count this page and the generated page information to not appear on this specific page.
This feature will also be useful when inserting charts, legends, flyers, maps or coupons in a document.
Sorry I could not figure out how to add the proper label to this issue.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/179page:last formatting last page2021-03-25T10:38:10ZBoris Budiniboris@cloud68.copage:last formatting last pageHello,
I have the need to change the margins and footer on the last page, just I don't know the total number of pages until the document is rendered.
Is there a selector ?
I managed to create the desired output with some JS, as it's t...Hello,
I have the need to change the margins and footer on the last page, just I don't know the total number of pages until the document is rendered.
Is there a selector ?
I managed to create the desired output with some JS, as it's the last page, I can append the footer and position it to the bottom with `position:absolute; bottom:0;` and then remove page.js's bottom margins but I'm not sure if it will create any side effects.
```js
class RemoveBottomMarginLastPage extends Paged.Handler
{
constructor( chunker, polisher, caller )
{
super( chunker, polisher, caller );
}
afterRendered( pages )
{
let lastPage = pages[pages.length - 1];
let pageBox = lastPage.pagebox;
pageBox.style.gridTemplateRows = "[header] var(--pagedjs-margin-top) [page] calc(var(--pagedjs-pagebox-height) - var(--pagedjs-margin-top)) [footer] 0";
}
}
Paged.registerHandlers( RemoveBottomMarginLastPage );
```
Thanks,
Antoniohttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/182`requestAnimationFrame` is not defined2022-03-21T17:13:35ZBoris Budiniboris@cloud68.co`requestAnimationFrame` is not definedI am attempting to create a table of contents for a pdf that is being generated in puppeteer.
```
const body = 'html string'
// add a polyfill script for requestAnimationFrame
await page.addScriptTag({
url: 'https://gist.github.c...I am attempting to create a table of contents for a pdf that is being generated in puppeteer.
```
const body = 'html string'
// add a polyfill script for requestAnimationFrame
await page.addScriptTag({
url: 'https://gist.github.com/paulirish/1579671.js',
});
// add the polyfill for pagedjs to the puppeteer page
await page.addScriptTag({
url: 'https://unpkg.com/pagedjs/dist/paged.polyfill.js',
});
await page.emulateMediaType('print');
// set the html as the content of the page.
await page.setContent(body);
const pages = new Previewer(body);
// ->
//ReferenceError: requestAnimationFrame is not defined
at new Queue (/Users/saundes/r/reports-api/node_modules/pagedjs/lib/utils/queue.js:28:17)
at new Chunker (/Users/saundes/r/reports-api/node_modules/pagedjs/lib/chunker/chunker.js:61:14)
at new Previewer (/Users/saundes/r/reports-api/node_modules/pagedjs/lib/polyfill/previewer.js:42:20)
at generateReport (/Users/saundes/r/reports-api/app/reports/createPdf.js:98:40)
```
Could you provide some advice on how to resolve this issuehttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/196Break-before: column doesn't work unless it is added inline in html2023-05-04T14:19:58ZBoris Budiniboris@cloud68.coBreak-before: column doesn't work unless it is added inline in htmlGiven that the column layout is used
```
.columns {
columns: 4;
}
```
When the rule is declared in CSS such as following it doesn't work because pagedjs overrides it.
```
.col-break-before{
break-before: column;
}
```
The expected be...Given that the column layout is used
```
.columns {
columns: 4;
}
```
When the rule is declared in CSS such as following it doesn't work because pagedjs overrides it.
```
.col-break-before{
break-before: column;
}
```
The expected behavior is that it should work without inline styles. If that is not possible, it needs to be documented somewhere as a limitation.
There is a workaround for that: adding inline style declaration, such as:
```
<h1 style="break-before:column;">
Column should break before
</h1>
```
Here is an example:
https://jsfiddle.net/uw0farn9/julientaqjulien@coko.foundationjulientaqjulien@coko.foundationhttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/199Sidenotes, or footnotes on the side2022-03-21T17:35:34ZBoris Budiniboris@cloud68.coSidenotes, or footnotes on the sideFollowing on [this conversation](https://mattermost.pagedmedia.org/pagedmedia/pl/ti6ck1konfgfmgkjdjo3uzsibc), I state the problem again : a sidenote positionned at a bottom of a page is simply cut off. What do you suggest ? Is it possib...Following on [this conversation](https://mattermost.pagedmedia.org/pagedmedia/pl/ti6ck1konfgfmgkjdjo3uzsibc), I state the problem again : a sidenote positionned at a bottom of a page is simply cut off. What do you suggest ? Is it possible to CSS-fix a maximal Y position AND to push every sidenote "higher" whenever the last sidenote of the page exceeds the text area ?
Here are a few cases showing the different behaviors:
- truncated sidenote: ![image](/uploads/31f3c6ce212adf57f66765b7cdb1923e/image.png)
- truncated sidenote yet pushing up the body: ![image](/uploads/395e86d26282e117cfcd76e00a13e4b1/image.png)
- absent sidenote: ![image](/uploads/e158e099f537db56ad2408be7d084ba5/image.png)
Here is a the html code for a sidenote :
```html
<p>My text in the body<span><label for="sn-1" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">My sidenote on the side<br />
<br />
</span></span> and that is it.</p>
```
and the corresponding css:
```css
.sidenote, .marginnote {
float: right;
clear: right;
margin-right: -49mm;
width: 42mm;
margin-top: 0;
margin-bottom: 0;
font-size: 1.1rem;
line-height: 1.3;
vertical-align: baseline;
position: relative;
}
```JulieJuliehttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/202Not starting page counter on cover page2021-05-10T14:38:11ZBoris Budiniboris@cloud68.coNot starting page counter on cover pageI'm looking for the way how to start page numbering from one the second page, not from the cover.
I have following HTML:
```html
<section class="page-cover">
</section>
<section class="page-content">
</section>
```
CSS:
```css
.page...I'm looking for the way how to start page numbering from one the second page, not from the cover.
I have following HTML:
```html
<section class="page-cover">
</section>
<section class="page-content">
</section>
```
CSS:
```css
.page-content {
counter-increment: page 0;
page: pageContent;
}
@page pageContent {
@bottom-left {
content: counter(page) " / " counter(pages);
}
}
```
The `counter-increment` idea is from https://gitlab.pagedmedia.org/tools/pagedjs/issues/78.
My page numbers are visible on the first page in the `page-content` section, this is OK.
But it starts with the number of `2`. This is not OK. :-)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/204Can't put one page into multiple named groups2022-03-21T17:47:09ZBoris Budiniboris@cloud68.coCan't put one page into multiple named groupsSee https://codesandbox.io/s/pagedjs-one-page-in-multiple-named-groups-bug-xierz
Actual: The `div.page-group1.page-group2` belongs to both page groups, but only styles from `@page group2` are applied.
Expected: Styles from both named ...See https://codesandbox.io/s/pagedjs-one-page-in-multiple-named-groups-bug-xierz
Actual: The `div.page-group1.page-group2` belongs to both page groups, but only styles from `@page group2` are applied.
Expected: Styles from both named groups are applied.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/205A top left margin box width is not correct when content is taken from a css v...2022-03-21T17:48:43ZBoris Budiniboris@cloud68.coA top left margin box width is not correct when content is taken from a css variableSee https://codesandbox.io/s/pagedjs-running-headers-text-wrap-bug-jt4md?file=/print.css
On pages 2 and 3, there is some content in @top-left and @top-right
As you can see on page 2, the @top-left width is correct, and text is properly...See https://codesandbox.io/s/pagedjs-running-headers-text-wrap-bug-jt4md?file=/print.css
On pages 2 and 3, there is some content in @top-left and @top-right
As you can see on page 2, the @top-left width is correct, and text is properly wrapped.
On page 3, the @top-left width is incorrect.
The only difference is that for page 3 the @top-left content is taken from a string-set variable, and for page 2 the @top-left content is a plain string.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/207layout.js findEndToken logic wrong2020-06-13T06:23:58ZBoris Budiniboris@cloud68.colayout.js findEndToken logic wrongI got an exception (line numbers wrong due to added logging code):
```
> An uncaught exception happened within the HTML page http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: Error: TypeError: node.getAttribute i...I got an exception (line numbers wrong due to added logging code):
```
> An uncaught exception happened within the HTML page http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: Error: TypeError: node.getAttribute is not a function
at findElement (http://localhost:8081/_/js/paged.js:602:19)
at Layout.findEndToken (http://localhost:8081/_/js/paged.js:1738:18)
at Page.checkUnderflowAfterResize (http://localhost:8081/_/js/paged.js:2097:36)
at http://localhost:8081/_/js/paged.js:2069:12
```
My added console logging showed two text nodes in a row. The problematic code appears to be this, from findEndToken:
```
if (isText(lastChild)) {
if (lastChild.parentNode.dataset.ref) {
lastNodeIndex = indexOf(lastChild);
lastChild = lastChild.parentNode;
} else {
lastChild = lastChild.previousSibling;
}
}
let original = findElement(lastChild, source);
```
I think `lastChild = lastChild.previousSibling` should be repeated until an element node is encountered. I wonder if the similar `lastChild = lastChild.previousSibling` on line 536 has the same problem.
The html that caused this (snippet that ended up at the page break):
```
<div class="sect2">
<h3 id="_default_page_attribute_plantuml_default_options_inline"><a class="anchor" href="#_default_page_attribute_plantuml_default_options_inline"></a>Default page attribute <code>:plantuml-default-options: inline</code></h3>
<div class="imageblock plantuml">
<div class="content">
<img src="../_images/0c8c1cc9af77582e1d52275ab142eaffe79423b2.png" alt="diagram">
</div>
<div class="title">Figure 5. As svg inline from page attribute</div>
</div>
</div>
```
My console logging might be useful and might be comprehensible. The first entry is the text node that is expected to be an element node. The rest is a depth first traversal of the DOM tree from the text node's parent. The two adjacent text nodes are the last two children of the parent.
```
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: bad node type: 3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents: ' '
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 0
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents: Default page attribute :plantuml-default-options: inline
Figure 5. As svg inline from page attribute
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents: Default page attribute :plantuml-default-options: inline
Figure 5. As svg inline from page attribute
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 2
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents: Default page attribute :plantuml-default-options: inline
Figure 5. As svg inline from page attribute
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents: Default page attribute :plantuml-default-options: inline
Figure 5. As svg inline from page attribute
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 4
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents: Default page attribute :plantuml-default-options: inline
Figure 5. As svg inline from page attribute
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 5
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: H3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents: Default page attribute :plantuml-default-options: inline
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 6
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: A
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 6
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents: Default page attribute
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 6
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: CODE
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents: :plantuml-default-options: inline
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 7
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents: :plantuml-default-options: inline
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 5
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:
Figure 5. As svg inline from page attribute
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 6
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 6
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 7
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 7
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: IMG
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 6
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: DIV
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents: Figure 5. As svg inline from page attribute
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 7
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents: Figure 5. As svg inline from page attribute
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 6
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 5
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 4
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 2
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: This is the bad node
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: depth: 1
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: testNode type: 3
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: nodeName: #text
console log for http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: log: contents:
> An uncaught exception happened within the HTML page http://localhost:8081/pdfs/1.0/images/_attachments/plantuml-embedded.pdf: Error: TypeError: node.getAttr
```https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/208Use of querySelectorEscape misguided2020-05-19T20:48:02ZBoris Budiniboris@cloud68.coUse of querySelectorEscape misguidedI'm working with a document that has an id starting with a digit, '3rd-party', and adding TOC page numbers via
```
.toc a::after {
content: "p. " target-counter(attr(href), page);
float: right;
}
```
I get an exception (line numbers...I'm working with a document that has an id starting with a digit, '3rd-party', and adding TOC page numbers via
```
.toc a::after {
content: "p. " target-counter(attr(href), page);
float: right;
}
```
I get an exception (line numbers are probably off from paged.esm.js):
```
> An uncaught exception happened within the HTML page http://localhost:8081/refguide/_attachments/refguide-pdf.pdf: Error: DOMException: Failed to execute 'querySelector' on 'Element': '#3rd-party' is not a valid selector.
at http://localhost:8081/_/js/paged.js:29604:37
at NodeList.forEach (<anonymous>)
at http://localhost:8081/_/js/paged.js:29598:12
at Array.forEach (<anonymous>)
at TargetCounters.afterPageLayout (http://localhost:8081/_/js/paged.js:29591:36)
at http://localhost:8081/_/js/paged.js:1164:25
at Array.forEach (<anonymous>)
at Hook.trigger (http://localhost:8081/_/js/paged.js:1163:14)
at Chunker.layout (http://localhost:8081/_/js/paged.js:2716:37)
at async Chunker.renderAsync (http://localhost:8081/_/js/paged.js:2637:16)
```
Looking into the code, I believe the escaping code is being applied to the wrong string. I believe it should be escaping the id, not the id prefixed by the '#' 'it's an id' symbol.
To try to verify this, I made the beginnings of util.js querySelectorEscape look like this:
```
export function querySelectorEscape(value) {
if (arguments.length == 0) {
throw new TypeError("`CSS.escape` requires an argument.");
}
var string = String(value);
if (string.charAt(0) === '#') {
return '#' + querySelectorEscape(string.slice(1))
}
```
and now my document processes without exceptions. This doesn't seem like an appropriate patch, and I'm not sure what other inputs this function might receive, so I'm hoping the experts can fix this in a good way.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/209Table is overlapping with the page numbers section and truncating abruptly, w...2021-07-20T09:31:41ZBoris Budiniboris@cloud68.coTable is overlapping with the page numbers section and truncating abruptly, when page is ending with a table.Hi,
I have HTML content, that needs to be convert to pdf. Since Pagedjs providing impressive support for table of contents- target counters, I have chosen this. The library is working fine for texts, images and charts, however, when it f...Hi,
I have HTML content, that needs to be convert to pdf. Since Pagedjs providing impressive support for table of contents- target counters, I have chosen this. The library is working fine for texts, images and charts, however, when it faces a table, there are a few issues. Especially, when a page ends with a table. The table is overlapping with the page number section, sometimes even truncating the table abruptly, though I am using
`table, tr { break-inside: avoid; }` in my stylesheet
to avoid breaking of tables while page breaking.
I went through the functions in pagedjs, which are related to overflowing and breaking(findOverflow,findBreakToken...) tried to debug and update, still no luck.
Can someone help me out, with this, Please?
I am posting the screenshots and the HTML content I am trying to print.
Here is the HTML- [demo-patient.html](/uploads/20f7fd3b21585dac92d43776759c57d9/demo-patient.html) - render this on the browser and check the pages from 14 to 17, you can understand the issue better.
![reports-2](/uploads/7edd792f072539fafdb40fe26e2590e8/reports-2.png)![reports-3](/uploads/e7b62e4cd21d40087a567a08dcbe2f79/reports-3.png)
Even if I change table and related elements- tr, td, thead, body to div or p tags, still I see the truncation of data.
![image](/uploads/ccb37b3b2f79a569bbda8ea706fed0b8/image.png)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/210Get target-counters without the rest of paged.js2021-07-20T09:29:34ZBoris Budiniboris@cloud68.coGet target-counters without the rest of paged.jsfrom @lohithdhanakonda
> Hi, Is there a way to segregate the table of contents- TargetCounters implementation from remaining code?
Just asking, actually, I am facing a few issues with remaining UI. So I want to implement only Target co...from @lohithdhanakonda
> Hi, Is there a way to segregate the table of contents- TargetCounters implementation from remaining code?
Just asking, actually, I am facing a few issues with remaining UI. So I want to implement only Target counters part. Is this possible?https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/211Infinite Loading on 50 Page example2020-06-15T06:52:06ZBoris Budiniboris@cloud68.coInfinite Loading on 50 Page examplehttps://s3.amazonaws.com/pagedmedia/pagedjs/examples/index.htmlhttps://s3.amazonaws.com/pagedmedia/pagedjs/examples/index.htmlhttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/212Managing where on a page/column the break happens2023-05-04T14:20:41ZBoris Budiniboris@cloud68.coManaging where on a page/column the break happensI have a 2 column layout that is destined for print. h2&ndash;5 are within the column and h1s span both columns. I'm using [Paged.js][1] for pagination.
These two pages show acceptable layouts:
[![enter image description here][2]][2]
...I have a 2 column layout that is destined for print. h2–5 are within the column and h1s span both columns. I'm using [Paged.js][1] for pagination.
These two pages show acceptable layouts:
[![enter image description here][2]][2]
But If there's a situation where a heading is at the bottom of a column, I'd like the heading to be forced to the top of next column.
[![enter image description here][3]][3]
If a new article starts in the bottom 40% of the page, I'd like that to be forced to the next page too.
[![enter image description here][4]][4]
For h2 and below I inject a div above the heading that, if the heading is at the bottom of its column, I inflate it to push into the next column.
[![enter image description here][5]][5]
This seems to do the job for h2–5 because they're inside a flow that's managed by the browser. But only if they're in the left column; if they're in the right, they get bumped off the page. E.g.:
[![enter image description here][6]][6]
Bumping H1s off the page causes issues, the shim inflates, but pushes the heading into an invisible area, or a few other strange situations.
[![enter image description here][7]][7]
[![enter image description here][8]][8]
The first image shows the heading that is present in the second image, shimmed off the page.
The following (slightly simplified) markup is what generates page 11 (right, second image)
```html
<div class="the-articles">
<article class="architectural-review.com paper-story noted">
<p>
No question, Rem is a genius. Nonetheless, his wake is toxic: stained by
Randian egos (both triumphal and crushed), the intense interpersonal
competition, and the exploitation of intellectual and manual labour. How
does it all end, you wonder. In some ways, Tomas Koolhaas’s documentary
was a preemptive eulogy. Death is present in every shot, tugging at the
great man’s sleeve. The film is also suffused by an intense melancholy. It
is the peculiar sadness of endings: when a family line is extinguished,
when change erases beauty and meaning, when an entire world order
disintegrates.
</p>
<p>
Starchitects are still with us, even though their era is over. Koolhaas
himself called time on it in the mid-2000s. It is no contradiction to
honour them, while admitting that we must give ourselves permission to
abandon the figure of the heroic architect, and along with it the Western
blueprint for greatness that Koolhaas has so relentlessly and obsessively
perfected.
</p>
<div class="tail-meta">
From:
<span class="url"
>https://www.architectural‑review.com/essays/reputations/rem‑koolhaas‑1944/10037224.article</span
>
</div>
<!-- SHIM IS HERE -->
<div class="shim-between-articles" style="height: 181.944px;"></div>
</article>
<article id="2415273718" class="newyorker.com paper-story noted">
<h1 class="article-title" id="h2415273718">
Love Is Not a Permanent State of Enthusiasm: An Interview with Esther
Perel
</h1>
</article>
</div>
```
I'm doing the shim-inflation inside `afterPageLayout`, it calls this function:
```
function identifyTooCloseToBottomHeading(
theHeading,
pageCutoffPercentage,
page,
pageFragment
) {
try {
if (theHeading !== null && theHeading !== undefined) {
const pageBox = page.element.getBoundingClientRect();
const headingBox = theHeading.getBoundingClientRect();
const pdelta = pageBox.bottom - headingBox.bottom;
const botPC = pdelta / pageBox.height; //Gives a % up the page. I.e. 100% is the top
const cutPC = pageCutoffPercentage[theHeading.tagName.toLowerCase()];
const oneRem = parseFloat(
getComputedStyle(document.documentElement).fontSize
);
if (botPC < cutPC) {
console.log("at risk", theHeading);
if (theHeading.previousElementSibling) {
AdjustShimSize(oneRem);
} else {
const thisArticle = theHeading.parentElement;
const prevArticle = thisArticle.previousElementSibling;
const shim = prevArticle.querySelector(".shim-between-articles");
const topMetaBox = thisArticle
.querySelector(".top-meta")
.getBoundingClientRect();
shim.style.height = `${
theHeading.getBoundingClientRect().height + topMetaBox.height
}px`;
}
}
}
} catch (e) {
console.log(e, theHeading);
}
function AdjustShimSize(oneRem) {
const shim = theHeading.previousElementSibling;
// calculate the height that it needs to be
try {
const shimBox = shim.getBoundingClientRect();
const container = shim.closest(".the-articles");
const containerBox = container.getBoundingClientRect();
// logShimDetails(theHeading, container, shimBox, nextElBox, containerBox, oneRem);
shim.style.height = `${containerBox.bottom - shimBox.bottom - oneRem}px`;
console.log("shimmed", theHeading);
} catch {
console.log("trouble with", theHeading);
}
}
}
```
This seems like it ought to work, but it's not very elegant. I suspect that there's something that I could be doing with the `breaktoken`? Is there a _correct_ way to do this?
---
for the H1s, I have also tried adding a class to the article above, depending on how many lines would be needed to bump the heading to the next page. I.e. a series of css rules:
```css
.n-line-fat-bottom-20 {
margin-bottom: calc(var(--wp-line-height) * 20) !important;
}
.n-line-fat-bottom-22 {
margin-bottom: calc(var(--wp-line-height) * 24) !important;
}
```
and then applying the class at the same point in the Paged.js lifecycle. It has similalry unhelpful results.
---
@JulieBlanc has been [very helpful, and suggested](https://mattermost.pagedmedia.org/pagedmedia/pl/jqouro7or3yzpyux16uas9bpuw):
```
h1 {
break-before: avoid;
}
h1 + p {
orphans: 8;
}
```
Which works in pure text documents, in most situations.
But in situations where the the heading is exactly at the bottom of the page/column, there are no orphans for the layout engine to worry about.
![image](/uploads/5f9bbc828a9be06bd2e7dc1060221edb/image.png)
Of if the element that comes after the `h1` isn't a `p`, for example, an `img`, then it's also not useful:
![image](/uploads/6f8921dc60f0f8c40bc1b570066609b3/image.png)
---
Indesign has a concept of [keep options](https://indesignsecrets.com/keep-options-interact.php) which seem related, Latex [has](https://tex.stackexchange.com/questions/32111/how-to-keep-heading-together-with-text) the [needspace](https://ctan.org/pkg/needspace) package/concept.
If I knew ahead of time which headings would need to break, I could give them a `break-before: column;` or `break-before: page;` rule, but by content isn't known ahead of time. Adding these rules after the fact doesn't _seem_ to work with the lifecycle of paged.js. I suspect that it *is* a lifecycle issue, as pushing the content off the page should cause a reflow of the next page if I was doing it at the right point/correct handler.
[1]: https://www.pagedjs.org/
[2]: https://i.stack.imgur.com/viJXw.png
[3]: https://i.stack.imgur.com/nK0gK.png
[4]: https://i.stack.imgur.com/E4plw.png
[5]: https://i.stack.imgur.com/O67Wv.png
[6]: https://i.stack.imgur.com/GApAm.png
[7]: https://i.stack.imgur.com/H4Hpp.png
[8]: https://i.stack.imgur.com/hbqyy.pnghttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/213Items appear in preview but hiding in print2020-06-07T14:18:00ZBoris Budiniboris@cloud68.coItems appear in preview but hiding in print![2020-06-07_17-02-19](/uploads/84b068cb4f178250799068da05a47d35/2020-06-07_17-02-19.png)
![2020-06-07_17-03-21](/uploads/a10f35160dbfd8179922cbaf789f7530/2020-06-07_17-03-21.png)
I solved it by adding:
.pagedjs_page_content {
wi...![2020-06-07_17-02-19](/uploads/84b068cb4f178250799068da05a47d35/2020-06-07_17-02-19.png)
![2020-06-07_17-03-21](/uploads/a10f35160dbfd8179922cbaf789f7530/2020-06-07_17-03-21.png)
I solved it by adding:
.pagedjs_page_content {
width: 100%;
height: 102% !important;
position: relative;
column-fill: auto;
border: double;
border-radius: 15px;
z-index: 2;
}
but it's affect the border .
Any Ideas please.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/217Error when page content shrinks2020-11-05T11:50:18ZBoris Budiniboris@cloud68.coError when page content shrinksI'm doing a thing, but I suspect that error is only exposed by that thing directly (if that's not too obtuse).
The error is:
```
Uncaught TypeError: Cannot read property 'nextSibling' of undefined
at nextSignificantNode (paged.poly...I'm doing a thing, but I suspect that error is only exposed by that thing directly (if that's not too obtuse).
The error is:
```
Uncaught TypeError: Cannot read property 'nextSibling' of undefined
at nextSignificantNode (paged.polyfill.js:1121)
at nodeAfter (paged.polyfill.js:626)
at Layout.findEndToken (paged.polyfill.js:1707)
at Page.checkUnderflowAfterResize (paged.polyfill.js:2060)
at paged.polyfill.js:2032
```
and it happens for me when I make items on a page smaller.
**How am I triggering it?**
I have hyperlinks from my text in footnotes. (I've [written up the *why* a bit here](https://notionparallax.co.uk/2020/footnotes-for-print).)
In `renderNode` I call a function that does a `fetch` to a link shortener. When it resolves it swaps out that node for one that takes up less space. I can go into more detail about how I'm doing that if you like, but I don't think it matters here.
![page_flow_shrink_issue](/uploads/f8132c60f979bd0d414b65e91813f63f/page_flow_shrink_issue.png)
If we number the pages 1–6 from the top left, what's happening here is that the links in the footnotes on p4 are shortened and take up less space. In an ideal world, they'd reflow from p5 and fill up the space, which would probably leave enough space for the article that starts on p6 to start on p5.
Because parts of the doc that filled a page no longer do so, I suspect that something is triggered to reflow things backwards.
This error blocks further execution, so in my case nothing in `afterRendered` gets excecuted. (I don't know if it's waiting for the promise to resolve, or if it's just a coincidence that it hasn't got there by the time the error happens.)
In this specific case, the reason for the problem is that the `renderNode` handler isn't waiting for the promise to resolve, and it letting it resolve later. I'm sure there's a better way to handle this, but it's not really in the scope of this bug.
I think it might be related to: https://gitlab.pagedmedia.org/tools/pagedjs/issues/207
There are two ways to fix this I guess.
1. find out why things don't flow backwards
2. I can fix whatever is causing the reflow so that the code isn't called
I'm mainly just writing this up so that I get karma points that I can spend on another day of riding a motorbike in Sydney without getting hit by a truck.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/218Named page styles are not correctly applied2020-06-15T08:13:13ZBoris Budiniboris@cloud68.coNamed page styles are not correctly appliedConsider the following document: [page.html](/uploads/247c2f1dfc113b9da96289b79017763b/page.html) with a single named page "small" that has a background color, a size (4cm * 4cm), a margin...
But here's what I get:
![pdf](/uploads/bab4...Consider the following document: [page.html](/uploads/247c2f1dfc113b9da96289b79017763b/page.html) with a single named page "small" that has a background color, a size (4cm * 4cm), a margin...
But here's what I get:
![pdf](/uploads/bab47e68f2e60ac8238b4ae84caa7858/pdf.png)
Interestingly, in the preview the background is applied:
![preview](/uploads/840866416b2f8a534503ba108020c206/preview.png)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/221Where can I learn more about adjusting the breakToken in the afterPageLayout(...2022-03-21T17:33:02ZBoris Budiniboris@cloud68.coWhere can I learn more about adjusting the breakToken in the afterPageLayout() callback? Is there an example of this somewhere?Heya! PagedJS fan here with a question!
From https://www.pagedmedia.org/paged-js/ …
> `afterPageLayout(pageElement, page, breakToken)` runs after a single page has gone through layout, and allows adjusting the breakToken
**Where can ...Heya! PagedJS fan here with a question!
From https://www.pagedmedia.org/paged-js/ …
> `afterPageLayout(pageElement, page, breakToken)` runs after a single page has gone through layout, and allows adjusting the breakToken
**Where can I learn more about adjusting the breakToken in the afterPageLayout() callback? Is there an example of this somewhere?**
Still wondering how I might append content into a page afterPageLayout and possibly move some content to the next page after appending if necessary.
Attached below is an example ballot created using PagedJS with redlines showing the content I'd like to be able to append to each page's content after layout, and an example of content which would need to be moved to the next page.
[VotingWorks-Sample-Ballot--General-Election--English-Spanish-v2020-06-24-continue-example.pdf](/uploads/232a411085cc0f4ff21ccd76c123f72e/VotingWorks-Sample-Ballot--General-Election--English-Spanish-v2020-06-24-continue-example.pdf)
[Issue creation requested](https://mattermost.pagedmedia.org/pagedmedia/pl/r8x3x6ciqi8uzm7c5tukug19gh) by @julientaq in the hopes that @fchasen can describe how to use the breakToken… and perhaps provide some examples? :fingers_crossed:
Originally posted here: https://mattermost.pagedmedia.org/pagedmedia/pl/3yddeeh9htroiruetqey451asajulientaqjulien@coko.foundationjulientaqjulien@coko.foundationhttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/222CSS grid elements doesn’t work correctly on multiple pages2020-06-27T11:42:01ZBoris Budiniboris@cloud68.coCSS grid elements doesn’t work correctly on multiple pagesIf an element display in CSS grid overflows on multiple page, children are not broken correctly.
With a simple grid in two columns, the expected behavior is the following (as if we cut the element and is children (A & B) to make several...If an element display in CSS grid overflows on multiple page, children are not broken correctly.
With a simple grid in two columns, the expected behavior is the following (as if we cut the element and is children (A & B) to make several pages)
![schema-grid_expected](/uploads/7add2fc51e647bd72848028bcbd65825/schema-grid_expected.png)
The result in paged.js is as follow:
![schema-grid_result](/uploads/325474510de25c50666caf69abe58ca8/schema-grid_result.png)
It seems that it is the first child (A) which is first rendered in the grid and then when iy has finished rendering, the second child (B) finally appears on the page. I think it's because Paged.js reads the DOM elements one by one to render them but doesn't take into account that the parent is displayed in CSS grid.
HTML example: [issue-grid.html](/uploads/f692dcbdf019a5e97403899793390d9d/issue-grid.html)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/225Split tables: css content with counters in td::before is lost in the first ro...2021-07-20T09:31:41ZBoris Budiniboris@cloud68.coSplit tables: css content with counters in td::before is lost in the first row with SemanticUIHi :)
In tables that are styled with SemanticUI and split into pages, css contents that use a counter() text are lost in the first row:
![first ::before is lost](/uploads/04092eaab8bc9e586dc762b0c46a091e/image.png)
Example: https://js...Hi :)
In tables that are styled with SemanticUI and split into pages, css contents that use a counter() text are lost in the first row:
![first ::before is lost](/uploads/04092eaab8bc9e586dc762b0c46a091e/image.png)
Example: https://jsfiddle.net/mcdqwkxu/
```css
#mytable td::before {
content: "Figure " counter(countFigures) " - ";
}
```
Workarounds:
- don't use SemanticUI
- use e.g. `#myTable td a::before { content: "Figure " counter(countFigures) " - " }` (not td directly, something inside of it)
- `Emulate css media type: print` **occasionally** (usually the first occurrence) fixes thishttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/226Split tables: first, empty td is lost in the first row with SemanticUI2021-10-07T11:58:26ZBoris Budiniboris@cloud68.coSplit tables: first, empty td is lost in the first row with SemanticUIIf a table styled with SemanticUI is split and the first `td` has no text, it is removed. Usecase for empty first `td`: Fill it with a chapter number
![first td went missing](/uploads/6c1bab2779b067f6805efa3173764408/image.png)
Example...If a table styled with SemanticUI is split and the first `td` has no text, it is removed. Usecase for empty first `td`: Fill it with a chapter number
![first td went missing](/uploads/6c1bab2779b067f6805efa3173764408/image.png)
Example: https://jsfiddle.net/La43shqp/2/
Workarounds:
- don't use SemanticUI
- put content in the first `td` (not always an option...)
- `Emulate css media type: print` **occasionally** (usually the first occurrence) fixes this
- ???
Probably related: https://gitlab.pagedmedia.org/tools/pagedjs/issues/225https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/227Some cells are lost when a table is chunked2022-02-03T23:01:49ZBoris Budiniboris@cloud68.coSome cells are lost when a table is chunkedHere's a mostly unstyled document that contains a table with a big cell: [long-table.html](/uploads/a84c4a1452a3f9d8780e53efec008fc5/long-table.html).
As you can see the the author cell on the first page is missing and on the second pag...Here's a mostly unstyled document that contains a table with a big cell: [long-table.html](/uploads/a84c4a1452a3f9d8780e53efec008fc5/long-table.html).
As you can see the the author cell on the first page is missing and on the second page, the table only contains two columns (the issue and date columns are missing).https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/228add support for `vh` and `vw` units.2020-11-03T11:03:38ZBoris Budiniboris@cloud68.coadd support for `vh` and `vw` units.This will let us options for multi output.
1vh = 1% of the page-height;
1vw = 1% of the page-width;
`100 vw` and `100 vh` cover all the paper.
going into the bleed would be `105vw` for example.
from @NicolasT .This will let us options for multi output.
1vh = 1% of the page-height;
1vw = 1% of the page-width;
`100 vw` and `100 vh` cover all the paper.
going into the bleed would be `105vw` for example.
from @NicolasT .https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/229Add support for @media print (min-width) (max-width) etc.2020-07-07T14:02:05ZBoris Budiniboris@cloud68.coAdd support for @media print (min-width) (max-width) etc.This will let us build responsive CSS: 1 stylesheet for a lot of different outputs.
`@media print and (min-size: A5)`
`@media print and (min-height: 229mm)`
etc.This will let us build responsive CSS: 1 stylesheet for a lot of different outputs.
`@media print and (min-size: A5)`
`@media print and (min-height: 229mm)`
etc.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/231Not paging web components correctly2021-12-14T21:56:06ZBoris Budiniboris@cloud68.coNot paging web components correctlyPaged.js is not paging web components correctly.
**Expected Behaviour:** When a custom element/web component spans a page it should be paginated to the next page.
**Actual Behaviour:** Custom elements/web components that span pages rep...Paged.js is not paging web components correctly.
**Expected Behaviour:** When a custom element/web component spans a page it should be paginated to the next page.
**Actual Behaviour:** Custom elements/web components that span pages repeat the first page or disappear altogether.
Please see the test fixture project here:
https://github.com/rgladwell/pagedjs-wc-fixture
I suspect this is because Paged.js is incorrectly calculating the size of web components, perhaps because they haven't fully rendered yet.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/232Reset multiple counters in css2020-07-14T13:09:35ZBoris Budiniboris@cloud68.coReset multiple counters in css# Current situation
`counter-reset` in a css file resets the first counter only, even when multiple counters shall be reset.
[JSFiddle](https://jsfiddle.net/cq14sw7x/1/)
Example:
```css
.counterReset {
counter-reset: c1 c2 c3;
}
```
...# Current situation
`counter-reset` in a css file resets the first counter only, even when multiple counters shall be reset.
[JSFiddle](https://jsfiddle.net/cq14sw7x/1/)
Example:
```css
.counterReset {
counter-reset: c1 c2 c3;
}
```
results in
```html
<h2 class="counterReset"
data-ref="4e5dc70d-f926-4bcb-a3db-7b4906c53814"
data-counter-c1-reset="0"
data-counter-reset="c1">Counter reset: in .css</h2>
```
instead of
```html
<h2 class="counterReset"
data-ref="4e5dc70d-f926-4bcb-a3db-7b4906c53814"
data-counter-c1-reset="0"
data-counter-reset="c1"
data-counter-c2-reset="0"
data-counter-reset="c2"
data-counter-c3-reset="0"
data-counter-reset="c3">Counter reset: in .css</h2>
```
# Target situation
Multiple counters can be reset in a css file.
# Workaround
- Inline styling (ugh)
```html
<h2 style="counter-reset: c1 c2 c3;">Counter reset: inline</h2>
```
- reset each counter individually in css, which i think is not possible to do for the same selectorhttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/233Copy CSS to Repositioned Element2020-07-15T19:17:06ZBoris Budiniboris@cloud68.coCopy CSS to Repositioned ElementI'm currently exploring using Pagedjs for an ebook-to-print workflow at my company. We work on a lot of textbooks, and one of our main requirements is the ability to position definitions in smaller columns to the left or right of the mai...I'm currently exploring using Pagedjs for an ebook-to-print workflow at my company. We work on a lot of textbooks, and one of our main requirements is the ability to position definitions in smaller columns to the left or right of the main text. I have a custom module I'm adding with `Paged.registerHandlers()` that does this quite well:
![Screen_Shot_2020-07-15_at_2.02.24_PM](/uploads/30e24fc6fbc111b478e60804be02c563/Screen_Shot_2020-07-15_at_2.02.24_PM.png)
One issue I'm running into, though, is copying styles to the repositioned element. One other requirement we have is the ability to keep the CSS cascade from the digital ebook, so that we can keep the CSS as is as much as possible. I was hoping to copy the styles before Pagedjs parses the content using `window.getComputedStyle` in the `beforeParsed` hook, but all of the styles returned by `getComputedStyle` are empty. Here is how I'm trying to copy the styles:
```js
export const copyCssRules = (el, newNode) => {
const styles = window.getComputedStyle(el);
Object.keys(styles).forEach((key) => newNode.style.setProperty(
key,
styles.getPropertyValue(key),
styles.getPropertyPriority(key),
));
};
```
This is being called in the `beforeParsed` hook of the handler that positions the definitions. Essentially, my hope is to be able to take any CSS properties with a selector of (for example) `.glossary .definition` and apply it directly to the repositioned element. The selector for the repositioned element would be (for example) `.column .definition`, so any CSS with a selector of `.glossary .definition` wouldn't apply.
Is there a way to copy styles over to elements that have been repositioned, or is there an expected best practice for this with Pagedjs?https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/234`@media` in original document CSS is not written as is2020-08-13T12:10:52ZBoris Budiniboris@cloud68.co`@media` in original document CSS is not written as isHello,
I'm trying Paged.js on a page which embeds html5 boilerplate. It adds this style:
```css
@media print {
*,
:after,
:before {
color:#000!important;
text-shadow:none!important;
background:0 0!important;
-webkit-box-shad...Hello,
I'm trying Paged.js on a page which embeds html5 boilerplate. It adds this style:
```css
@media print {
*,
:after,
:before {
color:#000!important;
text-shadow:none!important;
background:0 0!important;
-webkit-box-shadow:none!important;
box-shadow:none!important
}
a,
a:visited {
text-decoration:underline
}
/* ... */
}
```
When Paged.js injects it in the document again, it looks like this instead:
```css
@media print {
}
*,
:after,
:before {
color:#000!important;
text-shadow:none!important;
background:0 0!important;
-webkit-box-shadow:none!important;
box-shadow:none!important
}
a,
a:visited {
text-decoration:underline
}
/* ... */
```
It seems the CSS declaration is not wrapped within its containing media query.
So some styles leak all over the place (and in this case, I cannot undo them).https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/236Large Table truncated and poorly paginated2020-08-24T07:21:28ZBoris Budiniboris@cloud68.coLarge Table truncated and poorly paginatedI was starting an evaluation of Pagedjs - because it sounds wonderful and sort-of magic.
After failing to get the cli version running I tried just rendering a page with the polyfill.
[test.html](/uploads/4667f73762c1ccf5c12e99cf5662ed54...I was starting an evaluation of Pagedjs - because it sounds wonderful and sort-of magic.
After failing to get the cli version running I tried just rendering a page with the polyfill.
[test.html](/uploads/4667f73762c1ccf5c12e99cf5662ed54/test.html)
It is an odd page indeed, being composed of a table with 100's of repeated rows but the results were disappointing.
The table header appears on the first page. A page of rows on the second page without headers or footers - and that was it. Should be 10+ pages.
Am I being stupid or unreasonable? Tried various chromium browsers on Win10.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/237Incorrect previewer behaviour in Safari2020-08-21T18:24:03ZBoris Budiniboris@cloud68.coIncorrect previewer behaviour in SafariSafari Version 13.1.2 (15609.3.5.1.3)
MacOS 10.15.6 (19G73
See https://codesandbox.io/s/pagedjs-safari-infinite-rendering-issue-nu0mf
Notice `line-height: 15px` in styles.css. It should render fine, in console you should see "preview d...Safari Version 13.1.2 (15609.3.5.1.3)
MacOS 10.15.6 (19G73
See https://codesandbox.io/s/pagedjs-safari-infinite-rendering-issue-nu0mf
Notice `line-height: 15px` in styles.css. It should render fine, in console you should see "preview done 2 pages".
Now change line-height to `30px` and reload. The previewer will go into "infinite rendering loop". You will not see the "preview done" console log, and if you inspect the html structure, you will see that the number of pages rendered just keeps growing without stopping.
Now change line-height to `40px` and reload. You will see "preview done 1 page", and a warning that says "Unable to layout item".
Interestingly enough, if you remove the outer `div.book` from the template, the "infinite rendering loop" issue goes away, but the 40px-issue remains.
As I understand, officially Safari is not supported by pagedjs at the moment. But maybe it will help to debug in the future.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/238When a table is chunked the <colgroup> and <caption> should be repeated2021-07-20T09:31:41ZBoris Budiniboris@cloud68.coWhen a table is chunked the <colgroup> and <caption> should be repeatedLet's say that the following table does not fit on one page:
```html
<table>
<caption>Superheros and sidekicks</caption>
<colgroup>
<col>
<col span="2" class="batman">
<col span="2" class="flash">
</c...Let's say that the following table does not fit on one page:
```html
<table>
<caption>Superheros and sidekicks</caption>
<colgroup>
<col>
<col span="2" class="batman">
<col span="2" class="flash">
</colgroup>
<tr>
<td> </td>
<th scope="col">Batman</th>
<th scope="col">Robin</th>
<th scope="col">The Flash</th>
<th scope="col">Kid Flash</th>
</tr>
<tr>
<th scope="row">Skill</th>
<td>Smarts</td>
<td>Dex, acrobat</td>
<td>Super speed</td>
<td>Super speed</td>
</tr>
</table>
```
In this case, Paged.js will use the function `rebuildAncestors` to "recreate" a table from the node that does not fit on the page.
For instance, if the last/second row does not fit, Paged.js will "recreate" the following table on the next page:
```html
<table>
<tr>
<th scope="row">Skill</th>
<td>Smarts</td>
<td>Dex, acrobat</td>
<td>Super speed</td>
<td>Super speed</td>
</tr>
</table>
```
As you can see the `<colgroup>` and `<caption>` elements are missing.
Should we handle this case in the core library? Should we document how to implement this feature using `Paged.Handler.afterPageLayout` (similar to what we are doing to repeat the `<thead>` element)?https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/240Seems to create an empty row in my table at the end of each page2021-07-20T09:31:41ZBoris Budiniboris@cloud68.coSeems to create an empty row in my table at the end of each pageI was trying something fairly simple where I would create a table that covers 3 pages. It works fine if I don't add any @page margin, but once I add the margin it somehow creates an extra empty row in the table.
Margin added:
`@page {
...I was trying something fairly simple where I would create a table that covers 3 pages. It works fine if I don't add any @page margin, but once I add the margin it somehow creates an extra empty row in the table.
Margin added:
`@page {
@top-left {
content: counter(page) ' of ' counter(pages);
}
margin: 0.5in 0.5in;
}`
Result:
![image](/uploads/d8cbe99b6ff19d219b8e7083551f65d9/image.png)
File:
[table-test.html](/uploads/8daa87747a6af193ffd91be0d41ea247/table-test.html)
Note: This happens in Chrome and Edge, in Firefox it's not even rendering the pages properly anymore.
Any ideas?https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/241Bordered block is truncated "because of" ad-hoc Paged.js CSS rules2020-09-02T12:31:51ZBoris Budiniboris@cloud68.coBordered block is truncated "because of" ad-hoc Paged.js CSS rulesHello,
I am facing an issue where sometimes, when there is not enough available space, a bordered content will be cropped/truncated:
![image](/uploads/9635340948f7c205fe437b71b39233c6/image.png)
If I uncheck `column-width`, the border...Hello,
I am facing an issue where sometimes, when there is not enough available space, a bordered content will be cropped/truncated:
![image](/uploads/9635340948f7c205fe437b71b39233c6/image.png)
If I uncheck `column-width`, the border appears, although it overflows the paged content area:
![image](/uploads/b870553322fb511674aa4f5e56670382/image.png)
This happens on Firefox only, Chrome is fine.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/242display: flex pushes the next columns on the next page2021-12-14T21:56:06ZBoris Budiniboris@cloud68.codisplay: flex pushes the next columns on the next pageConsider the following example: [flex-columns.html](/uploads/5c9a39041e9ce4a37787ff9bba29d9a5/flex-columns.html)
And here's the result without Paged.js:
![without-pagedjs1](/uploads/76fa46e2e6e4abfd114141e97ff24e03/without-pagedjs1.png...Consider the following example: [flex-columns.html](/uploads/5c9a39041e9ce4a37787ff9bba29d9a5/flex-columns.html)
And here's the result without Paged.js:
![without-pagedjs1](/uploads/76fa46e2e6e4abfd114141e97ff24e03/without-pagedjs1.png)
And the result with Paged.js:
![with-pagedjs1](/uploads/db576e20d5635a9ed7af2aecb3417b14/with-pagedjs1.png)
Since I'm familiar with the codebase it makes sense but I think this is not the expected result, right?
I think the result should be:
![with-pagedjs-expected](/uploads/1a2c44d3eddaac52e6ceb257dd94cd31/with-pagedjs-expected.png)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/245"break-inside: avoid" rule should be ignored when the element cannot fit on t...2020-09-11T11:56:14ZBoris Budiniboris@cloud68.co"break-inside: avoid" rule should be ignored when the element cannot fit on the next pageCurrently, Paged.js will move the element to the next page:
![localhost_63342_pagedjs_specs_breaks_break-inside_break-inside-avoid_long-section.html__ijt_ouvrkki9j4o2r0e60h0p1l9is3_Laptop_with_MDPI_screen_](/uploads/3bd7d74862f26620f79e...Currently, Paged.js will move the element to the next page:
![localhost_63342_pagedjs_specs_breaks_break-inside_break-inside-avoid_long-section.html__ijt_ouvrkki9j4o2r0e60h0p1l9is3_Laptop_with_MDPI_screen_](/uploads/3bd7d74862f26620f79e032bd7824218/localhost_63342_pagedjs_specs_breaks_break-inside_break-inside-avoid_long-section.html__ijt_ouvrkki9j4o2r0e60h0p1l9is3_Laptop_with_MDPI_screen_.png)
And then, since the element still does not fit on the page, Paged.js will rightfully break the element and thus, ignore the impractical rule (i.e. impossible to comply).
In the end, Paged.js adds unnecessary blank space. It would be better to ignore the rule right away and produces:
![localhost_63342_pagedjs_specs_breaks_break-inside_break-inside-avoid_long-section.html__ijt_dp8clis2stupeer3p5pjpf3f8u_Laptop_with_MDPI_screen_](/uploads/f5cc86901195b8160e99a385834f52a0/localhost_63342_pagedjs_specs_breaks_break-inside_break-inside-avoid_long-section.html__ijt_dp8clis2stupeer3p5pjpf3f8u_Laptop_with_MDPI_screen_.png)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/246Table overflow premature breaks2020-09-12T11:37:31ZBoris Budiniboris@cloud68.coTable overflow premature breaksI have a table that spans about 25 pages or so, about 5 columns and each td has an arbitrary length of text that may or may not wrap to multiple lines. The problem with this is as soon as a few td's have their text wrapped to a new line ...I have a table that spans about 25 pages or so, about 5 columns and each td has an arbitrary length of text that may or may not wrap to multiple lines. The problem with this is as soon as a few td's have their text wrapped to a new line and this goes on for multiple elements across the whole documents, you start seeing weird behavior of random breaks in the table. Neither orphans or break-inside can prevent this.
![image](/uploads/070e01b16f54b058c2e22963d4a4a41f/image.png)
Only thing that does prevent this without modifying any content is to set all tables to `height: 100%` but then when I actually want a break before something that last table will just look weird. And to prevent this while modifying your content is to prevent word wraps which is also counter intuitive.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/247Handling column breaks in multi-column layout2021-03-24T09:05:56ZBoris Budiniboris@cloud68.coHandling column breaks in multi-column layoutHi guys! First of all let me thank you for a great library. I really enjoy using it and the documentation is great.
Now I'm trying to make a very basic layout with multiple columns. I'm currently using `Chromium 85`. Everything seems to...Hi guys! First of all let me thank you for a great library. I really enjoy using it and the documentation is great.
Now I'm trying to make a very basic layout with multiple columns. I'm currently using `Chromium 85`. Everything seems to work fine except for the handling of column breaks. The problem is that I get widowed headers which I try to fix with `break-after: avoid`. The fix does not work though.
I'm very new to the multi-column layouts but as far as I know, it *should* work according to the W3C specs, but it seems like it's not supported by the browser. Not sure whether that's the case though.
So, I totally understand that the name of your library is `paged`, not `columned` and you may consider this problem out of its scope, but it seems to me that this is a very basic task for creating book layouts. So maybe you can consider creating a multi-column polyfill as a feature request.
In case you know any fix for the problem I described, here is an illustration and a test document. Maybe some JS code may help solve this or maybe I should use some other browser with better support of multi-column layouts. Thank you again!
![Screenshot_20200915_105628](/uploads/30b8fe26a151e9bdebf1f1181ef3caf1/Screenshot_20200915_105628.png)
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
@page {
size: A4 landscape;
margin: 15mm 15mm;
}
.columns {
columns: 3;
}
</style>
</head>
<body>
<div class="columns">
<h1>
Header
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis ligula leo, quis eleifend risus elementum a. Suspendisse gravida dignissim nisi, sagittis fringilla nunc aliquam ac. Sed posuere augue sed efficitur consequat. Praesent mollis accumsan mi, sit amet pretium neque pretium sed. Curabitur massa magna, dapibus eu feugiat ac, efficitur lacinia lorem. Mauris rhoncus gravida justo ut pretium. Integer orci neque, varius at urna eget, elementum luctus mauris. Nam quis tortor dolor. Donec mattis ut erat vitae hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ligula urna, pulvinar sit amet pulvinar a, aliquam id orci. Phasellus in justo ac ligula congue sollicitudin. Sed imperdiet semper sapien, at aliquet orci mollis at. Nam suscipit pretium elit non iaculis. Pellentesque eget ex rutrum, feugiat elit non, semper libero.
Ut sed mi in felis convallis varius vitae ut erat. Sed urna quam, sodales nec iaculis vitae, commodo vitae lectus. Nam bibendum lectus a urna dignissim, sed laoreet arcu elementum. Nam rhoncus scelerisque ipsum non iaculis. Nunc a tortor a nibh imperdiet sagittis suscipit eu felis. Ut sit amet nunc elit. Nullam vestibulum metus vitae laoreet porttitor. Pellentesque nibh augue, luctus eget lacus eget, dapibus volutpat urna.
Nam sit amet ligula nunc. Mauris lectus dui, aliquet ut tempor sed, congue id eros. Curabitur ac vestibulum metus, vel suscipit nisl. Etiam augue orci, tincidunt vitae posuere eget, dapibus at tellus. Morbi vel aliquet nisi. Cras dignissim urna quis ante rhoncus mattis. Vestibulum ultricies risus diam, quis placerat turpis tristique vel. Nullam vitae cursus neque. Vestibulum imperdiet leo ut ex volutpat condimentum. Phasellus faucibus dui id augue cursus volutpat. Nullam quis nunc sed massa pulvinar tempor. Mauris tortor dolor, tincidunt sit amet faucibus non, ultrices quis eros.
Maecenas et orci eget enim hendrerit scelerisque. Aenean erat enim, tristique vitae tincidunt sit amet, varius vitae velit. Duis convallis, purus sit amet dapibus tincidunt, leo purus dignissim massa, sed rhoncus nibh purus sit amet nunc. Nullam non lacus sem. Donec id posuere metus, at tristique nibh. Maecenas faucibus nunc tincidunt sodales tempor. Nunc nec mi dui.
In eget mattis sapien. Sed eu nisi diam. Nullam auctor, turpis eget sodales sodales, massa urna luctus nisi, ac scelerisque nulla diam ut nibh. Donec ante neque, tristique eu lectus vel, faucibus vulputate sapien. Vestibulum pretium consectetur risus malesuada sodales. Mauris non elit quis sapien pellentesque volutpat imperdiet pellentesque lorem. Mauris pretium diam vel volutpat dignissim. Nullam sit amet odio libero. Sed ultricies neque non quam aliquet lobortis. Phasellus bibendum lorem lectus, vitae scelerisque lacus facilisis eu. Quisque consequat scelerisque purus ultrices vulputate. Donec ut leo vitae turpis blandit malesuada a id velit. Duis et mauris in erat commodo elementum. Curabitur sed egestas magna, at elementum nisi. Sed a lacinia lectus, id venenatis massa. In sagittis risus eget eros venenatis, vitae vehicula lorem accumsan.
</p>
<h1>
Header
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis ligula leo, quis eleifend risus elementum a. Suspendisse gravida dignissim nisi, sagittis fringilla nunc aliquam ac. Sed posuere augue sed efficitur consequat. Praesent mollis accumsan mi, sit amet pretium neque pretium sed. Curabitur massa magna, dapibus eu feugiat ac, efficitur lacinia lorem. Mauris rhoncus gravida justo ut pretium. Integer orci neque, varius at urna eget, elementum luctus mauris. Nam quis tortor dolor. Donec mattis ut erat vitae hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ligula urna, pulvinar sit amet pulvinar a, aliquam id orci. Phasellus in justo ac ligula congue sollicitudin. Sed imperdiet semper sapien, at aliquet orci mollis at. Nam suscipit pretium elit non iaculis. Pellentesque eget ex rutrum, feugiat elit non, semper libero.
Ut sed mi in felis convallis varius vitae ut erat. Sed urna quam, sodales nec iaculis vitae, commodo vitae lectus. Nam bibendum lectus a urna dignissim, sed laoreet arcu elementum. Nam rhoncus scelerisque ipsum non iaculis. Nunc a tortor a nibh imperdiet sagittis suscipit eu felis. Ut sit amet nunc elit. Nullam vestibulum metus vitae laoreet porttitor. Pellentesque nibh augue, luctus eget lacus eget, dapibus volutpat urna.
Nam sit amet ligula nunc. Mauris lectus dui, aliquet ut tempor sed, congue id eros. Curabitur ac vestibulum metus, vel suscipit nisl. Etiam augue orci, tincidunt vitae posuere eget, dapibus at tellus. Morbi vel aliquet nisi. Cras dignissim urna quis ante rhoncus mattis. Vestibulum ultricies risus diam, quis placerat turpis tristique vel. Nullam vitae cursus neque. Vestibulum imperdiet leo ut ex volutpat condimentum. Phasellus faucibus dui id augue cursus volutpat. Nullam quis nunc sed massa pulvinar tempor. Mauris tortor dolor, tincidunt sit amet faucibus non, ultrices quis eros.
Maecenas et orci eget enim hendrerit scelerisque. Aenean erat enim, tristique vitae tincidunt sit amet, varius vitae velit. Duis convallis, purus sit amet dapibus tincidunt, leo purus dignissim massa, sed rhoncus nibh purus sit amet nunc. Nullam non lacus sem. Donec id posuere metus, at tristique nibh. Maecenas faucibus nunc tincidunt sodales tempor. Nunc nec mi dui.
In eget mattis sapien. Sed eu nisi diam. Nullam auctor, turpis eget sodales sodales, massa urna luctus nisi, ac scelerisque nulla diam ut nibh. Donec ante neque, tristique eu lectus vel, faucibus vulputate sapien. Vestibulum pretium consectetur risus malesuada sodales. Mauris non elit quis sapien pellentesque volutpat imperdiet pellentesque lorem. Mauris pretium diam vel volutpat dignissim. Nullam sit amet odio libero. Sed ultricies neque non quam aliquet lobortis. Phasellus bibendum lorem lectus, vitae scelerisque lacus facilisis eu. Quisque consequat scelerisque purus ultrices vulputate. Donec ut leo vitae turpis blandit malesuada a id velit. Duis et mauris in erat commodo elementum. Curabitur sed egestas magna, at elementum nisi. Sed a lacinia lectus, id venenatis massa. In sagittis risus eget eros venenatis, vitae vehicula lorem accumsan.
</p>
<h1>
Header
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis ligula leo, quis eleifend risus elementum a. Suspendisse gravida dignissim nisi, sagittis fringilla nunc aliquam ac. Sed posuere augue sed efficitur consequat. Praesent mollis accumsan mi, sit amet pretium neque pretium sed. Curabitur massa magna, dapibus eu feugiat ac, efficitur lacinia lorem. Mauris rhoncus gravida justo ut pretium. Integer orci neque, varius at urna eget, elementum luctus mauris. Nam quis tortor dolor. Donec mattis ut erat vitae hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ligula urna, pulvinar sit amet pulvinar a, aliquam id orci. Phasellus in justo ac ligula congue sollicitudin. Sed imperdiet semper sapien, at aliquet orci mollis at. Nam suscipit pretium elit non iaculis. Pellentesque eget ex rutrum, feugiat elit non, semper libero.
Ut sed mi in felis convallis varius vitae ut erat. Sed urna quam, sodales nec iaculis vitae, commodo vitae lectus. Nam bibendum lectus a urna dignissim, sed laoreet arcu elementum. Nam rhoncus scelerisque ipsum non iaculis. Nunc a tortor a nibh imperdiet sagittis suscipit eu felis. Ut sit amet nunc elit. Nullam vestibulum metus vitae laoreet porttitor. Pellentesque nibh augue, luctus eget lacus eget, dapibus volutpat urna.
Nam sit amet ligula nunc. Mauris lectus dui, aliquet ut tempor sed, congue id eros. Curabitur ac vestibulum metus, vel suscipit nisl. Etiam augue orci, tincidunt vitae posuere eget, dapibus at tellus. Morbi vel aliquet nisi. Cras dignissim urna quis ante rhoncus mattis. Vestibulum ultricies risus diam, quis placerat turpis tristique vel. Nullam vitae cursus neque. Vestibulum imperdiet leo ut ex volutpat condimentum. Phasellus faucibus dui id augue cursus volutpat. Nullam quis nunc sed massa pulvinar tempor. Mauris tortor dolor, tincidunt sit amet faucibus non, ultrices quis eros.
Maecenas et orci eget enim hendrerit scelerisque. Aenean erat enim, tristique vitae tincidunt sit amet, varius vitae velit. Duis convallis, purus sit amet dapibus tincidunt, leo purus dignissim massa, sed rhoncus nibh purus sit amet nunc. Nullam non lacus sem. Donec id posuere metus, at tristique nibh. Maecenas faucibus nunc tincidunt sodales tempor. Nunc nec mi dui.
In eget mattis sapien. Sed eu nisi diam. Nullam auctor, turpis eget sodales sodales, massa urna luctus nisi, ac scelerisque nulla diam ut nibh. Donec ante neque, tristique eu lectus vel, faucibus vulputate sapien. Vestibulum pretium consectetur risus malesuada sodales. Mauris non elit quis sapien pellentesque volutpat imperdiet pellentesque lorem. Mauris pretium diam vel volutpat dignissim. Nullam sit amet odio libero. Sed ultricies neque non quam aliquet lobortis. Phasellus bibendum lorem lectus, vitae scelerisque lacus facilisis eu. Quisque consequat scelerisque purus ultrices vulputate. Donec ut leo vitae turpis blandit malesuada a id velit. Duis et mauris in erat commodo elementum. Curabitur sed egestas magna, at elementum nisi. Sed a lacinia lectus, id venenatis massa. In sagittis risus eget eros venenatis, vitae vehicula lorem accumsan.
</p>
</div>
</body>
</html>
```https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/249The maxChars setting is not correctly passed to the Chunker and Layout2020-09-21T15:02:00ZBoris Budiniboris@cloud68.coThe maxChars setting is not correctly passed to the Chunker and LayoutThe value is actually lost and the value computed by `recoredCharLength` is never used.The value is actually lost and the value computed by `recoredCharLength` is never used.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/250Page with more than 3 big table break completely the layout2020-09-23T16:22:52ZBoris Budiniboris@cloud68.coPage with more than 3 big table break completely the layoutI'm trying to generate with the polyfill a page with various very big tables.
After an unknown limit the generated output is completely destroid.
Is there a limit on the number of row for a table?I'm trying to generate with the polyfill a page with various very big tables.
After an unknown limit the generated output is completely destroid.
Is there a limit on the number of row for a table?https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/251sample html won't break correctly on the next page2020-09-23T18:59:52ZBoris Budiniboris@cloud68.cosample html won't break correctly on the next pageHi,
I am trying to render a hierarchy like in the picture I attached ![Screenshot_2020-09-23_at_14.29.53](/uploads/5b55ca669a9778b4c0f106c33832c45c/Screenshot_2020-09-23_at_14.29.53.png)
The html that builds that hierarchy is attached ...Hi,
I am trying to render a hierarchy like in the picture I attached ![Screenshot_2020-09-23_at_14.29.53](/uploads/5b55ca669a9778b4c0f106c33832c45c/Screenshot_2020-09-23_at_14.29.53.png)
The html that builds that hierarchy is attached below. If the html for the hierarchy can fit on a single page there are no issues, but once the hierarchy grows such that it needs extra pages I get an error like in the picture![Screenshot_2020-09-23_at_14.49.14](/uploads/f3c7010eb407603afe3b569169f625ca/Screenshot_2020-09-23_at_14.49.14.png)
[html-to-render-paged.html](/uploads/7f9d26752866d94a5c68572ea614fbf2/html-to-render-paged.html)
I inspected the source code of pagedjs and the error seems to be thrown at line 171 inside layout.js
```js
// Only check x characters
if (length >= this.maxChars) {
this.hooks && this.hooks.layout.trigger(wrapper, this);
let imgs = wrapper.querySelectorAll("img");
if (imgs.length) {
await this.waitForImages(imgs);
}
newBreakToken = this.findBreakToken(wrapper, source, bounds, prevBreakToken);
if (newBreakToken && newBreakToken.equals(prevBreakToken)) {
// HERE
console.warn("Unable to layout item: ", node);
return undefined;
}
if (newBreakToken) {
length = 0;
}
}
```
It seems that If I replace the funny characters in the hierarchy with empty spaces it works fine. I believe that the real issue is about those characters.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/253Paged.js generates duplicate content (an example with single text element)2020-09-29T08:01:49ZBoris Budiniboris@cloud68.coPaged.js generates duplicate content (an example with single text element)First of all, thank you for an awesome libary.
And now strictly to the point, if source html contains repeated text, generated page contains duplicate content:
See attached HTML:
* Source html contains single `<p>` element with t...First of all, thank you for an awesome libary.
And now strictly to the point, if source html contains repeated text, generated page contains duplicate content:
See attached HTML:
* Source html contains single `<p>` element with text `Coxswain Jack Tar hearties` repeated 10 times.
* Generated page contains text `Coxswain Jack Tar hearties` 41 times:
![image](/uploads/356d653ea3dafd1c4e9dcf686d6ac858/image.png)
After doing some debugging, it seems be an issue with chunking of the text element:
https://gitlab.pagedmedia.org/tools/pagedjs/blob/master/src/chunker/layout.js#L393
I was able to work around the issue by replacing:
```
offset += node.textContent.indexOf(container.textContent);
```
with:
```
offset += node.textContent.length - container.textContent.length;
```
Unfortunately I do not know your codebase too well to submit a pull request, but I hope it will be a good lead for fixing the bug.
HTML for reproducing the issue:
[pagedjs-bug-duplicated-text.html](/uploads/4a95290f9459eb9c087e1283a2c39bf0/pagedjs-bug-duplicated-text.html)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/254Paged.js generates duplicate content (an example with multiple text elements)2022-08-18T11:21:44ZBoris Budiniboris@cloud68.coPaged.js generates duplicate content (an example with multiple text elements)See attached HTML:
* Source html contains two text fragments of `Boatswain Privateer hands Corsair` separated by a `<span>` element.
* Generated page contains text `Boatswain Privateer hands Corsair` 8 times:
This is a very similar bug ...See attached HTML:
* Source html contains two text fragments of `Boatswain Privateer hands Corsair` separated by a `<span>` element.
* Generated page contains text `Boatswain Privateer hands Corsair` 8 times:
This is a very similar bug to https://gitlab.pagedmedia.org/tools/pagedjs/issues/253 but the code that is causing the bug seems to be located here:
https://gitlab.pagedmedia.org/tools/pagedjs/blob/master/src/utils/dom.js#L527
`indexOfTextNode()` is always pointing to first element in my case.
Now try modifying source HTML and make text fragments differ a bit, and you'll see expected behaviour in `indexOfTextNode()`.
HTML for reproducing the issue: [pagedjs-bug-duplicated-text-multiple-text-elements.html](/uploads/37d9eaca24b68fe3d8e1eb105ed89119/pagedjs-bug-duplicated-text-multiple-text-elements.html)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/255Pagedjs overflow splitting breaks when using RTL (Right to left) text.2021-08-09T09:32:47ZBoris Budiniboris@cloud68.coPagedjs overflow splitting breaks when using RTL (Right to left) text.I am currently using pagedjs and so far very impressed with the library.
I have however found stumbled upon an issue that I cannot resolve so far.
I am using direction property on my page as so
`<html lang="he" dir="rtl">`
Which allows...I am currently using pagedjs and so far very impressed with the library.
I have however found stumbled upon an issue that I cannot resolve so far.
I am using direction property on my page as so
`<html lang="he" dir="rtl">`
Which allows me to render my page as right to left reading.
I have noticed that pagedjs previewer cannot process the overflow properly when using the rtl attribute.
Do you guys support rtl reading ? or is this an issue ?https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/256Tries to parse html file as a stylesheet when a link element is missing the href2020-10-07T00:31:56ZBoris Budiniboris@cloud68.coTries to parse html file as a stylesheet when a link element is missing the hrefIf in your document you have:
&lt;link rel="stylesheet"&gt;
Without an href, the href of "" will be fetched, which tries to parse the html document like it was a stylesheetIf in your document you have:
<link rel="stylesheet">
Without an href, the href of "" will be fetched, which tries to parse the html document like it was a stylesheethttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/257Issue when printing a big document with puppeteer2020-11-06T11:56:43ZBoris Budiniboris@cloud68.coIssue when printing a big document with puppeteerI don't think it's a pagedjs issue, but I'm here to ask if there is a way to know when pagedJS finish the client side generation.
Or is there a way to generate the output via CLI?
I have a document with 52 pages and big images. Sometim...I don't think it's a pagedjs issue, but I'm here to ask if there is a way to know when pagedJS finish the client side generation.
Or is there a way to generate the output via CLI?
I have a document with 52 pages and big images. Sometimes when converting it to PDF using Puppeteer the page is printed before pagedjs finish the DOM manipulation.
Is there a way to let Puppeteer say...: Ok. The manipulation ended. Print now.
Looks like networkidle2 it's not enough cause the network is idle but the client side manipulation is not finished.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/258Page level background image that bleeds on second page2020-10-13T20:38:42ZBoris Budiniboris@cloud68.coPage level background image that bleeds on second pageI move an image from a `.pagedjs_page_content` elemnt to `.pagedjs_page` to make it spread across the entire page.
For some reason, headless Chrome v83 overflows the image to the second page, as per the following screenshot:
![Screensh...I move an image from a `.pagedjs_page_content` elemnt to `.pagedjs_page` to make it spread across the entire page.
For some reason, headless Chrome v83 overflows the image to the second page, as per the following screenshot:
![Screenshot_2020-10-13_at_22.30.50](/uploads/140534609e300a6643951739ccfe8304/Screenshot_2020-10-13_at_22.30.50.png)
It is alright when [accessing the preview](https://pnth-terreenaction.dev.détour.studio/?EbookPublicationTest/preview) with Firefox and Chrome though.
![image](/uploads/51d0e022b2546cb11527fcb9de7af22e/image.png)
---
Generated PDF can be [seen here](/uploads/af34cf0bf90de54d0c60c56662972a47/EbookPublicationTest-d8c6322b32.pdf).<br>
And you can [dig some code here](https://github.com/oncletom/yeswiki-extension-ebook/blob/feature/wiki-styles/presentation/styles/base.css#L157).
Any idea?https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/262css drop cap does not work once pagedjs active2023-04-05T13:31:36ZBoris Budiniboris@cloud68.cocss drop cap does not work once pagedjs activeI have this css rule to style drop caps that works without pagedjs, and seem not to work once pagedjs runs. Not sure why. Any idea ?
```
#preamble > p:first-of-type:first-letter {
color: red;
font-size: 10em;
}
```I have this css rule to style drop caps that works without pagedjs, and seem not to work once pagedjs runs. Not sure why. Any idea ?
```
#preamble > p:first-of-type:first-letter {
color: red;
font-size: 10em;
}
```https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/263Landscape pages not displaying correctly when in a document with portrait pages2021-01-26T12:19:36ZBoris Budiniboris@cloud68.coLandscape pages not displaying correctly when in a document with portrait pagesSetting the page size to `letter landscape` on a specific page within a document where most pages are `letter portrait` causes the landscape page to display within a portrait "sheet" so the right side of it is cut off.
Example: https://...Setting the page size to `letter landscape` on a specific page within a document where most pages are `letter portrait` causes the landscape page to display within a portrait "sheet" so the right side of it is cut off.
Example: https://codepen.io/29thfloor/pen/vYKQxNG
* Default @page style is portrait
* "Page 1" is set to landscape
Note: this pen also shows the issue in #181 with the extra blank page at the beginning.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/264CSS content:url(data:...) hangs PDF render2020-11-30T20:37:44ZBoris Budiniboris@cloud68.coCSS content:url(data:...) hangs PDF renderUsing CSS `content:url()` with a `data:` url hangs the render indefinitely. See attached demo, it renders properly in Chrome 87.0.4280.67 on macOS but pagedjs-cli hangs:
```
$ node_modules/.bin/pagedjs-cli /Users/aw/Desktop/content.html...Using CSS `content:url()` with a `data:` url hangs the render indefinitely. See attached demo, it renders properly in Chrome 87.0.4280.67 on macOS but pagedjs-cli hangs:
```
$ node_modules/.bin/pagedjs-cli /Users/aw/Desktop/content.html
✔ Loaded
◴ Rendering: Page 1
```
[content.html](/uploads/35892b7b050aeaebe3ca37d9b4ed5185/content.html)