Does .pdf conversion support indexOf()?

[bowlins]

I've just discovered the ability to use javascript in headers and footers when converting EPUB to PDF. I think it's great.

So far I've been able to write simple functions with conditionals. However, I'm stuck when I introduce an indexOf().

I would like not to show headers in initial pages (TOC, title page, etc.) so I'm trying to write something like this after <p id="header">....</p>

<script>
function header() {
   if ( document.getElementById("header").indexOf("Title Page") >= 0 ){
       document.getElementById("header").style.display = 'none'
   }
}
header()
</script>

If I remove

.indexOf("Page Title") >= 0

the function works as expected as all the headers are hidden in output file.

This is why I'm suspecting Calibre may not accept indexOf(). Is this right? And if so, how to hide headers and page numbers for certain sections?

[kovidgoyal]

indexOf operates on strings, getElementById returns DOM nodes.

calibre uses WebKit for pdf conversion, which means it has a complete browser engine with full javascript support.

You want document.getElementById("header").innerHTML.indexO f

[bowlins]

That works like a charm!!! Thank you so much for that. I had no idea calibre conversion came with a full JS search engine. That's impressive

Having realised that, I was wondering how each page is rendered when converting into PDF.

I've managed now to hide headers for certain sections, but I'm not able to hide them when page has headings with a certain class (e.g.: "chapter"). If heading is relatively big, then the header doesn't look that good.

So far I've managed to check if a class exists with this:

function header() {
var chapter = document.getElementsByClassName("chapter");
if (chapter != 'undefined' || chapter != null )
	{document.getElementById("header").style.display = 'none';}
header()

I can see that the function is working because if I set the conditions to equal, the header shows as normal. However, with this function it looks as if the whole .pdf file is the document. The result is that the header is hidden for all pages and not just the ones with the class "chapter".

Is there a way of checking if class exists in the current page?

[kovidgoyal]

pages are made using the css 3 columns module. So if you want to check whether a particular element is on the current page you would need to check if its position is contained in the current viewport position.

[bowlins]

Glad to know that there's a way but after too many hours trying I'm unable to put it in place.

Because I can't print variables on console I don't know which position (if any) my functions are returning. I've tried many variations of offsetParent and offsetTop but with no visible results.

However, the most logical option to me would be to use a variation of my previous answer:

if (document.getElementsByClassName("chapter").getBoundingClientRect()  != null ||
    document.getElementsByClassName("chapter").getBoundingClientRect() != 'undefined') {
//Code to hide header
}

There doesn't seem to be any errors when I run this as the rest of the script runs as it should. But without a console I don't know what value getBoundingClientRect() (or even getBoundingClientRect().top) is actually returning.

Would this be a correct method? Or how could I check returned values?

[eschwartz]

Well, you could always do a test run that just prints out the return value.

[bowlins]

I've tried many variations of document.write() but with no success. I just don't know if JS scripts in the header/footer can interact with the body element. Also using document.write() makes the pdf conversion to fail

Looking at the documentation in MDN, xhtml documents do not allow for document.write(), which makes things even more complicated https://developer.mozilla.org/en-US/...Document/write

[kovidgoyal]

Why do you say there is no logging? console.log works fine, its output will be in the conversion log. As does using innerHTML to change the document contents for debugging.

[kovidgoyal]

And getElementsByClassName returns an list of elements. You want to get the bounding rect of a single element.

[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!!

[kovidgoyal]

Here is a simple way to test if an element is on the current screen

var br = elem.getBoundingClientRect()

var on_current_page = br.left + 20 > window.pageXOffset && br.right - 20 < window.pageXOffset + window.innerWidth

[EbokJunkie]

@kovidgoyal
Looks as JavaScript is disabled in command line.
This header template:

<div id="header" style="font-size:x-small"><p style="float:left">_TITLE_</p><p style="float:right;"><i>_AUTHOR_</i></p></div><script>document.getElementById("header").style.display = "none";</script>

being used in Calbre GUI Pdf output allows to toggle header on and off at all pages using either "inline" or "none".
Exact copy of the same template used in CLI --pdf-header-template option doesn't eliminate header if style.display="none".

Same about this template from Calibre website:

<p id="pagenum" style="text-align:center;"></p><script>document.getElementById("pagenum").innerHTML = "" + (_PAGENUM_ + 3)</script>

CLI throws an error until all blanks are eliminated; even after this command does nothing.
Same template (with all blanks, exact copy from the web page) works perfectly in GUI.

Is there any way to enable JavaScript in command line?

[kovidgoyal]

There is no difference between command line and GUI. Make sure you are escaping command line strings properly. Remember that your shell will be interpreting all arguments you pass, so you have to quote/escape them properly.

[EbokJunkie]

Thanks for advice. I tried all imaginable (to me) combinations of escaping by quotes but exhausted my options...
This is the command line I experimented with intending to turn off the header:

ebook-convert "book.epub" "book.pdf"  --custom-size 78.836x108.31 --unit millimeter   --override-profile-size --pdf-default-font-size 17  --margin-top 12  --pdf-header-template "<div id="header" style="font-size:x-small"><p style="float:left">_TITLE_</p><p style="float:right;"><i>_AUTHOR_</i></p></div><script>document.getElementById("header").style.display="none";</script>"

No matter where I placed additional quotes header always stayed put.
Please give me a hint: How to place quotes in this line to set javascript to work?

[EbokJunkie]

Solved escaping in command line JavaScript .
Just need to escape quotes like \"header\" and \"none\".
Might be useful to point this out in Calibre online documentation.