[bowlins]

It's been intense with many unexpected issues along the way, but I now have some code which removes headers from chapters' first page in pdf output files.

Print books do not normally have headers at the start of a chapter, but I'm not sure if this is something that people are actually using in Calibre. I'll post some explanations for future reference with code below just in case it helps someone.

JS methods which are normally used for screen viewports were very problematic and I never got them to work correctly. I assume that this is because as a print document, viewports work differently (?).

I eventually manage to print values in the pdf output document using innerHTML in the footer (sorry kovidgoyal but couldn't find where the console would be printed in the log files). This helped me to see that methods based on offset properties and getBoundingClientRect() were retrieving the position of the element fine but the position value remained the same for the whole chapter for all pages. This meant that any hiding of the header would be applied to the whole xhtml file and not just the first page.

Instead of carrying through that route, I stumbled upon a set of functions based on the Pythagorean Theorem http://stackoverflow.com/questions/1...ements-centers

I eventually had my Eureka moment as the triangle measures the distance between any two elements for the whole chapter/file but this time the value is updated for each page. Now that the value was changing on each page, it was finally possible to remove the header in the first page of each chapter (or any section for that matter).

function hasChapter() {
    var chapter = document.getElementsByClassName("chapter")[0],
        header = document.getElementById("header");

    var getPositionAtCenter = function (element) {
        var data = element.getBoundingClientRect();
        return {
            x: data.left + data.width / 2,
            y: data.top + data.height / 2
        };
    };

    var getDistanceBetweenElements = function(a, b) {
        var aPosition = getPositionAtCenter(header);
        var bPosition = getPositionAtCenter(chapter);

        return Math.sqrt(
            Math.pow(aPosition.x - bPosition.x, 2) + 
            Math.pow(aPosition.y - bPosition.y, 2) 
        );
    };
    
    var distance = getDistanceBetweenElements(document.getElementById("x"),
                                              document.getElementById("y"));
    
    if ( distance < 200 ) {
       document.getElementById("header").style.display = 'none';
    }   
}
hasChapter();

Other people using this may need to check the minimum distance or the class name for their section headings.

But overall this works!!