pagedjs issueshttps://gitlab.coko.foundation/pagedjs/pagedjs/-/issues2020-03-12T15:33:37Zhttps://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/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–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/362reset counter(pages)2022-05-06T09:17:58Zjulientaqjulien@coko.foundationreset counter(pages)🛡 @kominoshja · 9 months ago
Author Owner
Hello, I use the current version of pagedjs 0.2.0.
Resetting the page counter with 1 works like expected. But the pages counter is still buggy.
The goal of my project is to merge two pdfs into...🛡 @kominoshja · 9 months ago
Author Owner
Hello, I use the current version of pagedjs 0.2.0.
Resetting the page counter with 1 works like expected. But the pages counter is still buggy.
The goal of my project is to merge two pdfs into one, therefore I need to reset the page and pages counter.
html markup:
<div class="break-after-page reset-print-page">should be Page 1 of 2</div>
<div class="break-after-page">should be Page 2 of 2</div>
<div class="break-after-page reset-print-page">should be Page 1 of 3</div>
<div class="break-after-page">should be Page 2 of 3</div>
<div>should be Page 3 of 3</div>
css:
@page {
@bottom-left {
content: 'Page ' counter(page) ' of ' counter(pages);
}
}
wished Footer:
Page 1 of 2 Page 2 of 2 Page 1 of 3 Page 2 of 3 Page 3 of 3
with .reset-print-page { counter-reset: page 1; }
Page 1 of 5 Page 2 of 5 Page 1 of 5 Page 2 of 5 Page 3 of 5
with: .reset-print-page { counter-reset: page 1 pages 1; }
Page 1 of 5 Page 2 of 6 Page 1 of 6 Page 2 of 6 Page 3 of 6
I don't think that the pages counter should be automatically changed by resetting the page counter because that could be also a requirement for someone.
In previous comments only page counter was mentioned. Will this fix also apply for pages counter?
By mss@ef on 2021-06-17T13:05:46 (imported from GitLab)