Hello,
We use Prince in work and I was exploring if it was possible to grab the layout information from the box tracking api and use it to just render the "document" to fixed elements into the dom.
I have been able to use the Java Wrapper to pipe data messages that contain the BoxInfo and I used kotlin to serialize each box to a class and now am using them as part of the below method to render each element to a fixed positioned html node:
*I chose the content boxes to position the elements because I thought this was the correct way to go so I don't have to bother accounting for the margin boxes etc, I got the content boxes from the nifty script - https://www.princexml.com/doc/cookbook/#how-and-where-is-my-box
example node
I thought the above approach would account for the positioning but it is off by a large degree and I am wondering what I am missing in order to position the elements correctly.
We have a process whereby we continuously render a document in development and I wanted to expose the exact layout so the frontend could do animations and transition states when the text changes - I am aware the SVG is missing in the attachment, but its fixable I am more concerned I can't get the positions correct.
We use Prince in work and I was exploring if it was possible to grab the layout information from the box tracking api and use it to just render the "document" to fixed elements into the dom.
I have been able to use the Java Wrapper to pipe data messages that contain the BoxInfo and I used kotlin to serialize each box to a class and now am using them as part of the below method to render each element to a fixed positioned html node:
fun positionBox(box: PrinceBox): BoxPosition {
val x = box.contentBox?.x ?: box.x
val y = box.contentBox?.y ?: box.y
val w = box.contentBox?.w ?: box.w
val h = box.contentBox?.h ?: box.h
val cssY = documentHeight - y
return BoxPosition(
x = x,
y = cssY,
w = w,
h = h
)
}
*I chose the content boxes to position the elements because I thought this was the correct way to go so I don't have to bother accounting for the margin boxes etc, I got the content boxes from the nifty script - https://www.princexml.com/doc/cookbook/#how-and-where-is-my-box
example node
<p class="classname1 classname2"
style="position: fixed;
left: 190.4812938299705pt;
top: 37.82343749999998pt;
width: 94.92656250000002pt;
height: 0.0pt;"
>
42 Enterprise Road
</p>
I thought the above approach would account for the positioning but it is off by a large degree and I am wondering what I am missing in order to position the elements correctly.
We have a process whereby we continuously render a document in development and I wanted to expose the exact layout so the frontend could do animations and transition states when the text changes - I am aware the SVG is missing in the attachment, but its fixable I am more concerned I can't get the positions correct.
Edited by maxi