I have to apply a line count to the exported pdf.
The script will be used in different templates. Therefore i don't know the @page layout.
I have also to include the computed line breaks inside of heading and paragraph elements.
My approache to this is to enclose each word inside the elements with a span.
Afterwards i'm iterating through these spans and comparing their y-coordinates. if they don't match, a new line has been computed. I'm using the y-coordinates to place the line numbers as well.
This approache works well in the browser, but calling this script with Prince does nothing.
Then i found the box tracking API in this forum. So now i'm able to fetch the y-position after layout has been finished.
If i try to create a new element with the line number nothing happens with no error;
This is the function to set the line numbers:
And here the function is called:
At this point the rendering is allready done.
Is there a way to kick off the rendering again?
Or do i just miss something?
The script will be used in different templates. Therefore i don't know the @page layout.
I have also to include the computed line breaks inside of heading and paragraph elements.
My approache to this is to enclose each word inside the elements with a span.
var currntEl = el.innerHTML.trim().replace(/ /g, "</span> <span class='get-position'>");
el.innerHTML = "<span class='get-position'>" + currntEl + "</span>";
Afterwards i'm iterating through these spans and comparing their y-coordinates. if they don't match, a new line has been computed. I'm using the y-coordinates to place the line numbers as well.
This approache works well in the browser, but calling this script with Prince does nothing.
Then i found the box tracking API in this forum. So now i'm able to fetch the y-position after layout has been finished.
If i try to create a new element with the line number nothing happens with no error;
This is the function to set the line numbers:
function setLinenumber(lineCount, elCoordinates) {
if (lineCount > 0 && elCoordinates && elCoordinates.y) {
console.log("x: "+elCoordinates.x+" y: "+elCoordinates.y);
var newLineNumber = document.createElement("span");
newLineNumber.innerHTML = lineCount;
newLineNumber.setAttribute("class", "lineNumber")
newLineNumber.style.position = "absolute";
newLineNumber.style.top = elCoordinates.y + "px";
newLineNumber.style.left = "+20px";
document.body.appendChild(newLineNumber);
}
}
And here the function is called:
function manageLineBreaks() { // this function is called onload
Prince.trackBoxes = true;
Prince.addEventListener("complete", getCoordinates, false);
function getCoordinates() {
// this will be called by the oncomplete event
...
try {
setLinenumber(300, {x:150, y:150});
} catch (e) {
console.error(e);
}
}
At this point the rendering is allready done.
Is there a way to kick off the rendering again?
Or do i just miss something?