latest pagedjs and footnoteprefix..

exampleSite/config.toml

@@ -49,6 +49,9 @@ startLevel = 1
 
 [markup.goldmark.renderer]
 unsafe = true
+[markup.goldmark.extensions]
+# footnote gets prefix per page (print sequence needs that)
+footnoteprefix = true
 
 ## Enable custom attribute support for titles and blocks by adding attribute lists inside single curly brackets ({.myclass class="class1 class2" }) and placing it after the Markdown element it decorates, on the same line for titles and on a new line directly below for blocks. introduced in hugo v0.81
 # 

static/css/print.css

@@ -173,6 +173,10 @@
     break-after: avoid;
   }
 
+  table {
+    font-size: 0.9rem;
+  }
+
   .glosscontainer,
   table,
   table + p,

static/js/paged.polyfill.js

@@ -1,5 +1,5 @@
 /**
- * @license Paged.js v0.3.1 | MIT | https://gitlab.pagedmedia.org/tools/pagedjs
+ * @license Paged.js v0.4.1 | MIT | https://gitlab.pagedmedia.org/tools/pagedjs
  */
 
 (function (global, factory) {
@@ -698,7 +698,7 @@
 		let after = elementAfter(node, limiter);
 
 		while (after && after.dataset.undisplayed) {
-			after = elementAfter(after);
+			after = elementAfter(after, limiter);
 		}
 
 		return after;
@@ -708,7 +708,7 @@
 		let before = elementBefore(node, limiter);
 
 		while (before && before.dataset.undisplayed) {
-			before = elementBefore(before);
+			before = elementBefore(before, limiter);
 		}
 
 		return before;
@@ -766,7 +766,7 @@
 		for (var i = 0; i < ancestors.length; i++) {
 			ancestor = ancestors[i];
 			parent = ancestor.cloneNode(false);
-
+		
 			parent.setAttribute("data-split-from", parent.getAttribute("data-ref"));
 			// ancestor.setAttribute("data-split-to", parent.getAttribute("data-ref"));
 
@@ -792,12 +792,23 @@
 				fragment.appendChild(parent);
 			}
 			added.push(parent);
+
+			// rebuild table rows
+			if (parent.nodeName === "TD" && ancestor.parentElement.contains(ancestor)) {
+				let td = ancestor;
+				let prev = parent;
+				while ((td = td.previousElementSibling)) {
+					let sib = td.cloneNode(false);
+					parent.parentElement.insertBefore(sib, prev);
+					prev = sib;
+				}
+				
+			}
 		}
 
 		added = undefined;
 		return fragment;
 	}
-
 	/*
 	export function split(bound, cutElement, breakAfter) {
 			let needsRemoval = [];
@@ -1014,7 +1025,7 @@
 			case "BLOCKQUOTE":
 			case "PRE":
 			case "LI":
-			case "TR":
+			case "TD":
 			case "DT":
 			case "DD":
 			case "VIDEO":
@@ -1032,13 +1043,17 @@
 		return n.cloneNode(deep);
 	}
 
-	function findElement(node, doc) {
+	function findElement(node, doc, forceQuery) {
 		const ref = node.getAttribute("data-ref");
-		return findRef(ref, doc);
+		return findRef(ref, doc, forceQuery);
 	}
 
-	function findRef(ref, doc) {
+	function findRef(ref, doc, forceQuery) {
-		return doc.querySelector(`[data-ref='${ref}']`);
+		if (!forceQuery && doc.indexOfRefs && doc.indexOfRefs[ref]) {
+			return doc.indexOfRefs[ref];
+		} else {
+			return doc.querySelector(`[data-ref='${ref}']`);
+		}
 	}
 
 	function validNode(node) {
@@ -1255,7 +1270,7 @@
 	}
 
 	/**
-	 * Layout
+	 * BreakToken
 	 * @class
 	 */
 	class BreakToken {
@@ -1280,6 +1295,30 @@
 			return true;
 		}
 
