Continued headlines, pushes text out of page

I used the code below, to create repeating titles for my pages, so if a page is split, the following pages will grab the headline from the original page, and prepend it.
The problem is, that the inserted title tag, sometimes pushes the rest of the page out of bounds.
Is there any way to avoid this?

class RepeatingHeaders extends Paged.Handler {
    constructor(chunker, polisher, caller) {
        super(chunker, polisher, caller);
    }

    afterPageLayout(pageElement, page, breakToken, chunker) {
        // Find all split table elements
        let sections = pageElement.querySelectorAll(".section[data-split-from]");

        sections.forEach((section) => {
            // There is an edge case where the previous page table 
            // has zero height (isn't visible).
            // To avoid double header we will only add header if there is none.
            let sectionHeader = section.querySelector("h1.section-title");
            if (sectionHeader) {
                return;
            }

            // Get the reference UUID of the node
            let ref = section.dataset.ref;
            // Find the node in the original source
            let sourceSection = chunker.source.querySelector("[data-ref='" + ref + "']");

            // Find if there is a header
            let sourceHeader = sourceSection.querySelector("h1.section-title");
            if (sourceHeader) {
                // Clone the header element
                let clonedHeader = sourceHeader.cloneNode(true);
                clonedHeader.classList.add("title-continued");
                // Insert the header at the start of the split table
                section.insertBefore(clonedHeader, section.firstChild);
            }
        });
    }
}

Paged.registerHandlers(RepeatingHeaders);

Hi there and welcome around,

Is there any reason to not use the string-set property? (so you can have the title as running header: https://www.w3.org/TR/css-gcpm-3/#using-named-strings)

Also, you’re using afterPageLayout which mean that the page is finished: the break is done. Any change happening after that won’t impact the layout for all the page. You may want to use another hook: for example, you could check on renderNode() if the node is the first child of the page, and add the title at this exact moment. So the content will not move anymore

Hi Julien,
I don’t want the title in the header, as I already have other content in the headers, but I’ll take a look at the example.
I found the example here and modified it to fit my needs, but I will take a look at the renderNode hook, if I can figure out how to do it, client side script is not exactly my strongest game.

tell me if you don’t manage to make it work, i can have a look.

I managed to get something working, so if anyone needs something similar, they can take a look at my code below, and modify it to fit their needs.
Thanks Julien, for your quick replies and great help, and please let me know if there’s any obvious errors or something I missed.

renderNode(node, sourceNode, callee) {
    if (node.nodeType === Node.TEXT_NODE) return;
    if (node.classList.contains("section-text") && node.parentNode.firstChild === node && node.parentNode.hasAttribute("data-split-from")) {
        let section = node.closest(".section");
        if (section) {
            let splitFrom = section.getAttribute("data-split-from");
            let sourceSection = document.querySelector(".section[data-ref='" + splitFrom + "']");
            let sourceHeader = sourceSection.querySelector("h1.section-title");
            if (sourceHeader) {
                let clonedHeader = sourceHeader.cloneNode(true);
                clonedHeader.classList.add("title-continued");
                section.insertBefore(clonedHeader, section.firstChild);
            }
        }
    }
}
1 Like

Awesome! This is some nice work!