...
  View open merge request
Commits (11)
......@@ -138,6 +138,7 @@ layoutNode(node)
renderNode(node, sourceNode)
onOverflow(overflow, rendered, bounds)
onBreakToken(breakToken, overflow, rendered)
afterOverflowRemoved(removed, rendered)
```
## Setup
......
This diff is collapsed.
This diff is collapsed.
const TIMEOUT = 10000;
describe("footnote-policy", () => {
let page;
beforeAll(async () => {
page = await loadPage("notes/footnote-policy/footnote-policy.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("should render 14 pages", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => {
return r.length;
});
expect(pages).toEqual(14);
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(2);
expect(pdf).toMatchPDFSnapshot(3);
expect(pdf).toMatchPDFSnapshot(4);
});
}
}
);
This diff is collapsed.
const TIMEOUT = 10000;
describe("footnotes", () => {
let page;
beforeAll(async () => {
page = await loadPage("notes/footnotes/footnotes.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("should render 2 pages", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => {
return r.length;
});
expect(pages).toEqual(2);
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
});
}
}
);
This diff is collapsed.
const TIMEOUT = 10000;
describe("footnotes", () => {
let page;
beforeAll(async () => {
page = await loadPage("notes/footnotes-lastpage/footnotes-lastpage.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("should render 6 pages", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => {
return r.length;
});
expect(pages).toEqual(6);
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
expect(pdf).toMatchPDFSnapshot(3);
expect(pdf).toMatchPDFSnapshot(4);
expect(pdf).toMatchPDFSnapshot(5);
expect(pdf).toMatchPDFSnapshot(6);
});
}
}
);
This diff is collapsed.
const TIMEOUT = 10000;
describe("footnotes", () => {
let page;
beforeAll(async () => {
page = await loadPage("notes/footnotes-padding/footnotes-padding.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("should render 14 pages", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => {
return r.length;
});
expect(pages).toEqual(14);
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
expect(pdf).toMatchPDFSnapshot(7);
expect(pdf).toMatchPDFSnapshot(8);
});
}
}
);
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Footnotes
</title>
<!-- Paged js-->
<script src="../../../dist/paged.polyfill.js"></script>
<style>
body {
widows: 1;
orphans: 1;
}
@media screen {
.pagedjs_page {
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
}
}
.footnote {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
margin-top: 16px;
color: grey;
}
@page {
size: 160mm 210mm;
margin-top: 83px;
margin-bottom: 86px;
margin-left: 35mm;
margin-right: 35mm;
@bottom-left{
content: counter(page);
}
@footnote {
border-top: dashed red 1px;
margin-top: 12px;
float: bottom;
}
}
span.footnote {
float: footnote;
}
.footnote::footnote-call {
color: red;
}
.footnote::footnote-marker {
color: blue;
}
p{
font-family: Georgia, 'Times New Roman', Times, serif;
margin-top: 0;
margin-bottom: 0;
text-align: justify;
font-size: 14px;
line-height: 16px;
}
.afnanch{ display: none; }
hr{
border: none;
}
.pfirst{
padding-top: 50mm;
}
</style>
</head>
<body>
<p>new theory confronts
us, which at first blush seems to supply, if not a more probable, certainly a more
possible, stepping-stone between Xylography and Typography. We refer to
what Meerman, the great champion of this theory,
calls the “sculpto-fusi” characters: types, that is, the shanks of which have been cast in a quadrilateral
mould, and the “faces” engraved by hand afterwards.</p>
<p>Meerman and those who agree with him engage a large array of testimony
on their side. In the reference of Celtis, in 1502, to Mentz as the city “quæ
prima sculpsit solidos ære characteres,” they see a clear confirmation of their
theory; as also in the frequent recurrence of the same word “sculptus” in the
colophons of the early printers. Meerman, indeed, goes so far as to ingeniously
explain the famous account of the invention given by Trithemius in 1514,<span class="footnote" data-note="14" id="note-14"><em>Annales Hirsaugienses</em>, ii,
p. 421: “Post hæc inventis
successerunt subtiliora, inveneruntque modum fundendi formas omnium
Latini Alphabeti literarum quas ipsi matrices nominabant; ex quibus
rursum æneos sive stanneos characteres fundebant, ad omnem pressuram
sufficientes, quos prius manibus sculpebant.” Trithemius’ statement, as
every student of typographical history is aware, has been made to fit
every theory that has been propounded, but it is doubtful whether any
other writer has stretched it quite as severely as Meerman in the above
rendering of these few Latin lines.</span>
in the light of his theory, to mean that, after the rejection of the first wooden types, “the
inventors found out a method of casting the bodies only (fundendi formas) of all
the letters of the Latin alphabet from what they called matrices, on which they
cut the face of each letter; and from the same kind of matrices a method was in
time discovered of casting the complete letters (æneos sive stanneos characteres)
of sufficient hardness for the pressure they had to bear, which letters before—that
is, when the bodies only were cast—they were obliged to cut.”<span class="footnote" data-note="15" id="note-15"><em>Origines Typographicæ</em>,
Gerardo Meerman auctore. Hagæ
Com., 1765. Append., p. 47.</span></p>
<p>After this bold flight of translation, it is not surprising to find that Meerman
claims that the <em>Speculum</em> was printed in “sculpto-fusi” types, although in the
one page of which he gives a facsimile there are nearly 1,700 separate types, of
which 250 alone are <em>e</em>’s.</p>
<p>Schoepflin, claiming the same invention for the Strasburg printers, believes
that all the earliest books printed there were produced by this means; and both
Meer­man and Schoep­flin agree that engraved metal types were in use for many
years after the invention of the punch and matrix, mentioning, among others so
printed, the Mentz <em>Psalter</em>, the <em>Catholicon</em> of 1460, the Eggestein <em>Bible</em> of 1468,
and even the <em>Nideri Præ­cep­tor­ium</em>, printed at Stras­burg as late as 1476, as “literis
in ære sculptis.”</p>
<p>Almost the whole historical claim of the engraved metal types, indeed, turns
on the recurrence of the term “sculptus” in the colophons of the early printers.
Jenson, in 1471, calls himself a “cutter of books” (librorum exsculptor).
Sen­sen­schmid,
in 1475, says that the <em>Codex Jus­tin­ianus</em> is “cut” (insculptus), and that
he has “cut” (sculpsit) the work of <em>Lombardus in Psalterium</em>. Husner of Strasburg,
in 1472, applies the term “printed with letters
cut of metal” (exsculptis ære litteris) to the <em>Speculum Durandi</em>; and of the <em>Præceptorium
Nideri</em>, printed in
1476, he says it is “printed in letters cut of metal by a very ingenious effort”
(litteris exsculptis artificiali certe conatu ex ære). As Dr. Van der Linde points
out, the use of the term in reference to all these books can mean nothing else
than a figurative allusion to the first process towards producing the types, namely,
the cutting of the punch<span class="footnote" data-note="16"
id="note-16">The constant recurrence in more modern typographical
history of the expression “to cut matrices,” meaning of course to
cut the punches necessary to form the matrices, bears out the same
conclusion.</span>; just as when Schoeffer, in 1466, makes his <em>Grammatica
Vetus Rhythmica</em> say, “I am cast at Mentz” (At Moguntia sum fusus in urbe
libellus), he means nothing more than a figurative allusion to the casting of the
types.</p>
<p>The theory of the sculpto-fusi types appears to have sprung up on no firmer
foundation than the difficulty of accounting for the marked irregularities in the
</p>
</body>
</html>
\ No newline at end of file
const TIMEOUT = 10000;
describe("footnotes", () => {
let page;
beforeAll(async () => {
page = await loadPage("notes/footnotes/footnotes.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("should render 14 pages", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => {
return r.length;
});
expect(pages).toEqual(14);
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(2);
expect(pdf).toMatchPDFSnapshot(3);
expect(pdf).toMatchPDFSnapshot(4);
});
}
}
);
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Footnotes
</title>
<!-- Paged js-->
<script src="../../../dist/paged.polyfill.js"></script>
<style>
body {
widows: 1;
orphans: 1;
}
@media screen {
.pagedjs_page {
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
}
}
.footnote {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
margin-top: 16px;
color: grey;
}
@page {
size: 160mm 210mm;
margin-top: 83px;
margin-bottom: 86px;
margin-left: 35mm;
margin-right: 35mm;
@bottom-left{
content: counter(page);
}
@footnote {
border-top: dashed red 1px;
margin-top: 12px;
float: bottom;
}
}
span.footnote {
float: footnote;
footnote-policy: auto;
footnote-display: compact;
}
.footnote::footnote-call {
color: red;
}
.footnote::footnote-marker {
color: blue;
}
p{
font-family: Georgia, 'Times New Roman', Times, serif;
margin-top: 0;
margin-bottom: 0;
text-align: justify;
font-size: 14px;
line-height: 16px;
}
.afnanch{ display: none; }
hr{
border: none;
}
.pfirst{
padding-top: 50mm;
}
</style>
</head>
<body>
<p>the passage from Xylography to Typography. Those who write on the
affirmative side of the question profess to see in the earlier typographical works,
as well as in the historical statements handed down by the
old authorities, the clearest evidence that wooden types were used, and that several of the most
famous works of the first printers were executed by their means.</p>
<p>As regards the latter source of their confidence, it is at least remarkable
that no single writer of the fifteenth century makes the slightest allusion to the
use of wooden types. Indeed, it was not till Bibliander, in 1548,<span class="footnote" data-note="04" id="note-04"><em>In Commentatione de ratione
communi omnium linguarum et
literarum.</em> Tiguri, 1548, p. 80.</span>
first mentioned
and described them, that anything professing to be a record on the subject
existed. “First they cut their letters,” he says, “on wood blocks the size of an
entire page, but because the labour and cost of that way was so great, they devised
movable wooden types, perforated and joined one to the other by a thread.”</p>
<p>The legend, once started, found no lack of sponsors, and the typographical
histories of the sixteenth century and onward abound with testimonies confirmatory
more or less of Bibliander’s statement. Of these testimonies, those only
are worthy of attention which profess to be based on actual inspection of the
alleged perforated wooden types. Specklin
(who died in 1589) asserts that he
saw some of these relics at Strasburg<span class="footnote" data-note="05" id="note-05">In <em>Chronico Argentoratensi</em>, <em>m.s.</em> ed. Jo.
Schilterus,
p. 442. “Ich habe die erste press, auch die buchstaben gesehen, waren
von holtz geschnitten, auch gäntze wörter und syllaben, hatten löchle,
und fasst man an ein schnur nacheinander mit einer nadel, zoge sie
darnach den zeilen in die länge,” etc.</span>. Angelo Roccha,<span
class="footnote" data-note="06" id="note-06"><em>De Bibliothecâ Vaticanâ.</em> Romæ, 1591, p. 412.
“Characteres enim a primis illis inventoribus non ita eleganter et
expedite, ut a nostris fieri solet, sed filo in litterarum foramen
immisso connectebantur, sicut Venetiis id genus typos me vidisse
memini.”</span>
in 1591, vouches for the
existence of similar letters (though he does not say whether wood or metal) at
Venice. </p>
</body>
</html>
\ No newline at end of file
const TIMEOUT = 10000;
describe("footnotes", () => {
let page;
beforeAll(async () => {
page = await loadPage("notes/footnotes/footnotes.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("should render 2 pages", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => {
return r.length;
});
expect(pages).toEqual(2);
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
});
}
}
);
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Footnotes
</title>
<!-- Paged js-->
<script src="../../../dist/paged.polyfill.js"></script>
<style>
body {
widows: 1;
orphans: 1;
}
@media screen {
.pagedjs_page {
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
}
}
.footnote {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
margin-top: 16px;
color: grey;
}
@page {
size: 160mm 210mm;
margin-top: 83px;
margin-bottom: 86px;
margin-left: 35mm;
margin-right: 35mm;
@bottom-left{
content: counter(page);
}
@footnote {
border-top: dashed red 1px;
margin-top: 12px;
float: bottom;
}
}
span.footnote {
float: footnote;
footnote-policy: auto;
footnote-display: compact;
}
.footnote::footnote-call {
color: red;
font-size: 30px;
}
.footnote::footnote-marker {
color: blue;
}
p{
font-family: Georgia, 'Times New Roman', Times, serif;
margin-top: 0;
margin-bottom: 0;
text-align: justify;
font-size: 14px;
line-height: 16px;
}
.afnanch{ display: none; }
hr{
border: none;
}
.pfirst{
padding-top: 50mm;
}
</style>
</head>
<body>
<p>the passage from Xylography to Typography. Those who write on the
affirmative side of the question profess to see in the earlier typographical works,
as well as in the historical statements handed down by the
old authorities, the clearest evidence that wooden types were used, and that several of the most
famous works of the first printers were executed by their means.</p>
<p>As regards the latter source of their confidence, it is at least remarkable
that no single writer of the fifteenth century makes the slightest allusion to the
use of wooden types. Indeed, it was not till Bibliander, in 1548,<span class="footnote" data-note="04" id="note-04"><em>In Commentatione de ratione
communi omnium linguarum et
literarum.</em> Tiguri, 1548, p. 80.</span>
first mentioned
and described them, that anything professing to be a record on the subject
existed. “First they cut their letters,” he says, “on wood blocks the size of an
entire page, but because the labour and cost of that way was so great, they devised
movable wooden types, perforated and joined one to the other by a thread.”</p>
<p>The legend, once started, found no lack of sponsors, and the typographical
histories of the sixteenth century and onward abound with testimonies confirmatory
more or less of Bibliander’s statement. Of these testimonies, those only
are worthy of attention which profess to be based on actual inspection of the
alleged perforated wooden types. Specklin
(who died in 1589) asserts that he
saw some of these relics at Strasburg<span class="footnote" data-note="05" id="note-05">In <em>Chronico Argentoratensi</em>, <em>m.s.</em> ed. Jo.
Schilterus,
p. 442. “Ich habe die erste press, auch die buchstaben gesehen, waren
von holtz geschnitten, auch gäntze wörter und syllaben, hatten löchle,
und fasst man an ein schnur nacheinander mit einer nadel, zoge sie
darnach den zeilen in die länge,” etc.</span>. Angelo Roccha,<span
class="footnote" data-note="06" id="note-06"><em>De Bibliothecâ Vaticanâ.</em> Romæ, 1591, p. 412.
“Characteres enim a primis illis inventoribus non ita eleganter et
expedite, ut a nostris fieri solet, sed filo in litterarum foramen
immisso connectebantur, sicut Venetiis id genus typos me vidisse
memini.”</span>
in 1591, vouches for the
existence of similar letters (though he does not say whether wood or metal) at
Venice. </p>
</body>
</html>
\ No newline at end of file
const TIMEOUT = 10000;
describe("footnotes", () => {
let page;
beforeAll(async () => {
page = await loadPage("notes/footnotes/footnotes-styles.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("should render 2 pages", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => {
return r.length;
});
expect(pages).toEqual(2);
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
});
}
}
);
This diff is collapsed.
const TIMEOUT = 10000;
describe("footnotes", () => {
let page;
beforeAll(async () => {
page = await loadPage("notes/footnotes/footnotes.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("should render 14 pages", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => {
return r.length;
});
expect(pages).toEqual(14);
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(2);
expect(pdf).toMatchPDFSnapshot(3);
expect(pdf).toMatchPDFSnapshot(4);
});
}
}
);
......@@ -74,6 +74,11 @@ const TEMPLATE = `
</div>
<div class="pagedjs_area">
<div class="pagedjs_page_content"></div>
<div class="pagedjs_footnote_area">
<div class="pagedjs_footnote_content">
<div class="pagedjs_footnote_inner_content"></div>
</div>
</div>
</div>
</div>
</div>
......@@ -98,6 +103,7 @@ class Chunker {
this.hooks.renderNode = new Hook(this);
this.hooks.layoutNode = new Hook(this);
this.hooks.onOverflow = new Hook(this);
this.hooks.afterOverflowRemoved = new Hook(this);
this.hooks.onBreakToken = new Hook();
this.hooks.afterPageLayout = new Hook(this);
this.hooks.afterRendered = new Hook(this);
......@@ -265,7 +271,7 @@ class Chunker {
}
}
async handleBreaks(node) {
async handleBreaks(node, force) {
let currentPage = this.total + 1;
let currentPosition = currentPage % 2 === 0 ? "left" : "right";
// TODO: Recto and Verso should reverse for rtl languages
......@@ -290,7 +296,9 @@ class Chunker {
breakBefore = node.dataset.breakBefore;
}
if( previousBreakAfter &&
if (force) {
page = this.addPage(true);
} else if( previousBreakAfter &&
(previousBreakAfter === "left" || previousBreakAfter === "right") &&
previousBreakAfter !== currentPosition) {
page = this.addPage(true);
......@@ -485,7 +493,28 @@ class Chunker {
}
*/
async clonePage(originalPage) {
let lastPage = this.pages[this.pages.length - 1];
let page = new Page(this.pagesArea, this.pageTemplate, false, this.hooks);
this.pages.push(page);
// Create the pages
page.create(undefined, lastPage && lastPage.element);
page.index(this.total);
await this.hooks.beforePageLayout.trigger(page, undefined, undefined, this);
this.emit("page", page);
for (const className of originalPage.element.classList) {
page.element.classList.add(className);
}
await this.hooks.afterPageLayout.trigger(page.element, page, undefined, this);
this.emit("renderedPage", page);
}
loadFonts() {
let fontPromises = [];
......
......@@ -14,7 +14,8 @@ import {
needsPageBreak,
needsPreviousBreakAfter,
nodeAfter,
displayedElementBefore, previousSignificantNode,
nodeBefore,
previousSignificantNode,
prevValidNode,
rebuildAncestors,
validNode,
......@@ -47,6 +48,7 @@ class Layout {
this.hooks.layoutNode = new Hook();
this.hooks.beforeOverflow = new Hook();
this.hooks.onOverflow = new Hook();
this.hooks.afterOverflowRemoved = new Hook();
this.hooks.onBreakToken = new Hook();
}
......@@ -404,7 +406,8 @@ class Layout {
}
if (breakToken && breakToken.node && extract) {
this.removeOverflow(overflow, breakLetter);
let removed = this.removeOverflow(overflow, breakLetter);
this.hooks && this.hooks.afterOverflowRemoved.trigger(removed, rendered, this);
}
}
......@@ -452,7 +455,7 @@ class Layout {
isFloat = styles.getPropertyValue("float") !== "none";
skip = styles.getPropertyValue("break-inside") === "avoid";
breakAvoid = node.dataset.breakBefore === "avoid" || node.dataset.previousBreakAfter === "avoid";
prev = breakAvoid && displayedElementBefore(node, rendered);
prev = breakAvoid && nodeBefore(node);
br = node.tagName === "BR" || node.tagName === "WBR";
}
......
......@@ -36,6 +36,7 @@ class Page {
let pagebox = page.querySelector(".pagedjs_pagebox");
let area = page.querySelector(".pagedjs_page_content");
let footnotesArea = page.querySelector(".pagedjs_footnote_area");
let size = area.getBoundingClientRect();
......@@ -51,6 +52,7 @@ class Page {
this.element = page;
this.pagebox = pagebox;
this.area = area;
this.footnotesArea = footnotesArea;
return page;
}
......
......@@ -40,7 +40,8 @@ class AtPage extends Handler {
bottom: {}
},
block: {},
marks: undefined
marks: undefined,
notes: undefined
};
}
......@@ -84,6 +85,9 @@ class AtPage extends Handler {
page.marginalia = marginalia;
}
let notes = this.replaceNotes(node);
page.notes = notes;
let declarations = this.replaceDeclarations(node);
if (declarations.size) {
......@@ -193,15 +197,15 @@ class AtPage extends Handler {
let bleedrecto = undefined;
if (":left" in this.pages) {
bleedverso = this.pages[":left"].bleed;
}
bleedverso = this.pages[":left"].bleed;
}
if (":right" in this.pages) {
bleedrecto = this.pages[":right"].bleed;
}
if (":right" in this.pages) {
bleedrecto = this.pages[":right"].bleed;
}
if ((width && height) &&
(this.width !== width || this.height !== height)) {
(this.width !== width || this.height !== height)) {
this.width = width;
this.height = height;
this.format = format;
......@@ -264,25 +268,49 @@ class AtPage extends Handler {
replaceMarginalia(ast) {
let parsed = {};
const MARGINS = [
"top-left-corner", "top-left", "top", "top-center", "top-right", "top-right-corner",
"bottom-left-corner", "bottom-left", "bottom", "bottom-center", "bottom-right", "bottom-right-corner",
"left-top", "left-middle", "left", "left-bottom", "top-right-corner",
"right-top", "right-middle", "right", "right-bottom", "right-right-corner"
];
csstree.walk(ast.block, {
visit: "Atrule",
enter: (node, item, list) => {
let name = node.name;
if (name === "top") {
name = "top-center";
}
if (name === "right") {
name = "right-middle";
}
if (name === "left") {
name = "left-middle";
if (MARGINS.includes(name)) {
if (name === "top") {
name = "top-center";
}
if (name === "right") {
name = "right-middle";
}
if (name === "left") {
name = "left-middle";
}
if (name === "bottom") {
name = "bottom-center";
}
parsed[name] = node.block;
list.remove(item);
}
if (name === "bottom") {
name = "bottom-center";
}
});
return parsed;
}
replaceNotes(ast) {
let parsed = {};
csstree.walk(ast.block, {
visit: "Atrule",
enter: (node, item, list) => {
let name = node.name;
if (name === "footnote") {
parsed[name] = node.block;
list.remove(item);
}
parsed[name] = node.block;
list.remove(item);
}
});
......@@ -607,6 +635,10 @@ class AtPage extends Handler {
this.addMarginaliaContent(page, ruleList, rule, sheet);
}
if(page.notes) {
this.addNotesStyles(page.notes, page, ruleList, rule, sheet);
}
return rule;
}
......@@ -895,7 +927,7 @@ class AtPage extends Handler {
bleedLeftVerso = this.createVariable("--pagedjs-bleed-left-left", CSSValueToString(bleedverso.left));
widthStringLeft = `calc( ${CSSValueToString(width)} + ${CSSValueToString(bleedverso.left)} + ${CSSValueToString(bleedverso.right)} )`;
heightStringLeft = `calc( ${CSSValueToString(height)} + ${CSSValueToString(bleedverso.top)} + ${CSSValueToString(bleedverso.bottom)} )`;
heightStringLeft = `calc( ${CSSValueToString(height)} + ${CSSValueToString(bleedverso.top)} + ${CSSValueToString(bleedverso.bottom)} )`;
}
let pageWidthVar = this.createVariable("--pagedjs-width", CSSValueToString(width));
......@@ -955,6 +987,29 @@ class AtPage extends Handler {
ast.children.appendData(rule);
}
addNotesStyles(notes, page, list, item, sheet) {
for (const note in notes) {
let selectors = this.selectorsForPage(page);
selectors.insertData({
type: "Combinator",
name: " "
});
selectors.insertData({
type: "ClassSelector",
name: "pagedjs_" + note + "_content"
});
let notesRule = this.createRule(selectors, notes[note]);
list.appendData(notesRule);
}
}
/*
@page {
size: var(--pagedjs-width) var(--pagedjs-height);
......
......@@ -19,7 +19,8 @@ class Counters extends Handler {
}
} else if (property === "counter-reset") {
let reset = this.handleReset(declaration, rule);
if (reset) {
if (reset && reset.selector.includes("pagedjs_") === false) {
dList.remove(dItem);
}
}
......@@ -80,8 +81,19 @@ class Counters extends Handler {
let number = declaration.value.children.getSize() > 1
&& declaration.value.children.last().value;
let name = identifier && identifier.name;
let selector = csstree.generate(rule.ruleNode.prelude);
let counter;
let selector;
let prelude = rule.ruleNode.prelude;
if (rule.ruleNode.type === "Atrule" && rule.ruleNode.name === "page") {
selector = ".pagedjs_page";
} else {
selector = csstree.generate(prelude || rule.ruleNode);
}
if (name === "footnote") {
this.addFootnoteMarkerCounter(declaration.value.children);
}
if (!(name in this.counters)) {
counter = this.addCounter(name);
......@@ -111,7 +123,7 @@ class Counters extends Handler {
countersArray.push(`${counters[c].name} 0`);
}
// Add to pages to allow cross page scope
this.insertRule(`.pagedjs_pages { counter-reset: ${countersArray.join(" ")}}`);
this.insertRule(`.pagedjs_pages { counter-reset: ${countersArray.join(" ")} pages var(--pagedjs-page-count) footnote var(--pagedjs-footnotes-count) footnote-marker var(--pagedjs-footnotes-count)}`);
}
insertRule(rule) {
......@@ -155,7 +167,7 @@ class Counters extends Handler {
let increment, reset;
let resetValue, incrementValue, resetDelta;
let incrementArray;
for (var i = 0; i < elements.length; i++) {
element = elements[i];
resetDelta = 0;
......@@ -191,6 +203,41 @@ class Counters extends Handler {
}
}
addFootnoteMarkerCounter(list) {
let markers = [];
csstree.walk(list, {
visit: "Identifier",
enter: (identNode, iItem, iList) => {
markers.push(identNode.name);
}
});
// Already added
if (markers.includes("footnote-maker")) {
return;
}
list.insertData({
type: "WhiteSpace",
value: " "
});
list.insertData({
type: "Identifier",
name: "footnote-marker"
});
list.insertData({
type: "WhiteSpace",
value: " "
});
list.insertData({
type: "Number",
value: 0
});
}
incrementCounterForElement(element, incrementArray) {
if (!element || !incrementArray || incrementArray.length === 0) return;
......@@ -216,9 +263,15 @@ class Counters extends Handler {
afterPageLayout(pageElement, page) {
let pgreset = pageElement.querySelectorAll("[data-counter-page-reset]");
pgreset.forEach((reset) => {
let value = reset.datasetCounterPageReset;
let value = reset.dataset.counterPageReset - 1; // subtract the current page increment
this.styleSheet.insertRule(`[data-page-number="${pageElement.dataset.pageNumber}"] { counter-reset: page ${value} }`, this.styleSheet.cssRules.length);
});
let notereset = pageElement.querySelectorAll("[data-counter-footnote-reset]");
notereset.forEach((reset) => {
let value = reset.dataset.counterFootnoteReset;
this.styleSheet.insertRule(`[data-page-number="${pageElement.dataset.pageNumber}"] .pagedjs_area { counter-reset: footnote ${value} footnote-marker ${value} }`, this.styleSheet.cssRules.length);
});
}
}
......
This diff is collapsed.
......@@ -5,6 +5,7 @@ import Splits from "./splits";
import Counters from "./counters";
import Lists from "./lists";
import PositionFixed from "./position-fixed";
import Footnotes from "./footnotes";
export default [
AtPage,
......@@ -13,5 +14,6 @@ export default [
Splits,
Counters,
Lists,
PositionFixed
PositionFixed,
Footnotes
];
......@@ -8,6 +8,7 @@ export default `
--pagedjs-height-left: 11in;
--pagedjs-pagebox-width: 8.5in;
--pagedjs-pagebox-height: 11in;
--pagedjs-footnotes-height: 0mm;
--pagedjs-margin-top: 1in;
--pagedjs-margin-right: 1in;
--pagedjs-margin-bottom: 1in;
......@@ -35,6 +36,7 @@ export default `
--pagedjs-mark-cross-display: none;
--pagedjs-mark-crop-display: none;
--pagedjs-page-count: 0;
--pagedjs-footnotes-count: 0;
}
@page {
......@@ -358,17 +360,70 @@ export default `
grid-row: page;
width: 100%;
height: 100%;
padding: var(--pagedjs-padding-top) var(--pagedjs-padding-right) var(--pagedjs-padding-bottom) var(--pagedjs-padding-left)
padding: var(--pagedjs-padding-top) var(--pagedjs-padding-right) var(--pagedjs-padding-bottom) var(--pagedjs-padding-left)
}
.pagedjs_pagebox > .pagedjs_area > .pagedjs_page_content {
width: 100%;
height: 100%;
height: calc(100% - var(--pagedjs-footnotes-height));
position: relative;
column-fill: auto;
}
.pagedjs_pagebox > .pagedjs_area > .pagedjs_footnote_area {
position: relative;
overflow: hidden;
height: var(--pagedjs-footnotes-height);
display: flex;
justify-content: flex-end;
flex-flow: column;
}
.pagedjs_pagebox > .pagedjs_area > .pagedjs_footnote_area > .pagedjs_footnote_content {
overflow: hidden;
}
.pagedjs_pagebox > .pagedjs_area > .pagedjs_footnote_area > .pagedjs_footnote_inner_content {
overflow: hidden;
}
.pagedjs_area [data-footnote-call] {
all: unset;
counter-increment: footnote;
}
[data-footnote-call]::after {
vertical-align: super;
font-size: 65%;
line-height: normal;
content: counter(footnote);
}
@supports ( font-variant-position: super ) {
[data-footnote-call]::after {
vertical-align: baseline;
font-size: 100%;
line-height: inherit;
font-variant-position: super;
}
}
.pagedjs_area [data-split-from] {
counter-increment: unset;
counter-reset: unset;
}
.pagedjs_area [data-footnote-marker]:not([data-split-from]) {
counter-increment: footnote-marker;
text-indent: 0;
display: list-item;
list-style-position: inside;
}
.pagedjs_area [data-footnote-marker]:not([data-split-from])::marker {
content: counter(footnote-marker) ". ";
}
.pagedjs_page {
counter-increment: page;
width: var(--pagedjs-width);
......@@ -388,7 +443,7 @@ export default `
}
.pagedjs_pages {
counter-reset: pages var(--pagedjs-page-count);
counter-reset: pages var(--pagedjs-page-count) footnote var(--pagedjs-footnotes-count) footnote-marker var(--pagedjs-footnotes-count);
}
......@@ -517,13 +572,13 @@ export default `
margin: unset;
}
.pagedjs_pages > .pagedjs_page > .pagedjs_sheet > .pagedjs_pagebox > .pagedjs_area > div [data-split-to]:after,
.pagedjs_pages > .pagedjs_page > .pagedjs_sheet > .pagedjs_pagebox > .pagedjs_area > div [data-split-to]::after {
.pagedjs_pages > .pagedjs_page > .pagedjs_sheet > .pagedjs_pagebox > .pagedjs_area > div [data-split-to]:not([data-footnote-call]):after,
.pagedjs_pages > .pagedjs_page > .pagedjs_sheet > .pagedjs_pagebox > .pagedjs_area > div [data-split-to]:not([data-footnote-call])::after {
content: unset;
}
.pagedjs_pages > .pagedjs_page > .pagedjs_sheet > .pagedjs_pagebox > .pagedjs_area > div [data-split-from]:before,
.pagedjs_pages > .pagedjs_page > .pagedjs_sheet > .pagedjs_pagebox > .pagedjs_area > div [data-split-from]::before {
.pagedjs_pages > .pagedjs_page > .pagedjs_sheet > .pagedjs_pagebox > .pagedjs_area > div [data-split-from]:not([data-footnote-call]):before,
.pagedjs_pages > .pagedjs_page > .pagedjs_sheet > .pagedjs_pagebox > .pagedjs_area > div [data-split-from]:not([data-footnote-call])::before {
content: unset;
}
......
......@@ -151,7 +151,6 @@ class Sheet {
csstree.walk(ruleNode, {
visit: "Selector",
enter: (selectNode, selectItem, selectList) => {
// console.log(selectNode);
this.hooks.onSelector.trigger(selectNode, selectItem, selectList, {ruleNode, ruleItem, rulelist});
if (selectNode.children.forEach(node => {if (node.type === "PseudoElementSelector") {
......@@ -162,10 +161,6 @@ class Sheet {
}
});
}}));
// else {
// console.log("dommage");
// }
}
});
}
......