+		toJSON(hash) {
+			let node;
+			let index = 0;
+			if (!this.node) {
+				return {};
+			}
+			if (isElement(this.node) && this.node.dataset.ref) {
+				node = this.node.dataset.ref;
+			} else if (hash) {
+				node = this.node.parentElement.dataset.ref;
+			}
+
+			if (this.node.parentElement) {
+				const children = Array.from(this.node.parentElement.childNodes);
+				index = children.indexOf(this.node);
+			}
+
+			return JSON.stringify({
+				"node": node,
+				"index" : index,
+				"offset": this.offset
+			});
+		}
+
 	}
 
 	/**
@@ -1313,6 +1352,15 @@
 			this.element = element;
 
 			this.bounds = this.element.getBoundingClientRect();
+			this.parentBounds = this.element.offsetParent.getBoundingClientRect();
+			let gap = parseFloat(window.getComputedStyle(this.element).columnGap);
+		
+			if (gap) {
+				let leftMargin = this.bounds.left - this.parentBounds.left;
+				this.gap =  gap - leftMargin;	
+			} else {
+				this.gap = 0;
+			}
 
 			if (hooks) {
 				this.hooks = hooks;
@@ -1369,6 +1417,9 @@
 						console.warn("Unable to layout item: ", prevNode);
 						return new RenderResult(undefined, new OverflowContentError("Unable to layout item", [prevNode]));
 					}
+
+					this.rebuildTableFromBreakToken(newBreakToken, wrapper);
+
 					return new RenderResult(newBreakToken);
 				}
 
@@ -1387,11 +1438,18 @@
 
 					if (!newBreakToken) {
 						newBreakToken = this.breakAt(node);
+					} else {
+						this.rebuildTableFromBreakToken(newBreakToken, wrapper);
 					}
 
 					if (newBreakToken && newBreakToken.equals(prevBreakToken)) {
 						console.warn("Unable to layout item: ", node);
-						return new RenderResult(undefined, new OverflowContentError("Unable to layout item", [node]));
+						let after = newBreakToken.node && nodeAfter(newBreakToken.node);
+						if (after) {
+							newBreakToken = new BreakToken(after);
+						} else {
+							return new RenderResult(undefined, new OverflowContentError("Unable to layout item", [node]));
+						}
 					}
 
 					length = 0;
@@ -1399,6 +1457,17 @@
 					break;
 				}
 
+				if (node.dataset && node.dataset.page) {
+					let named = node.dataset.page;
+					let page = this.element.closest(".pagedjs_page");
+					page.classList.add("pagedjs_named_page");
+					page.classList.add("pagedjs_" + named + "_page");
+
+					if (!node.dataset.splitFrom) {
+						page.classList.add("pagedjs_" + named + "_first_page");
+					}
+				}
+
 				// Should the Node be a shallow or deep clone
 				let shallow = isContainer(node);
 
@@ -1423,6 +1492,8 @@
 
 					if (!newBreakToken) {
 						newBreakToken = this.breakAt(node);
+					} else {
+						this.rebuildTableFromBreakToken(newBreakToken, wrapper);
 					}
 
 					length = 0;
@@ -1443,13 +1514,19 @@
 
 					newBreakToken = this.findBreakToken(wrapper, source, bounds, prevBreakToken);
 
-					if (newBreakToken && newBreakToken.equals(prevBreakToken)) {
-						console.warn("Unable to layout item: ", node);
-						return new RenderResult(undefined, new OverflowContentError("Unable to layout item", [node]));
-					}
-
 					if (newBreakToken) {
 						length = 0;
+						this.rebuildTableFromBreakToken(newBreakToken, wrapper);
+					}
+
+					if (newBreakToken && newBreakToken.equals(prevBreakToken)) {
+						console.warn("Unable to layout item: ", node);
+						let after = newBreakToken.node && nodeAfter(newBreakToken.node);
+						if (after) {
+							newBreakToken = new BreakToken(after);
+						} else {
+							return new RenderResult(undefined, new OverflowContentError("Unable to layout item", [node]));
+						}
 					}
 				}
 
@@ -1534,6 +1611,13 @@
 				dest.appendChild(clone);
 			}
 
+			if (clone.dataset && clone.dataset.ref) {
+				if (!dest.indexOfRefs) {
+					dest.indexOfRefs = {};
+				}
+				dest.indexOfRefs[clone.dataset.ref] = clone;
+			}
+
 			let nodeHooks = this.hooks.renderNode.triggerSync(clone, node, this);
 			nodeHooks.forEach((newNode) => {
 				if (typeof newNode != "undefined") {
@@ -1544,6 +1628,23 @@
 			return clone;
 		}
 
+		rebuildTableFromBreakToken(breakToken, dest) {
+			if (!breakToken || !breakToken.node) {
+				return;
+			}
+			let node = breakToken.node;
+			let td = isElement(node) ? node.closest("td") : node.parentElement.closest("td");
+			if (td) {
+				let rendered = findElement(td, dest, true);
+				if (!rendered) {
+					return;
+				}
+				while ((td = td.nextElementSibling)) {
+					this.append(td, dest, null, true);
+				}
+			}
+		}
+
 		async waitForImages(imgs) {
 			let results = Array.from(imgs).map(async (img) => {
 				return this.awaitImageLoaded(img);
@@ -1723,16 +1824,20 @@
 
 		hasOverflow(element, bounds = this.bounds) {
 			let constrainingElement = element && element.parentNode; // this gets the element, instead of the wrapper for the width workaround
-			let {width} = element.getBoundingClientRect();
+			let {width, height} = element.getBoundingClientRect();
 			let scrollWidth = constrainingElement ? constrainingElement.scrollWidth : 0;
-			return Math.max(Math.floor(width), scrollWidth) > Math.round(bounds.width);
+			let scrollHeight = constrainingElement ? constrainingElement.scrollHeight : 0;
+			return Math.max(Math.floor(width), scrollWidth) > Math.round(bounds.width) ||
+				Math.max(Math.floor(height), scrollHeight) > Math.round(bounds.height);
 		}
 
-		findOverflow(rendered, bounds = this.bounds) {
+		findOverflow(rendered, bounds = this.bounds, gap = this.gap) {
 			if (!this.hasOverflow(rendered, bounds)) return;
 
-			let start = Math.round(bounds.left);
+			let start = Math.floor(bounds.left);
-			let end = Math.round(bounds.right);
+			let end = Math.round(bounds.right + gap);
+			let vStart = Math.round(bounds.top);
+			let vEnd = Math.round(bounds.bottom);
 			let range;
 
 			let walker = walk$2(rendered.firstChild, rendered);
@@ -1752,8 +1857,10 @@
 					let pos = getBoundingClientRect(node);
 					let left = Math.round(pos.left);
 					let right = Math.floor(pos.right);
+					let top = Math.round(pos.top);
+					let bottom = Math.floor(pos.bottom);
 
-					if (!range && left >= end) {
+					if (!range && (left >= end || top >= vEnd)) {
 						// Check if it is a float
 						let isFloat = false;
 
@@ -1761,7 +1868,8 @@
 						const insideTableCell = parentOf(node, "TD", rendered);
 						if (insideTableCell && window.getComputedStyle(insideTableCell)["break-inside"] === "avoid") {
 							// breaking inside a table cell produces unexpected result, as a workaround, we forcibly avoid break inside in a cell.
-							prev = insideTableCell;
+							// But we take the whole row, not just the cell that is causing the break.
+							prev = insideTableCell.parentElement;
 						} else if (isElement(node)) {
 							let styles = window.getComputedStyle(node);
 							isFloat = styles.getPropertyValue("float") !== "none";
@@ -1787,23 +1895,24 @@
 
 							// Check if the node is inside a row with a rowspan
 							const table = parentOf(tableRow, "TABLE", rendered);
-							if (table) {
+							const rowspan = table.querySelector("[colspan]");
+							if (table && rowspan) {
 								let columnCount = 0;
 								for (const cell of Array.from(table.rows[0].cells)) {
-									columnCount += parseInt(cell.getAttribute("COLSPAN") || "1");
+									columnCount += parseInt(cell.getAttribute("colspan") || "1");
 								}
 								if (tableRow.cells.length !== columnCount) {
-									let previousRow = tableRow.previousSibling;
+									let previousRow = tableRow.previousElementSibling;
 									let previousRowColumnCount;
 									while (previousRow !== null) {
 										previousRowColumnCount = 0;
 										for (const cell of Array.from(previousRow.cells)) {
-											previousRowColumnCount += parseInt(cell.getAttribute("COLSPAN") || "1");
+											previousRowColumnCount += parseInt(cell.getAttribute("colspan") || "1");
 										}
 										if (previousRowColumnCount === columnCount) {
 											break;
 										}
-										previousRow = previousRow.previousSibling;
+										previousRow = previousRow.previousElementSibling;
 									}
 									if (previousRowColumnCount === columnCount) {
 										prev = previousRow;
@@ -1839,16 +1948,20 @@
 						let rects = getClientRects(node);
 						let rect;
 						left = 0;
+						top = 0;
 						for (var i = 0; i != rects.length; i++) {
 							rect = rects[i];
 							if (rect.width > 0 && (!left || rect.left > left)) {
 								left = rect.left;
 							}
+							if (rect.height > 0 && (!top || rect.top > top)) {
+								top = rect.top;
+							}
 						}
 
-						if (left >= end) {
+						if (left >= end || top >= vEnd) {
 							range = document.createRange();
-							offset = this.textBreak(node, start, end);
+							offset = this.textBreak(node, start, end, vStart, vEnd);
 							if (!offset) {
 								range = undefined;
 							} else {
@@ -1859,7 +1972,7 @@
 					}
 
 					// Skip children
-					if (skip || right <= end) {
+					if (skip || (right <= end && bottom <= vEnd)) {
 						next = nodeAfter(node, rendered);
 						if (next) {
 							walker = walk$2(next, rendered);
@@ -1878,7 +1991,7 @@
 
 		}
 
-		findEndToken(rendered, source, bounds = this.bounds) {
+		findEndToken(rendered, source) {
 			if (rendered.childNodes.length === 0) {
 				return;
 			}
@@ -1920,10 +2033,12 @@
 			return this.breakAt(after);
 		}
 
-		textBreak(node, start, end) {
+		textBreak(node, start, end, vStart, vEnd) {
 			let wordwalker = words(node);
 			let left = 0;
 			let right = 0;
+			let top = 0;
+			let bottom = 0;
 			let word, next, done, pos;
 			let offset;
 			while (!done) {
@@ -1939,13 +2054,15 @@
 
 				left = Math.floor(pos.left);
 				right = Math.floor(pos.right);
+				top = Math.floor(pos.top);
+				bottom = Math.floor(pos.bottom);
 
-				if (left >= end) {
+				if (left >= end || top >= vEnd) {
 					offset = word.startOffset;
 					break;
 				}
 
-				if (right > end) {
+				if (right > end || bottom > vEnd) {
 					let letterwalker = letters(word);
 					let letter, nextLetter, doneLetter;
 
@@ -1960,8 +2077,9 @@
 
 						pos = getBoundingClientRect(letter);
 						left = Math.floor(pos.left);
+						top = Math.floor(pos.top);
 
-						if (left >= end) {
+						if (left >= end || top >= vEnd) {
 							offset = letter.startOffset;
 							done = true;
 
@@ -2060,7 +2178,7 @@
 
 
 			area.style.columnWidth = Math.round(size.width) + "px";
-			area.style.columnGap = "calc(var(--pagedjs-margin-right) + var(--pagedjs-margin-left))";
+			area.style.columnGap = "calc(var(--pagedjs-margin-right) + var(--pagedjs-margin-left) + var(--pagedjs-bleed-right) + var(--pagedjs-bleed-left) + var(--pagedjs-column-gap-offset))";
 			// area.style.overflow = "scroll";
 
 			this.width = Math.round(size.width);
@@ -2677,6 +2795,7 @@
 			this.hooks.afterOverflowRemoved = new Hook(this);
 			this.hooks.onBreakToken = new Hook();
 			this.hooks.afterPageLayout = new Hook(this);
+			this.hooks.finalizePage = new Hook(this);
 			this.hooks.afterRendered = new Hook(this);
 
 			this.pages = [];
@@ -2883,12 +3002,14 @@
 				this.emit("page", page);
 				// await this.hooks.layout.trigger(page.element, page, undefined, this);
 				await this.hooks.afterPageLayout.trigger(page.element, page, undefined, this);
+				await this.hooks.finalizePage.trigger(page.element, page, undefined, this);
 				this.emit("renderedPage", page);
 			}
 		}
 
 		async *layout(content, startAt) {
 			let breakToken = startAt || false;
+			let tokens = [];
 
 			while (breakToken !== undefined && (true)) {
 
@@ -2906,7 +3027,20 @@
 				// Layout content in the page, starting from the breakToken
 				breakToken = await page.layout(content, breakToken, this.maxChars);
 
+				if (breakToken) {
+					let newToken = breakToken.toJSON(true);
+					if (tokens.lastIndexOf(newToken) > -1) {
+						// loop
+						let err = new OverflowContentError("Layout repeated", [breakToken.node]);
+						console.error("Layout repeated at: ", breakToken.node);
+						return err;
+					} else {
+						tokens.push(newToken);
+					}
+				}
+
 				await this.hooks.afterPageLayout.trigger(page.element, page, breakToken, this);
+				await this.hooks.finalizePage.trigger(page.element, page, undefined, this);
 				this.emit("renderedPage", page);
 
 				this.recoredCharLength(page.wrapper.textContent.length);
@@ -3077,6 +3211,7 @@
 			}
 
 			await this.hooks.afterPageLayout.trigger(page.element, page, undefined, this);
+			await this.hooks.finalizePage.trigger(page.element, page, undefined, this);
 			this.emit("renderedPage", page);
 		}
 
@@ -26299,9 +26434,10 @@
 
 		insertRule(rule) {
 			let inserted = this.ast.children.appendData(rule);
-			inserted.forEach((item) => {
+
-				this.declarations(item);
+			this.declarations(rule);
-			});
+
+			return inserted;
 		}
 
 		urls(ast) {
@@ -26342,7 +26478,6 @@
 			lib.walk(ast, {
 				visit: "Rule",
 				enter: (ruleNode, ruleItem, rulelist) => {
-					// console.log("rule", ruleNode);
 
 					this.hooks.onRule.trigger(ruleNode, ruleItem, rulelist);
 					this.declarations(ruleNode, ruleItem, rulelist);
@@ -26356,7 +26491,6 @@
 			lib.walk(ruleNode, {
 				visit: "Declaration",
 				enter: (declarationNode, dItem, dList) => {
-					// console.log(declarationNode);
 
 					this.hooks.onDeclaration.trigger(declarationNode, dItem, dList, {ruleNode, ruleItem, rulelist});
 
@@ -26583,6 +26717,7 @@
 	--pagedjs-page-count: 0;
 	--pagedjs-page-counter-increment: 1;
 	--pagedjs-footnotes-count: 0;
+	--pagedjs-column-gap-offset: 1000px;
 }
 
 @page {
@@ -26981,13 +27116,20 @@
 	counter-reset: unset;
 }
 
-[data-footnote-marker]:not([data-split-from]) {
+[data-footnote-marker] {
-	counter-increment: footnote-marker;
 	text-indent: 0;
 	display: list-item;
 	list-style-position: inside;
 }
 
+[data-footnote-marker][data-split-from] {
+	list-style: none;
+}
+
+[data-footnote-marker]:not([data-split-from]) {
+	counter-increment: footnote-marker;
+}
+
 [data-footnote-marker]::marker {
 	content: counter(footnote-marker) ". ";
 }
@@ -27607,7 +27749,8 @@
 				backgroundOrigin: undefined,
 				block: {},
 				marks: undefined,
-				notes: undefined
+				notes: undefined,
+				added: false
 			};
 		}
 
@@ -27635,6 +27778,8 @@
 				page = this.pages[selector];
 				marginalia = this.replaceMarginalia(node);
 				needsMerge = true;
+				// Mark page for getting classes added again
+				page.added = false;
 			} else {
 				page = this.pageModel(selector);
 				marginalia = this.replaceMarginalia(node);
@@ -27754,9 +27899,11 @@
 		*/
 
 		afterTreeWalk(ast, sheet) {
+			let dirtyPage = "*" in this.pages && this.pages["*"].added === false;
+
 			this.addPageClasses(this.pages, ast, sheet);
 
-			if ("*" in this.pages) {
+			if (dirtyPage) {
 				let width = this.pages["*"].width;
 				let height = this.pages["*"].height;
 				let format = this.pages["*"].format;
@@ -28202,41 +28349,48 @@
 
 		addPageClasses(pages, ast, sheet) {
 			// First add * page
-			if ("*" in pages) {
+			if ("*" in pages && pages["*"].added === false) {
 				let p = this.createPage(pages["*"], ast.children, sheet);
 				sheet.insertRule(p);
+				pages["*"].added = true;
 			}
 			// Add :left & :right
-			if (":left" in pages) {
+			if (":left" in pages && pages[":left"].added === false) {
 				let left = this.createPage(pages[":left"], ast.children, sheet);
 				sheet.insertRule(left);
+				pages[":left"].added = true;
 			}
-			if (":right" in pages) {
+			if (":right" in pages && pages[":right"].added === false) {
 				let right = this.createPage(pages[":right"], ast.children, sheet);
 				sheet.insertRule(right);
+				pages[":right"].added = true;
 			}
 			// Add :first & :blank
-			if (":first" in pages) {
+			if (":first" in pages && pages[":first"].added === false) {
 				let first = this.createPage(pages[":first"], ast.children, sheet);
 				sheet.insertRule(first);
+				pages[":first"].added = true;
 			}
-			if (":blank" in pages) {
+			if (":blank" in pages && pages[":blank"].added === false) {
 				let blank = this.createPage(pages[":blank"], ast.children, sheet);
 				sheet.insertRule(blank);
+				pages[":blank"].added = true;
 			}
 			// Add nth pages
 			for (let pg in pages) {
-				if (pages[pg].nth) {
+				if (pages[pg].nth && pages[pg].added === false) {
 					let nth = this.createPage(pages[pg], ast.children, sheet);
 					sheet.insertRule(nth);
+					pages[pg].added = true;
 				}
 			}
 
 			// Add named pages
 			for (let pg in pages) {
-				if (pages[pg].name) {
+				if (pages[pg].name && pages[pg].added === false) {
 					let named = this.createPage(pages[pg], ast.children, sheet);
 					sheet.insertRule(named);
+					pages[pg].added = true;
 				}
 			}
 
@@ -29220,15 +29374,20 @@
 		}
 
 		addPageAttributes(page, start, pages) {
-			let named = start.dataset.page;
+			let namedPages = [start.dataset.page];
 
-			if (named) {
+			if (namedPages && namedPages.length) {
-				page.name = named;
+				for (const named of namedPages) {
-				page.element.classList.add("pagedjs_named_page");
+					if (!named) {
-				page.element.classList.add("pagedjs_" + named + "_page");
+						continue;
+					}
+					page.name = named;
+					page.element.classList.add("pagedjs_named_page");
+					page.element.classList.add("pagedjs_" + named + "_page");
 
-				if (!start.dataset.splitFrom) {
+					if (!start.dataset.splitFrom) {
-					page.element.classList.add("pagedjs_" + named + "_first_page");
+						page.element.classList.add("pagedjs_" + named + "_first_page");
+					}
 				}
 			}
 		}
@@ -29274,7 +29433,7 @@
 			// page.element.querySelector('.paged_area').style.color = red;
 		}
 
-		afterPageLayout(fragment, page, breakToken, chunker) {
+		finalizePage(fragment, page, breakToken, chunker) {
 			for (let m in this.marginalia) {
 				let margin = this.marginalia[m];
 				let sels = m.split(" ");
@@ -29908,21 +30067,45 @@
 		onAtMedia(node, item, list) {
 			let media = this.getMediaName(node);
 			let rules;
-
+			if (media.includes("print")) {
-			if (media === "print") {
 				rules = node.block.children;
 
-				// Remove rules from the @media block
+				// Append rules to the end of main rules list
-				node.block.children = new lib.List();
+				// TODO: this isn't working right, needs to check what is in the prelude
+				/*
+				rules.forEach((selectList) => {
+					if (selectList.prelude) {
+						selectList.prelude.children.forEach((rule) => {
+
+							rule.children.prependData({
+								type: "Combinator",
+								name: " "
+							});
+		
+							rule.children.prependData({
+								type: "ClassSelector",
+								name: "pagedjs_page"
+							});
+						});	
+					}
+				});
+
+				list.insertList(rules, item);
+				*/
 
 				// Append rules to the end of main rules list
 				list.appendList(rules);
+
+				// Remove rules from the @media block
+				list.remove(item);
+			} else if (!media.includes("all") && !media.includes("pagedjs-ignore")) {
+				list.remove(item);
 			}
 
 		}
 
 		getMediaName(node) {
-			let media = "";
+			let media = [];
 
 			if (typeof node.prelude === "undefined" ||
 					node.prelude.type !== "AtrulePrelude" ) {
@@ -29932,7 +30115,7 @@
 			lib.walk(node.prelude, {
 				visit: "Identifier",
 				enter: (identNode, iItem, iList) => {
-					media = identNode.name;
+					media.push(identNode.name);
 				}
 			});
 			return media;
@@ -31143,9 +31326,9 @@
 	}
 
 	var pagedMediaHandlers = [
+		PrintMedia,
 		AtPage,
 		Breaks,
-		PrintMedia,
 		Splits,
 		Counters,
 		Lists,
@@ -31242,18 +31425,16 @@
 		afterPageLayout(fragment) {
 			for (let name of Object.keys(this.runningSelectors)) {
 				let set = this.runningSelectors[name];
-				if (!set.first) {
+				let selected = fragment.querySelector(set.selector);
-					let selected = fragment.querySelector(set.selector);
+				if (selected) {
-					if (selected) {
+					// let cssVar;
-						// let cssVar;
+					if (set.identifier === "running") {
-						if (set.identifier === "running") {
+						// cssVar = selected.textContent.replace(/\\([\s\S])|(["|'])/g,"\\$1$2");
-							// cssVar = selected.textContent.replace(/\\([\s\S])|(["|'])/g,"\\$1$2");
+						// this.styleSheet.insertRule(`:root { --string-${name}: "${cssVar}"; }`, this.styleSheet.cssRules.length);
-							// this.styleSheet.insertRule(`:root { --string-${name}: "${cssVar}"; }`, this.styleSheet.cssRules.length);
+						// fragment.style.setProperty(`--string-${name}`, `"${cssVar}"`);
-							// fragment.style.setProperty(`--string-${name}`, `"${cssVar}"`);
+						set.first = selected;
-							set.first = selected;
+					} else {
-						} else {
+						console.warn(set.value + "needs css replacement");
-							console.warn(set.value + "needs css replacement");
-						}
 					}
 				}
 			}
@@ -31404,7 +31585,7 @@
 
 			this.stringSetSelectors = {};
 			this.type;
-			// pageLastString = last string variable defined on the page 
+			// pageLastString = last string variable defined on the page
 			this.pageLastString;
 
 		}
@@ -31413,21 +31594,35 @@
 			if (declaration.property === "string-set") {
 				let selector = lib.generate(rule.ruleNode.prelude);
 
-				let identifier = declaration.value.children.first().name;
+				let identifiers = [];
+				let functions = [];
+				let values = [];
 
-				let value;
+				declaration.value.children.forEach((child) => {
-				lib.walk(declaration, {
+					if (child.type === "Identifier") {
-					visit: "Function",
+						identifiers.push(child.name);
-					enter: (node, item, list) => {
+					}
-						value = lib.generate(node);
+					if (child.type === "Function") {
+						functions.push(child.name);
+						child.children.forEach((subchild) => {
+							if (subchild.type === "Identifier") {
+								values.push(subchild.name);
+							}
+						});
 					}
 				});
 
-				this.stringSetSelectors[identifier] = {
+				identifiers.forEach((identifier, index) => {
-					identifier,
+					let func = functions[index];
-					value,
+					let value = values[index];
-					selector
+					this.stringSetSelectors[identifier] = {
-				};
+						identifier,
+						func,
+						value,
+						selector
+					};
+				});
+
 			}
 		}
 
@@ -31467,11 +31662,13 @@
 			{
 				this.pageLastString = {};
 			}
-		
+
 			
 			for (let name of Object.keys(this.stringSetSelectors)) {
 		
 				let set = this.stringSetSelectors[name];
+				let value = set.value;
+				let func = set.func;
 				let selected = fragment.querySelectorAll(set.selector);
 
 				// Get the last found string for the current identifier
@@ -31489,18 +31686,36 @@
 
 					selected.forEach((sel) => {
 						// push each content into the array to define in the variable the first and the last element of the page.
-						this.pageLastString[name] = selected[selected.length - 1].textContent;
+						if (func === "content") {
-					
+							this.pageLastString[name] = selected[selected.length - 1].textContent;
+						}
+
+						if (func === "attr") {
+							this.pageLastString[name] = selected[selected.length - 1].getAttribute(value) || "";
+						}
+
 					});	
 
 					/* FIRST */
 		
-					varFirst = selected[0].textContent;
+					if (func === "content") {
+						varFirst = selected[0].textContent;
+					}
+
+					if (func === "attr") {
+						varFirst = selected[0].getAttribute(value) || "";
+					}
 
 
 					/* LAST */
 
-					varLast = selected[selected.length - 1].textContent;
+					if (func === "content") {
+						varLast = selected[selected.length - 1].textContent;
+					}
+
+					if (func === "attr") {
+						varLast = selected[selected.length - 1].getAttribute(value) || "";
+					}
 
 
 					/* START */
@@ -32703,9 +32918,9 @@
 
 		removeStyles(doc=document) {
 			// Get all stylesheets
-			const stylesheets = Array.from(doc.querySelectorAll("link[rel='stylesheet']"));
+			const stylesheets = Array.from(doc.querySelectorAll("link[rel='stylesheet']:not([data-pagedjs-ignore], [media~='screen'])"));
 			// Get inline styles
-			const inlineStyles = Array.from(doc.querySelectorAll("style:not([data-pagedjs-inserted-styles])"));
+			const inlineStyles = Array.from(doc.querySelectorAll("style:not([data-pagedjs-inserted-styles], [data-pagedjs-ignore], [media~='screen'])"));
 			const elements = [...stylesheets, ...inlineStyles];
 			return elements
 				// preserve order
@@ -32779,6 +32994,7 @@
 		Polisher: Polisher,
 		Previewer: Previewer,
 		Handler: Handler,
+		registeredHandlers: registeredHandlers,
 		registerHandlers: registerHandlers,
 		initializeHandlers: initializeHandlers
 	});