pagedjs issueshttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues2020-09-11T11:56:14Zhttps://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/290'content' property ignored, when styling classes directly: .pagedjs_margin-bo...2021-04-29T10:34:55ZBoris Budiniboris@cloud68.co'content' property ignored, when styling classes directly: .pagedjs_margin-bottom-center .pagedjs_margin-content::after {content: "Test"; }It seems the following CSS isn't handled properly:
```css
.pagedjs_margin-bottom-center > .pagedjs_margin-content::after {
content: "Test";
}
```
"Test" isn't visible because the class "hasContent" isn't set.
I style classes di...It seems the following CSS isn't handled properly:
```css
.pagedjs_margin-bottom-center > .pagedjs_margin-content::after {
content: "Test";
}
```
"Test" isn't visible because the class "hasContent" isn't set.
I style classes directly, to be able to use paged.js with PostCSS and the TailwindCSS `@apply` directive (which isn't supported outside regular selectors).
Currently, we need to define the 'content' property within `@page{@bottom-right {}}`, and styles outside `@page {}` via the paged.js classes.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/3820.2.0 + Chrome 103 + Big Sur: Incomplete rendering of pages2022-07-14T15:32:12ZNellie McKesson0.2.0 + Chrome 103 + Big Sur: Incomplete rendering of pagesRunning pagedjs 0.2.0 on Chrome 103 on Big Sur (and Monterey too, I think), only the first page or two get rendered, and then the process stops prematurely, causing the remainder of the book to appear as overflow content. This same file ...Running pagedjs 0.2.0 on Chrome 103 on Big Sur (and Monterey too, I think), only the first page or two get rendered, and then the process stops prematurely, causing the remainder of the book to appear as overflow content. This same file renders perfectly on Catalina and Windows. This doesn't seem to happen consistently -- if I refresh enough times, I can sometimes get the whole file paged.
I think this might be fixed by upgrading to pagedjs ^0.3.1, but unfortunately I can't do that yet (see my other open issues/comments). Any chance anyone else has reported something like this and come up with a hack to deal with it? Could absolutely be related to how I'm running paged, as well.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/4230.4.1 - Layout constructor emits uncaught error2023-06-12T11:15:36ZRaphael Moulin0.4.1 - Layout constructor emits uncaught errorHello,
On several tests, we have an error that occured.
It seems that `element.offsetParent` is not set all the time...
![image](/uploads/a6b6b29cffea91c88a4cf62ca35508c2/image.png)
CheersHello,
On several tests, we have an error that occured.
It seems that `element.offsetParent` is not set all the time...
![image](/uploads/a6b6b29cffea91c88a4cf62ca35508c2/image.png)
Cheershttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/444<br> near page breaks layout2023-11-18T01:50:50ZJace Egenbacher<br> near page breaks layoutI think I am encountering an issue with inline `<br/>` tags whenever they occur near a page break. I have recreated the issue with this example:
[index.html](/uploads/fb2fa5b19101f9e03e742dad1e0df7e9/index.html)
[result.pdf](/uploads/d1...I think I am encountering an issue with inline `<br/>` tags whenever they occur near a page break. I have recreated the issue with this example:
[index.html](/uploads/fb2fa5b19101f9e03e742dad1e0df7e9/index.html)
[result.pdf](/uploads/d15ab22e4112790ca2106b4cc6eb329b/result.pdf)
[result.html](/uploads/212cb380ba677d3fb7b7dd2475ec01e1/result.html)
I receive this error in chrome after running `pagedjs-cli -i index.html -o result.pdf --debug`:
![image](/uploads/2eba2d1dfca519da82cfd8585714147a/image.png)
To recreate, download index.html and run `pagedjs-cli -i index.html -o result.pdf`
Is there any @page css that could help me avoid this issue?https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/380<pre> across page break issues (TextNodes are not 'transferred')2022-12-04T12:26:54ZDavid Mulder<pre> across page break issues (TextNodes are not 'transferred')Another MVE of stuff completely breaking down. In this case there is a `<pre>` that spans two pages... but it only breaks if there is a header on the first page.
```html
<!DOCTYPE html>
<html>
<head>
<title>test</title>
...Another MVE of stuff completely breaking down. In this case there is a `<pre>` that spans two pages... but it only breaks if there is a header on the first page.
```html
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
html body {
font-size: 16px;
}
html body pre {
overflow: auto;
line-height: 1.45;
background: lightgray;
}
.content {
height: 100%;
}
.pagebreak {
page-break-before: always;
}
html body .content {
padding: 2em calc(50% - 457px + 2em);
}
</style>
</head>
<body>
<div class="mume content">
<h1>Not sure why this header is needed</h1>
<p>But without this header it won't break</p>
<div class="pagebreak"></div>
<pre>
This is where the <pre> tag starts
What follows is a bunch of empty lines (why is this on another page?)
// notice that the TextNodes between the spans below have been 'lost'
<span>A</span> <span>B</span> <span>C</span>
</pre
>
</div>
</body>
</html>
```
And only just noticed that when printing the last lines miss completely... [mve3.pdf](/uploads/b6f215960638aaf0a14e95e928f30170/mve3.pdf)https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/413@media print, pagedjs-ignore2023-03-11T09:12:45ZYann Trividic@media print, pagedjs-ignoreHello !
Maybe it's more a feature request than it is an issue, but here it goes: \
With @julientaq, we discovered yesterday that the media query `@media print, pagedjs-ignore` will be taken into account in both the preview and the PDF e...Hello !
Maybe it's more a feature request than it is an issue, but here it goes: \
With @julientaq, we discovered yesterday that the media query `@media print, pagedjs-ignore` will be taken into account in both the preview and the PDF export.
At first, I thought that this media query would be processed only for the PDF export, but not in the pagedjs' preview. I tried to use it to apply `display: none` on an interface that I want to be visible just in the preview.
Later, we realized that we could look at it from another angle. The solution was to use `@media screen` and make it visible there, with a `display: none` outside of this particular query.
Maybe both options should be possible?
Have a good day!
Yannhttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/450@page.size not taking effect unless @page.bleed also specified2023-12-28T12:45:33ZCaleb Maclennan@page.size not taking effect unless @page.bleed also specifiedI'm trying to setup samples using *paged.js* on https://polytype.dev using the latest pagedjs (0.4.3) in a fresh (remote CI and isolated local) install.
I just started playing with simple examples and ran into a bug:
```html
<html>
<h...I'm trying to setup samples using *paged.js* on https://polytype.dev using the latest pagedjs (0.4.3) in a fresh (remote CI and isolated local) install.
I just started playing with simple examples and ran into a bug:
```html
<html>
<head>
<style>
@page {
size: A7;
bleed: 0;
margin: 1cm;
}
p {
text-indent: 1cm;
text-align: justify;
}
</style>
</head>
<p>
An A7 page with 1cm margins and 1cm paragraph indentation.
</p>
</html>
```
Note that if you remove the `bleed: 0;` declaration this sample does not generate properly. The resulting paper size is A4 even though the actual canvas used is appropriately sized. By adding the bleed declaration I was able to work around that and get an actual A7 sized output.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/396[docs] way to add content to fill whitespace before pagebreak2022-09-20T08:26:01Zsimonbuehler[docs] way to add content to fill whitespace before pagebreakhi,
first: awesome library!
i'm looking into the `Paged.Handler` and try to fill the remaining empty space of a page with a stock image / placeholder just to get rid of the white wall.
I couldn't find a example if that is even possible...hi,
first: awesome library!
i'm looking into the `Paged.Handler` and try to fill the remaining empty space of a page with a stock image / placeholder just to get rid of the white wall.
I couldn't find a example if that is even possible to dynamically insert a responsive content or get the remaining height available to add optional content from my api ( identified by a attribute of the previous div ), is that doable with the handler?https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/376[feature request] Make PDF text selectable when using custom fonts2022-06-09T16:15:46Zdvdmrn[feature request] Make PDF text selectable when using custom fontsWhen using custom fonts, the PDF text is not selectable. Example when using your starter kit:
in style.css:
```css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;1,100;1,300;1,40...When using custom fonts, the PDF text is not selectable. Example when using your starter kit:
in style.css:
```css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;1,100;1,300;1,400;1,500;1,600&display=swap');
body{
font-family: 'Montserrat', 'sans-serif';
}
...
```
Output: ![image](/uploads/3aeeae4711a09db7b933bdeacbe17d73/image.png)
As you can see the fonts render correctly, but the text is not selectable. The text is selectable if I do not include a font. It would be ideal if the PDF preserved this editability with external fonts.https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues/449[help] Wait for request to finish before start parsing2023-11-30T11:40:13ZNFSL2001[help] Wait for request to finish before start parsingI am trying to use Paged.JS to make a list of items, which I fetch the data using JS XMLHttpRequest and then parse it to a table to be added into the document. However since XMLHttpRequest is async, putting the call in `beforePreview(con...I am trying to use Paged.JS to make a list of items, which I fetch the data using JS XMLHttpRequest and then parse it to a table to be added into the document. However since XMLHttpRequest is async, putting the call in `beforePreview(content)` did not work and Paged.JS will parse the document without any data. Is there anyway to make Paged.JS to wait until XMLHttpRequest/fetch to callback before starting to parse the HTML document?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/314[RFC] Add a css property to define if the document should start on a left or ...2022-07-20T09:26:51ZBoris Budiniboris@cloud68.co[RFC] Add a css property to define if the document should start on a left or on a right page.Talking about a book with facing pages:
- a page with an odd number is always a right page;
- a page with an even number is always a left page;
In the case of a complex book, we may have multiple chapter worked on at the same time, and...Talking about a book with facing pages:
- a page with an odd number is always a right page;
- a page with an even number is always a left page;
In the case of a complex book, we may have multiple chapter worked on at the same time, and therefore, we need to be able to render each chapter, and sometimes, it starts on a left page.
Questions:
- how can we define when a book start on a left page?
- should we create an empty page when a `counter-reset: page 1;` is set?
If you have any insights on those, it would be greathttps://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/363`<br>` breaks rendering2023-01-17T18:49:16Zjulientaqjulien@coko.foundation`<br>` breaks renderingJust `<br>` between pages and an infinite loop appears [test_pagedjs.html](/uploads/07be499f7f60f54ef2b457c1cd2dc573/test_pagedjs.html)
*By Shut on 2021-09-23T23:49:32 (imported from GitLab)*Just `<br>` between pages and an infinite loop appears [test_pagedjs.html](/uploads/07be499f7f60f54ef2b457c1cd2dc573/test_pagedjs.html)
*By Shut on 2021-09-23T23:49:32 (imported from GitLab)*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/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/269`beforePreview` hook is not registering2020-12-17T15:48:36ZBoris Budiniboris@cloud68.co`beforePreview` hook is not registering```
beforePreview(content, renderTo) {
console.log("helloworld");
}
```
isn’t throwing anything.```
beforePreview(content, renderTo) {
console.log("helloworld");
}
```
isn’t throwing anything.